Mit der wachsenden 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 eigenständig, viele benötigen jedoch externe Daten, um die Inhalte für den Nutzer zu präsentieren, 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 strukturierter 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 ein Beispiel an: eine Seite mit mehreren Google-Geschäftsstandorten: 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 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.
Am besten können Sie mit dem neuen und verbesserten Testtool für strukturierte Daten prüfen, wie Google diese Seite liest und indexiert. Gib die URL der Demo im Abschnitt URL abrufen ein und klicke auf Abrufen und validieren. 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 zum Tool und zu 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 zum Erstellen verwendet wurden, finden Sie auf GitHub. Sehen wir uns den Quellcode der Seite combined-demo.html an.
Als ersten Schritt betten wir die Daten mit einem JSON-LD-Script in die Seite ein:
<script type="application/ld+json">
{...}
</script>
So sorgen wir dafür, dass die Daten für andere Nutzer, die den schema.org-Standard und das JSON-LD-Format unterstützen, leicht zugänglich sind, z.B. für 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. Das geschieht in einem Polymer-kompatiblen Callback, einem 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 das sehr ähnlich wie die Verwendung von einfachem JSON zum Übergeben 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 entwerfen. 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 den Leitfaden von Polymer zum Erstellen wiederverwendbarer Komponenten lesen, um eigene zu erstellen. 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.