Blog

Open-Graph-Tags für bessere Linkvorschauen erstellen

Wenn jemand Ihre URL auf Facebook, LinkedIn, Slack oder iMessage teilt, ruft die Plattform Ihre Open-Graph-Tags ab, um eine visuelle Karte zu erstellen. Ohne diese Tags zeigt die Vorschau ein leeres Feld oder einen zufälligen Absatz Ihrer Seite. Der Open-Graph-Generator erzeugt aus einem einfachen Formular den vollständigen Satz an OG-Meta-Tags, damit jeder geteilte Link bewusst gestaltet und markengerecht aussieht.

Was dieses Tool macht

Geben Sie Seitentitel, Beschreibung, URL, Bild-URL und Website-Namen ein. Der Generator gibt korrekt formatierte Meta-Tags für og:title, og:description, og:url, og:image, og:type und og:site_name als kopierfertigen HTML-Block aus.

Mit abweichenden Feldern können Sie Texte speziell für soziale Netzwerke verfassen, die sich von Ihrem SEO-Titel und Ihrer Beschreibung unterscheiden. Ein aufmerksamkeitsstarker Social-Media-Aufhänger kann konfliktfrei neben einem keywordreichen Suchtitel bestehen.

Das Tool zeigt eine Vorschau der ungefähren Kartendarstellung auf wichtigen Plattformen. So können Sie Bildabmessungen und Textlänge anpassen, bevor Sie den Link öffentlich teilen.

  • Vollständiger Satz an OG-Tags: Titel, Beschreibung, Bild, URL, Typ und Website-Name.
  • Abweichende Felder für Social-Media-Texte, die sich von SEO-Metadaten unterscheiden.
  • Plattformvorschau mit ungefährer Darstellung der Karte.
  • Kopierfertiges HTML zum Einfügen in head oder ein CMS-Plugin.

Warum das für SEO wichtig ist

Geteilte Inhalte in sozialen Netzwerken erzeugen Referral-Traffic und Backlinks, die SEO indirekt stärken. Eine überzeugende OG-Vorschaukarte erzielt mehr Klicks und erneutes Teilen. Dadurch steigen die Reichweite des Inhalts und die Wahrscheinlichkeit redaktioneller Links von Bloggern, die ihn in sozialen Netzwerken entdecken.

Google indexiert OG-Tags und kann og:image für Discover und visuelle mobile Ergebnisse verwenden. Fehlende oder fehlerhafte OG-Daten schwächen die Präsenz Ihrer Seite im gesamten Discovery-Ökosystem, nicht nur in sozialen Netzwerken.

NLU: Bedeutung und Entitäten

OG-Tags stellen parallel zu Standard-Meta-Tags eine weitere Entitätsdeklaration bereit. Wenn og:title dieselbe Entität wie der HTML-Titel nennt, erkennen NLU-Systeme einen verstärkten thematischen Konsens. Weichen beide ohne Grund voneinander ab, können Klassifikatoren ihre Sicherheit herabsetzen.

Die Eigenschaft og:type (article, product, website) dient Plattformen beim Parsen Ihrer Seite als ausdrücklicher Hinweis auf die Absicht. Sie teilt ihnen mit, ob sie eine Nachrichtenkarte, eine Produktkarte oder einen allgemeinen Link darstellen sollen.

NLP: Struktur und Lesbarkeit

Texte auf Social-Media-Karten werden in festen Breiten dargestellt und streng gekürzt. OG-Beschreibungen mit mehr als etwa 65 Zeichen werden auf Facebook abgeschnitten; LinkedIn ist etwas großzügiger. Der Generator kennzeichnet Längen, bei denen eine Kürzung droht, damit Sie prägnante, wirkungsvolle Texte verfassen.

Ein natürlicher Satzbau in og:description lässt sich von Vorschau-Renderern und Screenreadern besser verarbeiten als durch Semikolons getrennte Keyword-Listen.

GEO: generative Suchsysteme und KI-Antworten

Wenn KI-Tools Diskussionen in sozialen Netzwerken zu einem Thema zusammenfassen, können sie die OG-Beschreibung als repräsentative Zusammenfassung Ihrer Seite verwenden. Eine zitierfähige, eigenständig verständliche og:description erhöht die Chance, dass Ihre Seite in KI-generierten Social-Media-Zusammenfassungen zitiert wird.

Einheitliche OG-Daten auf Ihrer gesamten Website helfen generativen Modellen außerdem, den inhaltlichen Umfang Ihrer Marke zu verstehen, wenn sie Metadaten aus dem Social Graph crawlen.

So verwenden Sie das Tool

  1. Öffnen Sie den Open-Graph-Generator.
  2. Geben Sie den Seitentitel ein (optimieren Sie ihn für Social-Media-Interaktionen, nicht nur für SEO-Keywords).
  3. Verfassen Sie eine Beschreibung, die das Social-Media-Publikum anspricht – nennen Sie den Nutzen in einem Satz.
  4. Fügen Sie die kanonische Seiten-URL ein.
  5. Geben Sie die URL für og:image ein (empfohlen sind 1200×630 Pixel für eine optimale Darstellung).
  6. Legen Sie og:type fest (article für Blogbeiträge, website für Startseiten).
  7. Kopieren Sie das erzeugte HTML und fügen Sie es in den head Ihrer Seite ein.
  8. Testen Sie die URL mit dem Sharing Debugger von Facebook oder dem Post Inspector von LinkedIn.

Bewährte Vorgehensweisen

  • Verwenden Sie Bilder mit 1200×630 Pixeln – dieses Seitenverhältnis funktioniert auf Facebook, LinkedIn und in Messaging-Apps.
  • Formulieren Sie OG-Beschreibungen als Aufhänger, nicht als Keyword-Listen – Social-Media-Nutzer reagieren auf Neugier und Nutzen.
  • Testen Sie neue OG-Tags vor der öffentlichen Veröffentlichung mit dem Sharing Debugger von Facebook, um den Cache zu leeren.
  • Halten Sie og:title unter 60 Zeichen, um eine Kürzung in mobilen Social-Media-Feeds zu vermeiden.
  • Verwenden Sie für og:image absolute URLs – relative Pfade funktionieren auf den meisten Plattformen nicht.

Häufige Fehler

  • Ein zu kleines Bild oder ein falsches Seitenverhältnis verwenden, sodass das Bild in der Social-Media-Karte ungünstig beschnitten wird.
  • Die SEO-Meta-Beschreibung wortwörtlich übernehmen, obwohl ein prägnanterer Social-Media-Aufhänger mehr Klicks erzielen würde.
  • Vergessen, og:type festzulegen, wodurch selbst Artikelseiten standardmäßig als „website“ eingestuft werden.
  • Den Facebook-Cache nach einer Aktualisierung der OG-Tags nicht leeren – veraltete Vorschauen bleiben dadurch stundenlang bestehen.
  • og:url weiterhin auf eine Entwicklungs- oder Staging-Domain verweisen lassen.

Lassen Sie jeden geteilten Link bewusst gestaltet wirken: Öffnen Sie den Open-Graph-Generator, richten Sie Ihre Social-Media-Vorschau ein und geben Sie Ihren Links die visuelle Präsenz, die sie verdienen.

Konfigurieren Sie nach den OG-Tags mit dem Twitter-Card-Generator X/Twitter-spezifische Vorschauen, um alle wichtigen sozialen Netzwerke abzudecken.