SEO, 20 June 2019 | 5479 12 | Lesezeit 6 Minuten – Später lesen

Wie man Open Graph Markup einrichtet

Open Graph Markup wird für eine attraktive Anzeige der Ankündigung von Informationen von deiner Site in sozialen Netzwerken und anderen Diensten benötigt.

Verwende das Markup für Seiten mit Schaltflächen für soziale Netzwerke, damit dieses kleine Snippet ein schönes Aussehen annimmt.

Gliederung

Was ist Open Graph?

Vorteile Open Graphs
Zusätzliche Möglichkeiten

Wie implementiert man Markups schnell auf gängigen CMS
Fazit

Was ist Open Graph?

Dies ist ein Seiten-Microcode in Form von HTML-Code, der im head-Element platziert wird. Zur korrekten Anzeige genügt es, Standard-Meta-Tags zu verwenden:

og:title: Titel des Artikels, Videos oder anderen Objekts auf der Seite deiner Website.
og:description: Objektbeschreibung, die maximal 300 Zeichen lang sein muss.
og:image: Link zu dem Bild, das den Artikel, das Video usw. beschreibt.
og:type: Art des Objekts (Nachrichten, Video, Artikel, Musik usw.).
og:url: permanenter Link, der das Objekt identifiziert.

Im HTML-Editor sieht es so aus:

Nach dem Aktualisieren und Speichern der Informationen versuchen wir, den Artikel auf Facebook zu teilen. Und genau das passiert:

So sieht der Repost bei Facebook mit Open Graph Meta Tags aus

Der von einer Person im sozialen Netzwerk geteilte Beitrag entspricht vollständig den im Meta-Tag-Editor angegebenen Daten.

Was passiert, wenn du das Open Graph-Markup nicht verwendest? Nachdem du auf die Schaltfläche "Teilen" geklickt hast, ruft das soziale Netzwerk das Bild, den Titel und die Beschreibung nach eigenem Ermessen auf. Am Ende könnte es sich als etwas unattraktives herausstellen:

Teilen bei Facebook ohne Open Graph Tags

Im Newsfeed oder an der Wand werden solche Informationen hässlich aussehen und sicherlich nicht den Wunsch hervorrufen, auf deine Website zu gehen. Um alle Promotion-Tools kompetent nutzen zu können, ist es daher besser, das Open Graph-Markup zu implementieren.

Um zu sehen, wie deine Ankündigung aussehen wird, ruf einfach Facebook für Entwickler auf. Im "Debugger" sollte die Adresse des Beitrags, der Nachricht oder eines anderen Objekts eingetragen sein. Wenn du dich das Ergebnis der Arbeit ansiehst, wirst du wissen, welche Änderungen oder Ergänzungen für diese Vorschau wünschenswert sind. Das Überprüfungstool sieht folgendermaßen aus:

Anfangs wurde das Markup nur für Facebook verwendet bzw. das Verifikationstool ist hier. Jetzt wird Open Graph jedoch aktiv für andere soziale Netzwerke verwendet. Das heißt, wenn du ein Markup für eine Seite deiner Site einrichtest, wird die Ankündigung von Informationen von dieser Seite in allen bekannten sozialen Netzwerken korrekt angezeigt.

Vorteile Open Graphs

Die Möglichkeit, einen schönen Titel hinzuzufügen, der zusätzliche Besucher auf die Website lockt und sie an das Format und die Einschränkungen des sozialen Netzwerks anpasst.

In der Ankündigung neben dem Link sieht der Leser am meisten für seine Anfrage relevante Informationen.

Der Repost sieht komplett und attraktiv aus.

Der Inhalt der Seite wird in Kurzform übermittelt.

Zusätzliche Möglichkeiten

Zusätzlich zu den obligatorischen Meta-Tags, die im Standard-Snippet enthalten sind, bieten die Open Graph-Markup-Entwickler zusätzliche Funktionen. Sie werden beispielsweise zum Hinzufügen von Artikeln, Geolokalisierung, Altersbeschränkungen usw. zur Ankündigung einer Audiodatei verwendet.

Für jede Kategorie werden separate Gruppen von Metadaten angeboten. Grundsätzlich sind dies die gleichen Wörter, jedoch mit zusätzlichen Doppelpunkten. Wenn zum Herunterladen eines Bildlinks beispielsweise das https-Protokoll erforderlich ist:

og:image: secure_url

Für das Bild kannst du detaillierte Parameter bis zur Anzahl der Pixel in Höhe und Breite festlegen. Du kannst mehrere Versionen desselben Metatags veröffentlichen. Auf diese Weise können Konflikte, die beim Lesen des Codes auftreten können, schnell behoben werden. Bevorzugt wird die erste Version.

Alle Arten von Optionen für Metadaten werden auf der offiziellen Website von Open Graph vorgestellt. Du kannst auch Einstellungen für jedes soziale Netzwerk finden.

Verwende OpenGraphCheck, um die Open Graph-Verbindung auf einer bestimmten Seite deiner Site zu überprüfen. Überprüfe die Ankündigungen auch trotz der Verfügbarkeit vorgefertigter Tools immer manuell.

Wie implementiert man Markups schnell auf gängigen CMS

Um Open Graph schnell für eine bestimmte Engine einzurichten, kannst du vorgefertigte Lösungen verwenden - Module und Plugins. Für WordPress kannst du beispielsweise Open Graph oder ein SEO-Plugin mit integriertem Yoast SEO-Markup verbinden. Um das Open Graph ohne Plugins zu verbinden, musst du dem HTML-Code die entsprechenden Meta-Tags hinzufügen.

Für Joomla gibt es auch fertige Plugins wie die Open Graph Protocol Solution. Um auf Plug-Ins zu verzichten, füge dem <head> -Block über JDocument Zeilen mit Meta-Tags hinzu. Die Art und der Wert von Meta-Tags hängen vom Inhalt des Artikels oder der Daten ab, die du mit dem Markup verbinden möchtest.

Eine fertige Lösung für Opencart ist das Open Graph Meta Plugin. Manuell werden Markup-Metatags zum <head> deiner Site hinzugefügt, basierend auf der Version des verwendeten CMS.

Fazit

Open Graph-Markup ermöglicht die attraktive Anzeige von Text, Audio, Video und anderen Objekten, wenn diese in sozialen Netzwerken verbreitet werden. Du selbst legst die Parameter des Snippets fest, die dem Benutzer angezeigt werden und die anschließend im Newsfeed angezeigt werden.

Füge zum Konfigurieren die entsprechenden Meta-Tags zum Seitencode hinzu. Mit Hilfe spezialisierter Dienste und Plugins kannst du den Status und das Erscheinungsbild aller solcher Ankündigungen überprüfen.

Dieser Artikel gehört zum Modul «Checklist» von Serpstat

" title = "Wie man Open Graph Markup einrichtet 16261788291362" />

Die Option „Checklist" ist eine To-do-Liste, die dir hilft, den Aufgabenstatus des bestimmten Projekts zu verfolgen. Das Tool umfasst fertige Vorlagen mit einer umfangreichen Liste der Parameter, die zur Entwicklung erforderlich sind. Du kannst diese fertigen Vorlagen einsetzen oder eigene Posten hinzufügen.

Checklist testen