Mit der zunehmenden Beliebtheit von Webkomponenten und unterstützenden Bibliotheken wie Polymer sind benutzerdefinierte Elemente eine attraktive Möglichkeit, UI-Funktionen zu erstellen. Die standardmäßige Kapselung benutzerdefinierter Elemente macht sie besonders nützlich für die Erstellung unabhängiger Widgets.
Einige Widgets sind zwar eigenständig, doch viele verlassen sich bei der Präsentation des Inhalts auf externe Daten, z.B. die aktuelle Vorhersage für ein Wetter-Widget oder die Adresse eines Unternehmens für ein Karten-Widget.
In Polymer sind benutzerdefinierte Elemente deklarativ. Das bedeutet, dass sie nach dem Importieren in ein Projekt ganz einfach in HTML eingefügt und konfiguriert werden können, z. B. indem die Daten zum Ausfüllen des Widgets über ein Attribut übergeben werden.
Es wäre toll, wenn wir Wiederholungen vermeiden und für Datenkonsistenz sorgen könnten, indem wir dieselben Daten-Snippets wiederverwenden, um verschiedene Widgets zu befüllen und Suchmaschinen und andere Nutzer über den Inhalt unserer Seite zu informieren. Dazu verwenden wir den schema.org-Standard und das JSON-LD-Format für unsere Daten.
Komponenten mit strukturierten Daten füllen
JSON ist in der Regel eine praktische Möglichkeit, Daten in ein bestimmtes Widget einzufügen. Durch die zunehmende Unterstützung von JSON-LD können wir dieselben Datenstrukturen wiederverwenden, um die Benutzeroberfläche sowie die Suchmaschinen und andere Nutzer von strukturierten Daten über die genaue Bedeutung des Inhalts der Seite zu informieren.
Durch die Kombination von Webkomponenten mit JSON-LD entsteht eine klar definierte Architektur für eine Anwendung:
- schema.org und JSON-LD stellen die Datenebene dar. schema.org liefert das Vokabular für die Daten und JSON-LD das Format und den Transport der Daten.
- Benutzerdefinierte Elemente stellen die Darstellungsschicht dar, die konfigurierbar und von den Daten getrennt ist.
Beispiel
Sehen wir uns das folgende Beispiel an: eine Seite mit einer Liste von Google-Niederlassungen: https://github.com/googlearchive/structured-data-web-components/tree/master/demo
Es enthält zwei Widgets: eine Karte mit einer Stecknadel für jedes Büro und ein Drop-down-Menü mit der Liste der Standorte. Es ist wichtig, dass beide Widgets dem Nutzer dieselben Daten präsentieren und dass die Seite für Suchmaschinen lesbar ist.
In dieser Demo verwenden wir LocalBusiness-Entitäten, um die Bedeutung unserer Daten auszudrücken, also den geografischen Standort einiger Google-Niederlassungen.
Die beste Möglichkeit, um zu überprüfen, wie Google diese Seite liest und indexiert, ist das neue, verbesserte Testtool für strukturierte Daten. Gib die URL der Demo im Abschnitt URL abrufen ein und klicke auf Abrufen und prüfen. Im rechten Bereich werden die geparsten Daten angezeigt, die von der Seite abgerufen wurden, sowie alle auftretenden Fehler. So können Sie ganz einfach prüfen, ob Ihr JSON-LD-Markup korrekt ist und von Google verarbeitet werden kann.
Weitere Informationen zu diesem Tool und den damit verbundenen Verbesserungen finden Sie im Blogpost zur Webmaster-Zentrale.
Komponenten mit einer strukturierten Datenquelle verknüpfen
Der Code für die Demo und die Webkomponenten, die für die Erstellung verwendet werden, befindet sich auf GitHub. Sehen wir uns den Quellcode der Seite combined-demo.html an.
Zuerst betten wir die Daten mithilfe eines JSON-LD-Skripts in die Seite ein:
<script type="application/ld+json">
{...}
</script>
Auf diese Weise stellen wir sicher, dass die Daten für andere Nutzer leicht zugänglich sind, die den schema.org-Standard und das JSON-LD-Format unterstützen, z.B. Suchmaschinen.
Im zweiten Schritt verwenden wir zwei Webkomponenten, um die Daten anzuzeigen:
- address-dropdown-jsonld: Mit diesem Element wird ein Drop-down-Menü mit allen Standorten erstellt, die in einem „jsonld“-Attribut übergeben wurden.
- google-map-jsonld: Mit diesem Element wird für jeden Standort, der in einem „jsonld“-Attribut übergeben wird, eine Google-Karte mit einem Markierungssymbol erstellt.
Dazu importieren wir sie mithilfe von HTML-Importen auf unsere Seite.
<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">
Nach dem Import können wir sie auf unserer Seite verwenden:
<address-dropdown-jsonld jsonld=""></address-dropdown-jsonld>
<google-map-jsonld jsonld=""></google-map-jsonld>
Zum Schluss verknüpfen wir die JSON-LD-Daten mit den Elementen. Dies geschieht in einem polymer-fähigen Callback. Es ist ein Ereignis, das ausgelöst wird, wenn die Komponenten einsatzbereit sind. Da die Elemente über Attribute konfiguriert werden können, reicht es aus, unsere JSON-LD-Daten dem entsprechenden Attribut der Komponente zuzuweisen:
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, der leistungsstarke Bruder von JSON
Wie Sie wahrscheinlich bemerkt haben, funktioniert dies ähnlich wie die Verwendung von einfachem, altem JSON zur Weitergabe von Daten. JSON-LD hat jedoch einige Vorteile, die sich direkt aus der schema.org ergeben:
- Die Daten werden mithilfe des schema.org-Standards eindeutig strukturiert. Das ist ein nicht unerheblicher Vorteil, da Sie so für jede JSON-LD-kompatible Webanwendung aussagekräftige und konsistente Eingaben machen können.
- Die Daten können von Suchmaschinen effizient genutzt werden, was die Indexierung der Seite verbessert und dazu führen kann, dass in den Suchergebnissen Rich Snippets angezeigt werden.
- Wenn Sie Webkomponenten auf diese Weise schreiben, müssen Sie keine neue Struktur (und Dokumentation) für die von den Komponenten erwarteten Daten lernen oder entwickeln. schema.org übernimmt bereits die gesamte Arbeit und den Konsens für Sie. Außerdem wird es einfacher, ein ganzes System kompatibler Komponenten aufzubauen.
Zusammenfassend lässt sich sagen, dass JSON-LD und schema.org in Kombination mit der Web Components-Technologie wiederverwendbare, gekapselte UI-Elemente ermöglichen, die für Entwickler und Suchmaschinen geeignet sind.
Eigene Komponenten erstellen
Sie können die Beispiele auf GitHub ausprobieren oder die Anleitung von Polymer zum Erstellen wiederverwendbarer Komponenten lesen, um eigene Komponenten zu schreiben. In der Dokumentation zu strukturierten Daten auf developers.google.com finden Sie verschiedene Entitäten, die Sie mit JSON-LD markieren können.
Wenn Sie uns Ihre benutzerdefinierten Elemente zeigen möchten, können Sie uns unter @polymer kontaktieren.