Open Graph-Meta-Tags fungieren als Brücke zwischen Ihrer Website und den sozialen Medien und ermöglichen es Ihnen, die Darstellung Ihrer URLs beim Teilen auf diesen Plattformen anzupassen. Durch die Verwendung von Open Graph-Meta-Tags können Sie Ihrem Publikum eine auffällige Vorschau auf das geben, was es finden wird, wenn es sich durchklickt!
Im Jahr 2010 führte Facebook Open Graph-Meta-Tags ein, um das Teilen von Websites auf der Plattform zu erleichtern. Twitter und LinkedIn haben seitdem Open Graph-Meta-Tags übernommen, um die Erfahrung ihrer Nutzenden zu verbessern.
Wenn Sie eine URL in ein Facebook-Eingabefeld einfügen, werden Sie wahrscheinlich eine Linkvorschau sehen. Vor den Open-Graph-Meta-Tags hatten Sie keine Kontrolle darüber, wie Ihre Linkvorschau angezeigt wurde, und manchmal zeigte Facebook den falschen Inhalt an.
Open Graphs-Meta-Tags helfen Nutzerinnen und Nutzern, ihre Linkvorschau in sozialen Medien zu optimieren, sodass alle immer die wesentlichen Informationen sehen.
Social-Media-Kanäle sind eine ständige Quelle für Webverkehr und Konversionen. Mit der richtigen Mischung aus Strategie und Design können Sie Nutzende davon überzeugen, sich zu Ihrer Website durchzuklicken, um mehr über Ihre Marke zu erfahren, einen Kauf abzuschliessen und vieles mehr.
Open-Graph-Meta-Tags werten die Linkvorschau auf Ihrer Website so auf, dass sie die Aufmerksamkeit Ihres Publikums auf sich ziehen.
Facebook führt in seiner offiziellen Dokumentation 17 Open Graph-Tags auf, aber nur vier sind erforderlich, damit Facebook Ihre Webseite versteht. Sie verwenden die Tags, indem Sie sie zwischen den <head>-Tags im Backend der Webseite einfügen.
Die vier erforderlichen Tags sind:
og:title – Dies ist der Titel oder die Überschrift der Seite.
Beispiel:
Sie können auch andere OG-Tags verwenden, wie z.B.:
Falls Sie mit den Twitter Cards noch nicht vertraut sind, können Sie damit Mediendateien anhängen und zusätzliche Informationen zu Ihren Tweets hinzufügen. Dies kann nützlich sein, um die Sichtbarkeit Ihrer Tweets zu erhöhen und Nutzenden, die sich durchklicken, zusätzlichen Kontext zu bieten.
Obwohl sie nicht dasselbe sind, verwenden die Karten von Twitter dasselbe Open-Graph-Protokoll und sehen den OGP-Tags ähnlich. Die Implementierung dieser Tags macht es viel einfacher, Twitter-Karten ohne Duplikations-Probleme zu erstellen.
Wie die Open Graph-Tags von Facebook können Sie sich mit Twitter Cards von der Masse der Tweets abheben. Kurz gesagt, sie ermöglichen es Ihnen, zusätzliche Inhalte aus Ihrem 140-Zeichen-Tweet zu generieren.
Diese werden nicht automatisch in den Feeds der Nutzenden angezeigt, aber es wird eine kleine Schaltfläche «Zusammenfassung anzeigen» unter dem Tweet eingefügt.
Sie können Open-Graph-Tags verwenden, um den Titel, die Beschreibung und das Bild Ihres Inhalts festzulegen und um den Inhaltstyp Ihrer Seite und die Zielgruppe zu bestimmen, die Sie erreichen möchten.
Facebook Debugger ist ein kostenloses Online-Tool, mit dem Sie kontrollieren können, was andere Personen sehen, wenn Ihre Blogbeiträge auf Facebook geteilt werden.
Das Debugger-Tool ist für Marken mit Facebook-Seiten unverzichtbar, da Blogbeiträge oder Webseitenvorschauen manchmal nicht richtig angezeigt werden, wenn Sie sie teilen.
Es kann zum Beispiel sein, dass ein älteres Bild angezeigt wird oder dass Facebook ein zufälliges Bild aus Ihrem Artikel anstelle des Hauptbildes nimmt.
Facebook Debugger kann jede beliebige Webseite in Sekundenschnelle überprüfen und einen Bericht erstellen, der Sie genau darüber informiert, warum Ihre Vorschauen auf diese Weise veröffentlicht werden. Anhand der Informationen in diesem Bericht können Sie dann Änderungen an Ihrem HTML-Code oder Ihren Tags vornehmen, um das Problem zu beheben.
Lesen Sie weiter, und wir werden Sie Schritt für Schritt durch das Debugger-Tool führen, damit Sie verstehen, wie Sie Ihre Facebook-Vorschauen anzeigen, anpassen und aktualisieren können.
Obwohl Sie im Allgemeinen mit den grundlegenden Tags auskommen, gibt es noch ein paar weitere, die es wert sind, hinzugefügt zu werden:
Während das Hinzufügen eines Bildes als og:image oft ausreichen sollte, kann es manchmal schwierig sein, das Bild korrekt anzuzeigen. Wenn Sie Probleme haben, enthält der Open-Graph-Standard einige Bild-Tags wie og:image:url vs og:image:secure_url sowie og:image:width und og:image:height.
Achten Sie darauf, dass Sie alle Hinweise und Beispiele in der Open-Graph-Dokumentation befolgen. Darüber hinaus haben einige der sozialen Netzwerke Bildanforderungen. Twitter zum Beispiel verlangt ein Verhältnis von 2:1, mit einer Mindestgrösse von 300×157 und einer Maximalgrösse von 4096×4096, die unter 5 MB liegt und im JPG, PNG, WEBP oder GIF Format vorliegt.
Wenn Sie nicht weiterkommen, testen Sie Ihre Tags mit den Tools des sozialen Netzwerks, um zu sehen, ob Sie das Problem finden können.
Glücklicherweise bieten unsere bevorzugten sozialen Netzwerke auch Tools an, die uns bei der Fehlersuche in Bezug auf unsere Tags helfen. Sobald Sie sich vergewissert haben, dass Ihre Tags tatsächlich im Quellcode Ihrer Website angezeigt werden, können Sie in einer Vorschau sehen, wie Ihre Website im Feed aussehen wird.
Um Ihrer WordPress-Website Open-Graph-Tags hinzuzufügen, empfehlen wir die Verwendung eines Plugins, das diese Tags für Sie zu jeder Seite hinzufügt, wie Yoast SEO oder All in One SEO.
Diese und andere SEO-Plugins ermöglichen es Ihnen, die wesentlichen Open-Graph-Tags für jede Seite festzulegen, normalerweise in den «Social»- oder «Sharing»-Optionen des Plugins.
Sobald Sie Ihre Open Graph-Tags gesetzt haben, können Sie den Debugger von Facebook verwenden, um eine Vorschau zu sehen, wie Ihr Inhalt aussehen wird, wenn er geteilt wird, und um eventuelle Probleme zu beheben. Geben Sie einfach die URL Ihrer Seite hier ein und wählen Sie «Neue Scrape-Informationen abrufen».
© 2012-2023, MIK Group GmbH | AGB | Impressum | Datenschutzerklärung
