Mit der zunehmenden Beliebtheit von Webkomponenten und unterstützenden Bibliotheken wie Polymer sind benutzerdefinierte Elemente eine attraktive Möglichkeit, UI-Funktionen zu erstellen. Die Standardkapselung von benutzerdefinierten Elementen macht sie besonders nützlich, um unabhängige Widgets zu erstellen.
Einige der Widgets sind zwar in sich geschlossen, aber viele von ihnen stützen sich auf externe Daten, um die Inhalte für den Nutzer darzustellen, 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, was bedeutet, dass sie nach dem Import in ein Projekt sehr einfach in HTML eingebunden und konfiguriert werden können, z.B. indem die Daten zum Ausfüllen des Widgets über ein Attribut übergeben werden.
Es wäre großartig, wenn wir Wiederholungen vermeiden und für Datenkonsistenz sorgen könnten, indem wir dieselben Daten-Snippets wiederverwenden könnten, um verschiedene Widgets zu füllen und Suchmaschinen und andere Nutzer über den Inhalt unserer Seite zu informieren. Dazu verwenden wir den schema.org und das JSON-LD-Format für unsere Daten.
Komponenten mit strukturierten Daten füllen
In der Regel ist JSON eine bequeme 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 Suchmaschinen und andere Nutzer strukturierter Daten über die genaue Bedeutung des Seiteninhalts zu informieren.
Durch die Kombination von Webkomponenten mit JSON-LD schaffen wir eine klar definierte Architektur für eine Anwendung:
- schema.org und JSON-LD stellen die Datenschicht dar, wobei schema.org das Vokabular für die Daten bereitstellt und JSON-LD das Format und den Transport der Daten darstellt.
- Benutzerdefinierte Elemente stellen die Präsentationsebene dar, die konfigurierbar und von den Daten getrennt ist.
Beispiel
Sehen wir uns ein Beispiel mit einer Seite mit einigen Google Office-Standorten an: https://github.com/googlearchive/structured-data-web-components/tree/master/demo
Es enthält zwei Widgets: eine Karte mit einer Markierung für jedes Büro und ein Drop-down-Menü mit einer Liste der Standorte. Es ist wichtig, dass beide Widgets dem Nutzer dieselben Daten bereitstellen 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.
Mit dem neuen, verbesserten Testtool für strukturierte Daten können Sie am besten überprüfen, wie Google diese Seite liest und indexiert. Reichen Sie die URL der Demo im Bereich URL abrufen ein und klicken Sie auf Abrufen und validieren. Im Bereich auf der rechten Seite sehen Sie die geparsten Daten, die von der Seite abgerufen wurden, zusammen mit allen möglicherweise auftretenden Fehlern. So können Sie ganz einfach überprüfen, ob Ihr JSON-LD-Markup korrekt ist und von Google verarbeitet werden kann.
Weitere Informationen zum Tool und den Verbesserungen finden Sie im Blogpost der Webmaster-Zentrale.
Komponenten mit einer strukturierten Datenquelle verknüpfen
Den Code für die Demo und für die Webkomponenten, mit denen er erstellt wird, finden Sie 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 sorgen wir dafür, dass die Daten auch für andere Nutzer leicht zugänglich sind, die den schema.org-Standard und das JSON-LD-Format unterstützen, z.B. Suchmaschinen.
In einem zweiten Schritt werden zur Darstellung der Daten zwei Webkomponenten verwendet:
- address-dropdown-jsonld: Mit diesem Element wird ein Drop-down-Menü mit allen Standorten erstellt, die in einem „jsonld“-Attribut übergeben werden.
- google-map-jsonld: Mit diesem Element wird eine Google-Karte mit einer Markierung für jeden Standort erstellt, der in einem jsonld-Attribut übergeben wird.
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>
Schließlich verknüpfen wir die JSON-LD-Daten und die Elemente. Dies geschieht in einem Polymer-fähigen Callback. Dieses Ereignis wird ausgelöst, 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 direkt aus seiner schema.org-Kompatibilität abgeleitet werden:
- Die Daten werden unmissverständlich nach dem Schema.org-Standard strukturiert. Dies ist ein nicht trivialer Vorteil, da er sicherstellt, dass Sie für jede JSON-LD-fähige Webkomponente eine aussagekräftige und konsistente Eingabe bereitstellen können.
- Die Daten können von Suchmaschinen effizient verarbeitet werden, was die Indexierung der Seite verbessert und dazu führen kann, dass Rich Snippets in den Suchergebnissen angezeigt werden.
- Wenn Sie Webkomponenten auf diese Weise schreiben, müssen Sie keine neue Struktur (und Dokumentation) für die Daten entwickeln, die die Komponenten erwarten – schema.org übernimmt bereits die harte Arbeit und die Konsensbildung für Sie. Außerdem ist es einfacher, ein ganzes System kompatibler Komponenten aufzubauen.
Zusammenfassend lässt sich sagen, dass JSON-LD und schema.org in Kombination mit der Webkomponenten-Technologie die Erstellung wiederverwendbarer, gekapselter UI-Elemente ermöglichen, die entwickler- und suchmaschinenfreundlich sind.
Eigene Komponenten erstellen
Sie können die Beispiele auf GitHub ausprobieren oder die Polymer-Anleitung zum Erstellen wiederverwendbarer Komponenten lesen, um eigene zu schreiben. In der Dokumentation zu strukturierten Daten auf developers.google.com finden Sie Anregungen zu verschiedenen Entitäten, die Sie mit JSON-LD auszeichnen können.
Erwähne @polymer, um von dir erstellte individuelle Elemente zu präsentieren.