Wraz z rosnącą popularnością komponentów internetowych i bibliotek pomocniczych, takich jak Polymer, elementy niestandardowe stają się atrakcyjnym sposobem tworzenia funkcji interfejsu użytkownika. Domyślne opakowanie elementów niestandardowych sprawia, że są one szczególnie przydatne do tworzenia niezależnych widżetów.
Chociaż niektóre widżety są samowystarczalne, wiele z nich korzysta z danych zewnętrznych, aby wyświetlać treści użytkownikowi. Przykładem może być bieżąca prognoza pogody w widżecie pogody lub adres firmy w widżecie mapy.
W Polymerze elementy niestandardowe są deklaratywne, co oznacza, że po zaimportowaniu ich do projektu można je bardzo łatwo uwzględnić i skonfigurować w HTML, np. przekazując dane do wypełnienia elementu za pomocą atrybutu.
Chcielibyśmy uniknąć powtarzania się i zapewnić spójność danych, używając tych samych fragmentów danych do wypełniania różnych widżetów oraz informowania wyszukiwarek i innych użytkowników o treściach naszej strony. Aby to osiągnąć, używamy standardu schema.org i formatu JSON-LD.
wypełnianie komponentów uporządkowanymi danymi;
Zazwyczaj format JSON jest wygodnym sposobem na wstrzyknięcie danych do konkretnego widżetu. Dzięki rosnącemu wsparciu dla formatu JSON-LD możemy używać tych samych struktur danych, aby przekazywać interfejsowi, wyszukiwarkom i innym odbiorcom uporządkowanych danych dokładne znaczenie zawartości strony.
Połączenie komponentów internetowych z formatem JSON-LD pozwala nam stworzyć dobrze zdefiniowaną architekturę aplikacji:
- schema.org i JSON-LD stanowią warstwę danych, przy czym schema.org udostępnia słownik danych, a JSON-LD określa ich format i przesyłanie.
- elementy niestandardowe stanowią warstwę prezentacji, która może być konfigurowana i jest oddzielona od samych danych.
Przykład
Rozważmy ten przykład: strona z listą kilku lokalizacji Google Office: https://github.com/googlearchive/structured-data-web-components/tree/master/demo
Zawiera 2 widżety: mapę z pinezką do każdego biura i menu z listą lokalizacji. Ważne jest, aby oba widżety wyświetlały te same dane użytkownikowi, a strona była czytelna dla wyszukiwarek.
W tym pokazie używamy jednostek LocalBusiness, aby wyrazić znaczenie naszych danych, czyli geograficzną lokalizację niektórych biur Google.
Najlepszym sposobem na sprawdzenie, jak Google odczytuje i zaindeksuje tę stronę, jest skorzystanie z nowego, ulepszonego Narzędzia do testowania uporządkowanych danych. Prześlij adres URL wersji demonstracyjnej w sekcji URL pobierania i kliknij Pobierz i zweryfikuj. W sekcji po prawej stronie znajdziesz przeanalizowane dane pobrane ze strony wraz z błędami, które mogły wystąpić. Jest to bardzo wygodny sposób sprawdzania, czy znaczniki JSON-LD są poprawne i można je przetworzyć w Google.
Więcej informacji o tym narzędziu i wprowadzonych przez nie ulepszeniach znajdziesz w poście na blogu Webmaster Central.
Łączenie komponentów ze źródłem danych uporządkowanych
Kod wersji demonstracyjnej i komponentów internetowych użytych do jej utworzenia jest dostępny na GitHub. Przyjrzyjmy się kodom źródłowym strony combined-demo.html.
Najpierw umieszczamy dane na stronie za pomocą skryptu JSON-LD:
<script type="application/ld+json">
{...}
</script>
Dzięki temu dane są łatwo dostępne dla innych użytkowników obsługujących standard schema.org i format JSON-LD, np. wyszukiwarek.
W drugim kroku do wyświetlania danych używamy 2 komponentów internetowych:
- address-dropdown-jsonld – ten element tworzy menu z wszystkimi lokalizacjami przekazanymi w atrybucie „jsonld”.
- google-map-jsonld – ten element tworzy mapę Google z pinezką dla każdej lokalizacji przekazanej w atrybucie „jsonld”.
Aby to zrobić, importujemy je na naszą stronę za pomocą importu kodu HTML.
<link rel="import" href="bower_components/google-map-jsonld/google-map-jsonld.html">
<link rel="import" href="bower_components/address-dropdown-jsonld/address-dropdown-jsonld.html">
Po zaimportowaniu możemy ich używać na naszej stronie:
<address-dropdown-jsonld jsonld=""></address-dropdown-jsonld>
<google-map-jsonld jsonld=""></google-map-jsonld>
Na koniec łączymy dane JSON-LD z elementami. Robimy to w wywołaniu zwrotnym polymer-ready (to zdarzenie, które uruchamia się, gdy komponenty są gotowe do użycia). Elementy można konfigurować za pomocą atrybutów, więc wystarczy przypisać dane JSON-LD do odpowiedniego atrybutu komponentu:
document.addEventListener('polymer-ready', function() {
var jsonld = JSON.parse(
document.querySelector(
'script[type="application/ld+json"]').innerText);
document.querySelector('google-map-jsonld').jsonld = jsonld['@graph'];
document.querySelector('address-dropdown-jsonld').jsonld = jsonld['@graph'];
});
JSON-LD, potężny brat JSON
Jak pewnie zauważysz, działa to bardzo podobnie do przesyłania danych za pomocą zwykłego kodu JSON. Format JSON-LD ma jednak kilka zalet, które wynikają bezpośrednio z kompatybilności z schema.org:
- Dane są uporządkowane w jednoznaczny sposób według standardu schema.org. Jest to niebagatelna zaleta, ponieważ zapewnia możliwość przesyłania istotnych i spójnie sformatowanych danych do dowolnego komponentu internetowego obsługującego format JSON-LD.
- Wyszukiwarki mogą efektywnie korzystać z tych danych, co usprawnia indeksowanie strony i może sprawić, że w wynikach wyszukiwania będą się wyświetlać opisy rozszerzone.
- Jeśli w ten sposób piszesz komponenty internetowe, nie musisz się uczyć ani wymyślać nowej struktury (ani dokumentacji) dla danych, których komponenty oczekują. Schema.org już wykonał za Ciebie całą ciężką pracę i doprowadził do porozumienia. Ułatwia też tworzenie całego ekosystemu zgodnych komponentów.
Podsumowując, formaty JSON-LD i schema.org w połączeniu z technologią komponentów internetowych umożliwiają tworzenie wielokrotnego użytku, zakapsułowanych elementów interfejsu użytkownika, które są przyjazne dla deweloperów i wyszukiwarek.
Tworzenie własnych komponentów
Możesz wypróbować przykłady na GitHubie lub przeczytać przewodnik Polymer dotyczący tworzenia komponentów wielokrotnego użytku, aby zacząć pisać własne. W dokumentacji dotyczącej uporządkowanych danych na stronie developers.google.com znajdziesz informacje o różnych typach jednostek, które możesz oznaczyć za pomocą kodu JSON-LD.
Możesz się z nami skontaktować na koncie @polymer, aby pochwalić się stworzonymi przez siebie elementami niestandardowymi.