This site uses cookies and other tracking technologies to make possible your usage of the website, assist with navigation and your ability to provide feedback, analyse your use of our products and services, assist with our promotional and marketing efforts, and provide better user experience.

By using the website, you agree to our Datenschutzerklärung

Accept and continue

Report a bug

Cancel
284 9
SEO Lesezeit 6 Minuten 20 June 2019

Wie man Open Graph Markup einrichtet

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.

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:
Open Graph tags in HTML Editor
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:
Facebook Sharing Debugger
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

1
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.
2
In der Ankündigung neben dem Link sieht der Leser am meisten für seine Anfrage relevante Informationen.
3
Der Repost sieht komplett und attraktiv aus.
4
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
«Checklist» von Serpstat

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

Erfahre, wie du Serpstat mit bestmöglicher Effizienz verwendest

Möchtest du persönliche Produktdemonstration, die Testversion oder erfolgreiche Use-Cases bekommen?

Sende eine Anfrage und unser Support-Team kontaktiert dich ;)

Rate the article on a five-point scale

The article has already been rated by 0 people on average out of 5
Hast du einen Fehler gefunden? Markiere diesen und betätige Ctrl + Enter, um es uns mitzuteilen
Abonniere den Newsletter von Serpstat
Bleibe auf dem Laufenden mit aktuellsten Nachrichten, Beiträgen und Updates

Teile den Artikel in sozialen Netzwerken :)

Einloggen Registrieren

Вы исчерпали лимит запросов.

Or email
Забыли пароль?
Or email
Back To Login

Don’t worry! Just fill in your email and we’ll send over your password.

Are you sure?

Awesome!

To complete your registration you need to enter your phone number

Back

We sent confirmation code to your phone number

Your phone Resend code queriesLeft

smthWentWrong

contactSupport
telegramVerification telegramBotLink
Choose the project to view data on it

Persönliche Produktdemonstration

Serpstat hilft dir, noch mehr Zeit zu sparen! Bitte fülle das Formular vollständig aus — du wirst schnellstmöglich von einem unserer Produktspezialisten kontaktiert.

Persönliche Demonstration umfasst den Testzeitraum des Services, umfangreiche Anleitungen und Webinare, individuelle Beratung von Serpstat-Experten. Wir machen alles, damit du mit Serpstat zurechtkommst.

Name

Email

Telefonnummer

Wir freuen uns auf deine Kommentare

Upgrade your plan

Export is not available for your account. Please upgrade to Plan A or higher to get access to the tool. Learn more.

Sign Up Free

Спасибо, мы с вами свяжемся в ближайшее время

Invite
Просмотр Редактирование

E-mail
Message
Optional
E-mail
Message
Optional

У вас закончились лимиты

Вы достигли лимита на количество созданных проектов и больше не можете создавать новые проекты. Увеличьте лимиты или удалите существующие проекты.

Я хочу больше лимитов