Open-Graph-Generator
Vier Tags entscheiden über Ihre Karte
Dieser Open-Graph-Generator schreibt den og:-Block, der steuert, wie Ihr Link in einem Chat, einem Feed oder einer Nachricht aussieht. Dabei markiert er die vier Pflichteigenschaften und zeigt die Karte schon beim Tippen.
- KostenlosPreis
- 4Pflicht-Tags
- KeineAnmeldung
- KeineUploads
Open-Graph-Generator
Die og:-Tags, die bestimmen, wie ein geteilter Link aussieht
Bereit. Die vier Pflicht-Tags werden markiert, während Sie sie ausfüllen.
Was Open Graph wirklich steuert
Fügen Sie einen Link in einen Chat ein, und es passiert etwas. Ein Bild erscheint, eine Überschrift, eine Textzeile und der Name der Website.
Diese Karte stammt aus Tags in Ihrem head-Element. Ohne sie rät die App, und dabei kommt meist Ihr Logo und Ihre Navigation heraus.
Facebook veröffentlichte das Protokoll 2010, danach verbreitete es sich. Heute lesen LinkedIn, WhatsApp, Slack, Discord, Signal und Telegram alle dieselben vier Eigenschaften.
Das Protokoll selbst nennt sie: og:title, og:type, og:image und og:url. Alles andere auf dieser Seite ist optionaler Feinschliff.
Das Bild ist die ganze Karte
Eine Karte mit Bild nimmt ein Vielfaches des Platzes einer Karte ohne Bild ein. Deshalb ist das Bild das eine Tag, das man zuerst richtig machen sollte.
Nutzen Sie also 1200 mal 630 Pixel, die Form 1,91 zu 1, auf die jedes Netzwerk zuschneidet. Halten Sie die Datei danach unter etwa fünf Megabyte, und verwenden Sie immer eine absolute https-Adresse.
Text im Bild wird bei kleinen Karten abgeschnitten. Setzen Sie die Wörter stattdessen in og:title, wo sie in jeder Größe lesbar bleiben.
Property, nicht name
Open-Graph-Tags nutzen das Attribut property, während Twitter-Tags name nutzen. Kopieren Sie also ein Tag aus dem falschen Beispiel, ignoriert das Netzwerk es still.
Der Unterschied stammt aus RDFa, auf dem Open Graph aufbaut. Es wirkt wie ein Detail, jedoch erklärt es die Hälfte aller kaputten Karten, wie die Referenz zum meta-Element darlegt.
Dieser Open-Graph-Tag-Generator schreibt jedes Tag mit dem richtigen Attribut, sodass dieser Unterschied nie Ihr Problem wird.
Typen jenseits von website
Die meisten Seiten sind website. Ein Artikel ergänzt Autor und Veröffentlichungszeit, ein Produkt kann einen Preis tragen, und ein Profil nennt eine Person. Wählen Sie den passenden Typ und ignorieren Sie dann den Rest.
Warum sich Ihre Karte nicht aktualisiert
Netzwerke speichern, was sie auslesen, oft tagelang. Sie reparieren ein Tag, teilen den Link erneut, und die alte Karte kommt zurück.
Jedes Netzwerk hat einen Debugger, der eine Aktualisierung erzwingt, und das ist das einzige verlässliche Mittel. Facebook, LinkedIn und X bieten jeweils einen an.
Setzen Sie die Tags daher vor einem Launch statt danach. Eine am Kampagnentag zwischengespeicherte Karte ist ein langsames Problem.
Beschreibungen auf einer Karte verhalten sich anders
Eine Suchbeschreibung konkurriert mit neun anderen Ergebnissen. Eine Kartenbeschreibung konkurriert dagegen mit dem ganzen Feed drumherum, und sie bekommt weniger Platz.
Halten Sie sie bei einem Satz, denn die meisten Netzwerke zeigen auf dem Smartphone etwa zwei Zeilen. Ein langer zweiter Satz überlebt selten.
Sagen Sie, was der Link bietet, nicht was die Seite enthält. Hinter einer Karte steht keine Suchanfrage, also deutet nichts an, warum es jemanden interessieren sollte.
Lassen Sie dann den Titel das Gewicht tragen. Auf einer kleinen Karte verschwindet die Beschreibung manchmal ganz.
Beschreibungen auf einer Karte verhalten sich anders
Eine Suchbeschreibung konkurriert mit neun anderen Ergebnissen. Eine Kartenbeschreibung konkurriert dagegen mit dem ganzen Feed drumherum, und sie bekommt weniger Platz.
Ein Satz genügt. Die meisten Netzwerke zeigen auf dem Smartphone etwa zwei Zeilen, deshalb überlebt ein langer zweiter Satz selten.
Sagen Sie, was der Link bietet, nicht was die Seite enthält. Hinter einer Karte steht keine Suchanfrage, also deutet nichts an, warum es jemanden interessieren sollte.
Lassen Sie dann den Titel das Gewicht tragen. Auf einer kleinen Karte verschwindet die Beschreibung manchmal ganz.
Ein Block für jedes Netzwerk
Twitter greift auf og:-Tags zurück, wenn die eigenen fehlen, und fast alles andere ebenso. Schreiben Sie Open Graph einmal, ergänzen Sie eine twitter:card-Zeile, und fertig.
So nutzen Sie den Open-Graph-Generator
Vier Schritte, und das Hinweisfeld verfolgt die vier Pflichtangaben, während Sie sie ausfüllen.
- 1
Den Typ wählen
Website passt zu den meisten Seiten. Wählen Sie article für einen Blogbeitrag, dann erscheinen zwei zusätzliche Felder für Autor und Datum.
- 2
Einen Titel für die Karte schreiben
Bis zu 70 Zeichen werden vollständig angezeigt. Er darf vom Seitentitel abweichen und sollte das oft auch, weil hinter einer Karte keine Suchanfrage steht.
- 3
Bild und Adresse ergänzen
Beide brauchen vollständige https-Adressen. Die Vorschau zeigt den Zuschnitt 1,91 zu 1, sodass Sie sehen, was eine schmale Karte behält.
- 4
Block einfügen und neu auslesen lassen
Setzen Sie ihn in Ihren Head und schicken Sie den Link dann durch den Debugger jedes Netzwerks. Sonst kann eine zwischengespeicherte Karte tagelang stehen bleiben.
Was dieses Open-Graph-Tool auszeichnet
Die meisten Generatoren geben jede Eigenschaft der Spezifikation aus. Dieser schreibt dagegen, was eine Karte braucht, und nennt, was fehlt.
Er verfolgt die vier Pflichtangaben
Titel, Typ, Bild und url behalten jeweils einen Hinweis, bis Sie sie ausfüllen. Nichts anderes gibt vor, Pflicht zu sein.
Eine Live-Kartenvorschau
Sie sehen die Zuschnittform und die Kürzungslängen beim Tippen, denn dort gehen die meisten Karten schief.
Durchgehend richtige Attribute
og:-Tags nutzen property, während twitter:-Tags name nutzen. Das zu vertauschen ist die häufigste kaputte Karte überhaupt.
Kein doppelter Twitter-Block
Twitter liest og:-Tags bereits, deshalb ergänzt der Haken nur twitter:card und den Bild-Alt-Text. Doppeltes hilft niemandem.
Artikelfelder, wenn Sie sie brauchen
Autor und Veröffentlichungszeit erscheinen bei Artikeln und bleiben sonst verborgen. Schließlich lädt ein Formular voller irrelevanter Felder zu falschen Antworten ein.
Nichts verlässt Ihren Tab
Hier laufen unveröffentlichte Kampagnentexte durch. Weil die Seite nichts abruft, erreicht keine Adresse und keine Überschrift einen Server.
Regeln für Karten, die richtig aussehen
Karten scheitern auf eine Handvoll vorhersehbarer Arten. Jede Regel unten schließt eine davon aus.
- Eine absolute https-Bildadresse nutzen. Die meisten Netzwerke ignorieren relative Pfade und einfaches http. Der Scraper ist nicht Ihr Browser, und er hat keinen Seitenkontext zum Auflösen.
- Das Bild 1200 mal 630 groß machen. Das ist die og-Bildgröße, auf die jedes Netzwerk zuschneidet. Kleinere Bilder enden in einer kleinen quadratischen Karte oder in gar keiner.
- Wichtigen Text aus dem Bild heraushalten. Zuschnitte kappen die Ränder, und kleine Karten verkleinern alles. Wörter gehören in og:title, wo sie lesbar bleiben.
- Einen Kartentitel schreiben, keinen Seitentitel. Ein Suchtitel beantwortet eine Anfrage. Ein Kartentitel muss dagegen ohne Kontext funktionieren, in einem Feed, neben Dingen, die um denselben Blick konkurrieren.
- og:url auf die kanonische Adresse richten. Shares sammeln sich unter dieser Adresse. Weicht sie also von Ihrem Canonical-Tag ab, teilen sich die Zahlen auf zwei Versionen einer Seite auf.
- og:image:alt ergänzen. Ein Screenreader trägt es statt des Bildes vor, und es braucht nur eine Zeile. Obwohl kaum eine Website sich die Mühe macht, ist das ein schlechter Grund, es wegzulassen.
- Nach jeder Änderung neu auslesen lassen. Netzwerke speichern aggressiv zwischen. Bis Sie eine Aktualisierung erzwingen, sieht jeder die alte Karte.
- Auch die Website benennen. og:site_name setzt Ihre Publikation neben die Überschrift. In einem vollen Feed leistet diese Zeile so viel wie der Titel.
- Auf dem Smartphone testen. Die meisten öffnen Links in einer Chat-App auf einem kleinen Bildschirm. Die Desktop-Vorschau ist dagegen die nachsichtige.
Sechs Open-Graph-Fehler, die Karten kaputt machen
Jeder davon erzeugt eine Seite, die einwandfrei funktioniert, und einen Link, der kaputt aussieht.
name statt property verwenden
Open-Graph-Tags brauchen das Attribut property. Mit name ist das Tag gültiges HTML und wird völlig ignoriert.
Ein relativer Bildpfad
Weil der Scraper keine Basis hat, gegen die er ihn auflösen kann, kommt die Karte ganz ohne Bild an.
Per JavaScript eingefügte Tags
Die meisten Scraper lesen das HTML, wie es ausgeliefert wird, und führen nichts aus. Also bleiben nach dem Laden eingefügte Tags für sie unsichtbar.
Ein Bild hinter einem Login
Weil ein Staging-Passwort oder eine Hotlink-Regel den Scraper blockiert, fällt die Karte auf reinen Text zurück.
Zwei og:image-Tags
Ein Theme setzt eines, und danach setzt ein Plugin ein weiteres. Netzwerke wählen eines, jedoch selten das, das Sie wollten.
Eine sofortige Aktualisierung erwarten
Caches halten tagelang. Schicken Sie den Link also durch den Debugger jedes Netzwerks, statt ihn erneut zu teilen und zu hoffen.
Ihre Fragen zu Open Graph
Welche Open-Graph-Tags braucht eine Karte?
Vier sind Pflicht: og:title, og:type, og:image und og:url. Das Protokoll nennt sie die grundlegenden Metadaten, und außerdem ist eine Karte ohne Bild eine viel kleinere Karte.
Welche og-Bildgröße sollte ich nutzen?
Nutzen Sie 1200 mal 630 Pixel, was dem Verhältnis 1,91 zu 1 entspricht, auf das Netzwerke zuschneiden. Halten Sie es zudem unter fünf Megabyte und liefern Sie es über https aus.
Brauche ich auch Twitter-Tags?
Nur twitter:card, und den Alt-Text des Bildes, wenn Sie einen wollen. Twitter liest nämlich og:title, og:description, og:image und og:url, wenn seine eigenen Tags fehlen.
Weshalb zeigt die Vorschau noch die alte Karte?
Das Netzwerk hat die alte zwischengespeichert. Nutzen Sie deshalb seinen Debugger, um ein neues Auslesen zu erzwingen, denn erneutes Teilen liefert meist die gespeicherte Kopie.
Beeinflusst Open Graph die SEO?
Nicht direkt. Es beeinflusst, wie oft ein geteilter Link angeklickt wird, und außerdem hat Google gesagt, dass es og:title als ein Signal beim Umschreiben eines Titel-Links nutzen kann.
Kann ich die Ausgabe eines Open-Graph-Tag-Generators auf jeder Plattform nutzen?
Ja. Derselbe Block funktioniert auf Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram und Signal, weil alle dasselbe Protokoll lesen.
Wohin gehören diese Tags?
In das head-Element, neben Ihre anderen Meta-Tags. Die Reihenfolge spielt keine Rolle, jedoch lassen sie sich später leichter prüfen, wenn sie zusammenstehen.
Was passiert, wenn ich gar keine og-Tags setze?
Das Netzwerk rät anhand Ihrer Seite. Meist bedeutet das Ihr Logo, eine Menüüberschrift und den ersten Satz, den es findet, und das verkauft den Link selten.
Können verschiedene Seiten ein Bild teilen?
Das können sie, und ein websiteweites Ersatzbild ist besser als nichts. Eine Seite mit eigenem Bild holt jedoch mehr Klicks, also nutzen Sie das Ersatzbild nur, wo es kein passendes Bild gibt.
Können verschiedene Seiten ein Bild teilen?
Das können sie, und ein websiteweites Ersatzbild ist besser als nichts. Eine Seite mit eigenem Bild holt jedoch mehr Klicks, also nutzen Sie das Ersatzbild nur, wo es kein passendes Bild gibt.
Wird etwas hochgeladen, das ich hier eingebe?
Nein. Ihr Browser schreibt die Tags, und die Seite ruft keine Adresse ab. Deshalb speichert diese Website nichts und protokolliert nichts.
Tools für geteilte Links
Eine Karte besteht aus Tags und einem Bild. Diese drei decken beide Hälften ab.
Twitter-Card-Generator
Die twitter:-Tags, und nur die ohne og:-Entsprechung.
Tool öffnen →Bildkonverter
Wandeln Sie ein Kartenbild im Browser in WebP, JPG oder PNG um.
Tool öffnen →Meta-Tag-Generator
Die Head-Tags, die neben Ihrem og:-Block stehen.
Tool öffnen →
Bereit, Ihre Karte zu reparieren?
Füllen Sie vier Eigenschaften aus, beobachten Sie die Vorschau und fügen Sie den Block in Ihren Head ein. Der Open-Graph-Generator ist kostenlos, braucht kein Konto und läuft komplett in Ihrem Browser.