Wraz z rosnącą popularnością komponentów internetowych i bibliotek pomocniczych, takich jak Polymer, elementy niestandardowe stają się atrakcyjnym sposobem tworzenia funkcji interfejsu. Domyślne stosowanie elementów niestandardowych jest szczególnie przydatne przy tworzeniu niezależnych widżetów.
Chociaż niektóre z nich są niezależne, wiele z nich polega na przedstawieniu treści użytkownikowi na podstawie danych zewnętrznych, np. aktualnej prognozy dla widżetu pogody lub adresu firmy w przypadku widżetu mapy.
W Polymer elementy niestandardowe są deklaratywne, co oznacza, że po zaimportowaniu do projektu bardzo łatwo można je umieścić i skonfigurować w kodzie HTML, np. przekazując dane w celu wypełnienia widżetu za pomocą atrybutu.
Byłoby wspaniale, gdybyśmy mogli uniknąć powtarzania danych i zapewnić spójność danych przez ponowne wykorzystywanie tych samych fragmentów danych w różnych widżetach oraz informowanie wyszukiwarek i innych klientów o zawartości naszej strony. Można to osiągnąć, stosując standard schema.org i format JSON-LD.
Uzupełnianie komponentów uporządkowanymi danymi
JSON to zwykle wygodny sposób wstawiania danych do konkretnego widżetu. Dzięki rosnącej obsłudze formatu JSON-LD możemy wykorzystywać te same struktury danych, aby przekazywać informacje o treści strony zarówno w interfejsie użytkownika, jak i innym użytkownikom tych danych.
Łącząc komponenty sieciowe z formatem JSON-LD, tworzymy dobrze zdefiniowaną architekturę aplikacji:
- Tagi schema.org i JSON-LD reprezentują warstwę danych, gdzie schema.org zawiera terminologię dotyczącą danych, a JSON-LD określa format i transport danych.
- elementy niestandardowe reprezentują warstwę prezentacji, którą można konfigurować i które są oddzielone od danych.
Przykład
Oto przykład: strona z kilkoma lokalizacjami biur Google: https://github.com/googlearchive/structured-data-web-components/tree/master/demo
Zawiera 2 widżety: mapę z przypiętą pinezką każdego biura oraz menu z listą lokalizacji. Ważne jest, aby oba widżety przedstawiały użytkownikowi te same dane, a strona była czytelna dla wyszukiwarek.
W tej wersji demonstracyjnej używamy elementów LocalBusiness, aby określić znaczenie naszych danych, czyli lokalizację geograficzną niektórych biur Google.
Najlepszym sposobem sprawdzenia, w jaki sposób Google odczytuje i indeksuje tę stronę, jest nowe, ulepszone Narzędzie do testowania uporządkowanych danych. Prześlij adres URL wersji demonstracyjnej w sekcji URL pobierania, a potem kliknij Pobierz i zweryfikuj. Sekcja po prawej stronie zawiera dane przeanalizowane ze strony, a także ewentualne błędy. To bardzo wygodny sposób na sprawdzenie, czy znaczniki JSON-LD są poprawne i przetwarzane przez Google.
Więcej informacji o tym narzędziu i jego ulepszeniach znajdziesz w poście na blogu Centrum dla webmasterów.
Łączenie komponentów ze źródłem uporządkowanych danych
Kod wersji demonstracyjnej oraz komponentów internetowych użytych do jej utworzenia znajduje się na GitHub. Spójrzmy na kod źródłowy strony combined-demo.html.
Najpierw umieszczamy dane na stronie za pomocą skryptu JSON-LD:
<script type="application/ld+json">
{...}
</script>
W ten sposób zapewniamy łatwy dostęp do danych dla innych klientów, którzy obsługują standard schema.org i format JSON-LD, np. wyszukiwarki.
W drugim etapie do wyświetlania danych używamy 2 komponentów sieciowych:
- address-dropdown-jsonld – ten element tworzy menu ze wszystkimi lokalizacjami przekazanymi w atrybucie „jsonld”.
- google-map-jsonld – ten element tworzy mapę Google z pinezką dla każdej lokalizacji przekazanej w atrybucie „jsonld”.
W tym celu importujemy je na naszą stronę za pomocą importu 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żesz 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 i elementy razem. Odbywa się to w wywołaniu zwrotnym gotowym do użycia polimerów (zdarzenie, które uruchamia się, gdy komponenty są gotowe do użycia). Ponieważ elementy można konfigurować za pomocą atrybutów, 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 – zaawansowany brat JSON
Jak już pewnie wiesz, funkcja ta działa bardzo podobnie do zwykłego, starego formatu JSON do przekazywania danych. Format JSON-LD ma jednak kilka zalet, które wywodzą się bezpośrednio ze zgodności z schema.org:
- Dane są uporządkowane w jednoznaczny sposób – zgodnie ze standardem schema.org. Nie jest to trywialna zaleta, ponieważ zapewnia możliwość podawania znaczących i spójnych danych wejściowych do każdego komponentu internetowego obsługującego JSON-LD.
- Wyszukiwarki mogą efektywnie wykorzystać te dane, co usprawnia indeksowanie strony i może skutkować wyświetlaniem w wynikach wyszukiwania fragmentów rozszerzonych.
- Jeśli piszesz komponenty sieciowe w ten sposób, nie musisz uczyć się ani opracowywać nowej struktury (i dokumentacji) danych, których oczekujesz – schema.org już za Ciebie wykonuje całą pracę i pracuje nad konsensusem. Ułatwia to też budowanie ekosystemu zgodnych komponentów.
Podsumowując, standard JSON-LD i schema.org w połączeniu z technologią komponentów sieciowych umożliwia tworzenie zamkniętych elementów interfejsu wielokrotnego użytku, które są przyjazne dla programistów i wyszukiwarek.
Tworzenie własnych komponentów
Aby zacząć tworzyć własne komponenty, możesz przejrzeć przykłady na GitHubie lub przeczytać przewodnik po tworzeniu komponentów wielokrotnego użytku. Zapoznaj się z dokumentacją dotyczącą danych strukturalnych na developers.google.com, by zainspirować się różnymi elementami, które można oznaczyć za pomocą JSON-LD.
Możesz napisać do nas na adres @polymer, aby pochwalić się utworzonymi przez siebie elementami niestandardowymi.