Seite 3: Fazit: Drei Prominente Möglichkeiten zum Einbinden

Entwickler und Entwicklerinnen stehen für das Einbinden von Metadaten drei prominente Möglichkeiten zur Verfügung:

• meta-Elemente,
• das oEmbed-Format sowie
• strukturierte Daten.

Neben den Standardmetadaten der HTML-Spezifikation gibt es Ergänzungen durch das Open Graph Protocol und die Twitter Cards. Die Erweiterungen stellen detaillierte Informationen über die Website bereit. Im Gegensatz zu den meta-Elementen arbeitet das oEmbed-Format mit einer fixen Schnittstelle, die eine Webseiten-URL als Parameter entgegennimmt und dafür eine maschinenlesbare Vorschau im Format JSON oder XML zurückgibt. Die Schnittstelle ist entweder im Quellcode in einem Link-Element, im Link-Header oder in einer Provider-Liste enthalten.

Strukturierte Daten sind besonders gut für die Suchmaschinenoptimierung geeignet, lassen sich jedoch auch für das Erstellen einer Linkvorschau verwenden. Dabei betten Entwickler sie meistens in script-Elemente in einer Website ein und orientieren sich an vordefinierten Schemata wie dem Schema für einen Musiksong, für einen Zeitungsartikel oder für ein Unternehmen.

Für das Erstellen einer Linkvorschau von externen Seiten und für das Anreichern des eigenen HTML-Dokuments sollten Entwicklungsteams nach Möglichkeit alle drei genannten Varianten auslesen oder implementieren. Der dargestellte Quellcode dient lediglich der Veranschaulichung. Für den produktiven Einsatz sollten Entwickler dedizierte Bibliotheken wie den openGraphScraper oder oembed.js verwenden. Bei strukturierten Daten sollten sie zudem nicht nur JSON-LD auslesen, da einige Seiten noch Mikrodaten einsetzen. An dieser Stelle ist die Verwendung eines Mikrodaten-Parsers am sinnvollsten.

Zuletzt noch ein Experiment: Mit folgendem Code lässt sich eine Liveansicht der Metadaten dieses Artikels betrachten:

....
<pre>
    <code id="live-structured-data">
   </code>
</pre>

<script>
const output = document.getElementById('live-structured-data');
const jsonLd = JSON.parse(document.querySelector('script[type="application/ld+json"]').textContent);
output.textContent = JSON.stringify(jsonLd, null, 2);
</script>
....

Das Ergebnis könnte dann wie folgt aussehen:

Young Professionals schreiben für Young Professionals

Lars Kölker

hat Wirtschaftsinformatik an der Hochschule Weserbergland (HSW) studiert. Er arbeitet als Full Stack Developer bei der AMCON Software GmbH, ist im Bereich der Softwareentwicklung selbstständig und freiberuflicher Lehrbeauftragter an der HSW. Sein Techstack umfasst vor allem Webtechnologien wie TypeScript, React, HTML, CSS, aber auch objektorientierte Programmiersprachen wie C#.

(sih)