Open Graph Tags erklärt, mit Live-Tag-Builder | We.Inc
Die vier Pflicht-Tags von Open Graph, Bildeigenschaften, og:type-Werte und article-Tags, kommentiert, plus ein Builder, der das Markup für den head schreibt.
Open Graph Tags erklärt
Open Graph Tags sind Meta-Elemente im head einer Seite, die steuern, wie ein Link beim Teilen aussieht. Das Protokoll verlangt vier: og:title, og:type, og:image und og:url. Jedes nutzt das property-Attribut, zum Beispiel meta property="og:title" content="...". Ergänze og:description, og:site_name sowie Breite, Höhe und Alt-Text des Bildes für bessere Vorschauen.
Die vier Pflichteigenschaften
Eigenschaft
Was hineingehört
og:title
Der Titel, wie er in der Vorschaukarte erscheinen soll
og:type
Die Art des Objekts, etwa website oder article
og:image
Eine vollständige URL zum Vorschaubild
og:url
Die kanonische URL, die die Seite identifiziert
Vorschauen beim Teilen entstehen aus einer Handvoll Tags, bei denen sich leicht kleine Fehler einschleichen: ein relativer Bildpfad, fehlende Breite und Höhe oder ein Titel, der nur im title-Element steht. Fülle den Builder aus, um korrektes Markup zu erhalten, und lies dann, was jede Eigenschaft bewirkt.
Trage im Builder Titel, Beschreibung, Seiten-URL und Bild-URL ein.
Wähle den Typ: website für die meisten Seiten, article für Blogartikel.
Prüfe die grobe Vorschaukarte und kopiere dann die erzeugten Tags in den head deiner Seite.
Teste die Live-Seite mit dem Sharing-Debugger der jeweiligen Plattform, da jedes Netzwerk Vorschauen zwischenspeichert.
Verwende für og:image und og:url absolute https-URLs. Relative Pfade sind ein häufiger Grund, warum Vorschauen kein Bild zeigen.
Gib og:image:width und og:image:height an, damit eine App die Form des Bildes aus den Tags erfährt, ohne die Datei auszumessen.
Schreib og:image:alt für Menschen, die auf sozialen Plattformen Screenreader nutzen.
Wenn du das Bild änderst, verwende einen neuen Dateinamen. Plattformen speichern Bilder zwischen, daher kann die alte URL das veraltete Bild behalten.
Häufige Fragen
Wie groß sollte ein Open-Graph-Bild sein?
Das Protokoll legt keine Größe fest. 1200 mal 630 Pixel ist ein weit verbreitetes Querformat und die Größe, die die Next.js-Dokumentation in ihren Beispielen nutzt. Halte wichtigen Text von den Rändern fern, da manche Apps das Bild beschneiden.
Helfen Open Graph Tags bei der SEO?
Ihre Aufgabe ist die Vorschaukarte, nicht das Ranking. Ein klarer Titel und ein gutes Bild können mehr Klicks bringen, wenn Menschen deinen Link in Chats und Feeds weitergeben. Halte og:title konsistent mit deinem title-Element, damit jede Oberfläche die Seite gleich beschreibt.
Warum verwenden Open Graph Tags property statt name?
Das Protokoll basiert auf RDFa, das das property-Attribut nutzt. Die Beispiele auf ogp.me schreiben meta property="og:title". Twitter-Card-Tags verwenden dagegen das name-Attribut, wie in meta name="twitter:card".
Brauche ich noch Twitter-Card-Tags?
Füge mindestens twitter:card hinzu, gesetzt auf summary_large_image, wenn du das Layout mit großem Bild willst. Viele Apps lesen die og-Werte für Titel, Beschreibung und Bild, wenn passende twitter-Tags fehlen, aber Plattformregeln ändern sich, also teste deine Live-URL, bevor du dich auf diesen Fallback verlässt.
Kann eine Seite mehr als ein og:image haben?
Ja. Das Protokoll erlaubt Arrays: Wiederhole das og:image-Tag und setze Breite, Höhe und Alt-Text jedes Bildes direkt hinter das Bild, das sie beschreiben. Wenn sich Werte widersprechen, gibt das Protokoll dem ersten Tag von oben den Vorrang.
Strukturierte Eigenschaften gehören zum Tag darüber
Eigenschaften wie og:image:width beschreiben das zuletzt davor deklarierte og:image. Die Reihenfolge zählt: Deklariere zuerst das Bild, dann Breite, Höhe, Typ und Alt-Text, dann das nächste Bild.
og:image:secure_url ist eine zusätzliche https-Adresse für dasselbe Bild. Wenn dein og:image bereits https nutzt, brauchst du sie nicht.
Typen und ihre zusätzlichen Tags
website ist der Standard für Seiten, die keine bestimmte Art von Objekt sind. article schaltet article:published_time, article:modified_time, article:author, article:section und article:tag frei.
Das Protokoll definiert außerdem book, profile sowie die Gruppen music und video. Nutze sie nur, wenn die Seite wirklich dieses Objekt ist; eine Produktseite ist meist website.
Jede Eigenschaft, kommentiert
Optionale und strukturierte Open-Graph-Eigenschaften
Zuerst die Pflicht-Tags, dann Beschreibung, Website-Name und der Bildblock mit seinen strukturierten Eigenschaften.
Blogartikel mit article-Tags
Das prefix-Attribut deklariert die Namespaces. Datumsangaben nutzen ISO 8601.
Dachreparatur in Leeds | Northside Roofing
Reparatur von Undichtigkeiten am selben Tag und kostenlose schriftliche Angebote in ganz Leeds.
Dachdecker verlegt Schieferplatten auf einem Reihenhaus
Die Bild-URL sollte absolut sein und mit https:// beginnen
Die Seiten-URL sollte absolut sein und mit https:// beginnen
og:title ist Pflicht
Open Graph Tag Builder
Fülle die Felder aus, um die Tags und eine grobe Vorschaukarte zu erzeugen. Echte Apps zeichnen ihre Karten jeweils selbst, betrachte die Vorschau also als Orientierung.