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 reprezentują warstwę danych, przy czym schema.org udostępnia słownik danych, a JSON-LD stanowi format i transport danych;
- 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 on 2 widżety: mapę z pinezką dla każdego biura i listę rozwijaną 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 Pobieranie adresu URL i kliknij Pobierz i sprawdź. W sekcji po prawej stronie wyświetlą się przeanalizowane dane pobrane ze strony wraz z błędami, które mogą 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 znajduje się 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, jest to bardzo podobne 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 za pomocą standardu schema.org. Jest to niebagatelna zaleta, ponieważ zapewnia możliwość przekazywania istotnych i spójnie sformatowanych danych do dowolnego komponentu internetowego obsługującego format JSON-LD.
- Dane mogą być efektywnie wykorzystywane przez wyszukiwarki, co poprawia indeksowanie strony i może prowadzić do wyświetlania w wynikach wyszukiwania fragmentów rozszerzonych.
- Jeśli w ten sposób piszesz komponenty internetowe, nie musisz uczyć się ani opracowywać nowej struktury (i dokumentacji) danych, których wymagają komponenty. 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
Aby zacząć pisać własne komponenty, możesz skorzystać z przykładów na GitHubie lub przeczytać przewodnik Polymer dotyczący tworzenia komponentów wielokrotnego użytku. W dokumentacji dotyczącej uporządkowanych danych na stronie developers.google.com znajdziesz informacje o różnych typach informacji, które możesz oznaczać za pomocą kodu JSON-LD.
Możesz się z nami skontaktować na koncie @polymer, aby pochwalić się stworzonymi przez siebie elementami niestandardowymi.