ToolCMB

Open-Graph-Generator

Tragen Sie Titel, Beschreibung, Adresse und Bild ein, sehen Sie, wie die Link-Vorschau in den wichtigsten Apps aussieht, und kopieren Sie die Open-Graph-Tags für den Head Ihrer Seite.

  • Link-Vorschau
  • 7 Inhaltstypen
  • Bildgrößen-Prüfung
  • Läuft in Ihrem Browser

Seite

Verwenden Sie „Website“ für Startseiten und alles, was zu keinem anderen Typ passt.

Die kanonische Adresse der Seite. Likes und Shares werden für diese Adresse gezählt.

Bild

Vollständige Adresse des Bildes. Empfohlen: 1200 × 630 px (1,91:1), JPG oder PNG, unter 5 MB.

Eine Vorschau auf einer Website kann keine Bilder von anderen Websites laden – wählen Sie die Datei deshalb von Ihrem Gerät. Sie wird nur hier angezeigt und vermessen und verlässt Ihr Gerät nie.

Ein Satz, der sagt, was das Bild zeigt – für Menschen, die es nicht sehen können.

Weitere Bilder

Für die meisten Seiten genügt ein Bild. Fügen Sie weitere hinzu, damit man beim Teilen auf Facebook wählen kann.

Fehlt noch das Bild? Erstellen Sie eines mit dem OG-Bild-GeneratorFalsche Größe? Schneiden Sie das Bild mit dem Tool „Social-Media-Bildgrößen“ zu

Artikel

Ein Link zur Seite des Autors. Facebook akzeptiert auch eine Profiladresse.

Durch Kommas getrennt. Jedes wird zu einem eigenen Tag.

Produkt

Dreistelliger Code wie USD, EUR oder GBP.

Profil

Buch

Ein Link zur Seite des Autors. Facebook akzeptiert auch eine Profiladresse.

Video

Tragen Sie die Adresse der Videodatei unten unter „Video und Audio“ ein.

Song

Video und Audio
Facebook-App, X-Card und Basis-Tags

Nur für Facebook Insights zu Ihrer Domain nötig.

Card-Typ
Player- und App-Cards: X-Card-Generator
Canonical, robots, hreflang und mehr: Meta-Tag-Generator

Vorschau

Diese Vorschauen folgen dem Layout und den Textlimits der jeweiligen App; die echte Card kann etwas abweichen und ändert sich von Zeit zu Zeit. Nach der Veröffentlichung behält jedes Netzwerk die alte Vorschau, bis sein Cache aktualisiert wird.

Checkliste

    HTML-Code

    Tag-Schreibweise

    Aus vorhandenem HTML importieren

    Der eingefügte Code wird nur als Text in Ihrem Browser gelesen. Skripte darin werden nie ausgeführt, nichts wird daraus geladen und nichts wird irgendwohin gesendet. Der Import ersetzt den aktuellen Inhalt des Formulars.

    So funktioniert es

    So erstellen Sie Open-Graph-Tags

    Code und Vorschauen aktualisieren sich beim Tippen.

    1. 1

      Inhaltstyp wählen

      Wählen Sie Website, Artikel, Produkt, Profil, Buch, Video oder Song und geben Sie dann Titel, Beschreibung, Seiten-URL und den Namen der Website ein.

    2. 2

      Bild hinzufügen

      Geben Sie die Adresse des Vorschaubilds ein. Um es anzuzeigen und zu vermessen, wählen Sie dieselbe Datei von Ihrem Gerät – sie wird nur von Ihrem Browser gelesen.

    3. 3

      Prüfen und kopieren

      Sehen Sie sich die Vorschauen an, gehen Sie die Checkliste durch und fügen Sie den Code in den <code>&lt;head&gt;</code> Ihrer Seite ein.

    Warum ToolCMB

    Alles, was eine Link-Vorschau braucht

    Tags nach dem Open-Graph-Protokoll.

    Vorschau in vier Layouts

    Facebook, LinkedIn, WhatsApp / iMessage und Slack / Discord, jeweils mit eigenen Textgrenzen. Die echten Karten können leicht abweichen und ändern sich mit der Zeit.

    Bildprüfung

    Wählen Sie das Bild von Ihrem Gerät und sehen Sie Pixelmaße, Seitenverhältnis, Format und Dateigröße – mit Warnungen, wenn es zu klein oder zu groß ist oder beschnitten wird.

    Details für jeden Typ

    Veröffentlichungsdatum, Autor, Rubrik und Tags für Artikel; Preis, Währung, Verfügbarkeit und Marke für Produkte; dazu Felder für Profile, Bücher, Videos und Songs.

    Mehrere Bilder, Video und Audio

    Fügen Sie weitere Bilder mit Breite, Höhe und Alt-Text hinzu sowie og:video oder og:audio mit ihrem MIME-Typ.

    X-Card und Basis-Tags

    Ergänzt auf Wunsch den X-Card-Typ und Ihr Konto, eine Facebook-App-ID sowie Title-Tag und Meta-Description mit denselben Texten.

    Vorhandenes HTML importieren

    Fügen Sie den Quelltext einer Seite ein, um deren aktuelle Open-Graph-Tags ins Formular zu laden und zu korrigieren. Skripte im eingefügten Code werden nicht ausgeführt.

    Privat

    Alles läuft in Ihrem Browser. Was Sie eingeben, einfügen oder öffnen, wird nicht an einen Server gesendet.

    Kostenlos, ohne Anmeldung

    Kein Konto, keine Limits, kein Wasserzeichen – auf Smartphone, Tablet und Computer.

    Was Open-Graph-Tags sind und wie Apps sie nutzen

    Wenn jemand einen Link postet, ruft die App die Seite ab und sucht in deren Head nach Open-Graph-Tags, um daraus die Vorschaukarte zu bauen: einen Titel, einen kurzen Text, ein Bild und den Namen der Website. Das Protokoll wurde 2010 von Facebook eingeführt und wird heute von LinkedIn, WhatsApp, Slack, Discord, iMessage, X und vielen anderen gelesen. Ohne diese Tags rät die App – sie nimmt vielleicht das falsche Bild, einen Cookie-Hinweis als Beschreibung oder zeigt nur die nackte Adresse.

    Vier Eigenschaften schreibt das Protokoll vor: og:title, og:type, og:image und og:url. In der Praxis gehören auch og:description und og:site_name dazu. Open-Graph-Tags verwenden das Attribut property, nicht name. Das Bild fällt als Erstes auf: 1200 × 630 Pixel, ein Verhältnis von 1,91:1, funktionieren in jeder großen Karte. Mit og:image:width und og:image:height kann eine App die Karte aufbauen, bevor das Bild geladen ist.

    Typische Fehler: eine Bildadresse, die relativ ist oder http verwendet – viele Apps laden sie dann nicht; eine og:url, die von der Canonical-URL abweicht, sodass geteilte Links für zwei Adressen gezählt werden; ein Bild, das zu klein oder so groß ist, dass eine App es überspringt; und ein einziges allgemeines Bild samt Beschreibung für alle Seiten einer Website. Bedenken Sie, dass Apps Vorschauen zwischenspeichern. Nach einer Änderung der Tags kann eine alte Karte sichtbar bleiben, bis der Cache der jeweiligen App aktualisiert wird.

    Die zentralen Open-Graph-Eigenschaften

    EigenschaftWas sie enthältEmpfehlung
    <code>og:title</code>Überschrift der KarteOhne den Namen der Website; etwa 60–90 Zeichen
    <code>og:description</code>Ein oder zwei Zeilen unter dem TitelEtwa 55–200 Zeichen; manche Apps zeigen sie nicht an
    <code>og:image</code>Bild der Karte1200 × 630 px, JPG oder PNG, vollständige https://-Adresse
    <code>og:url</code>Kanonische Adresse der SeiteDieselbe Adresse wie im Canonical-Tag
    <code>og:type</code>Art des Inhalts<code>website</code>, sofern kein anderer Typ eindeutig passt
    <code>og:site_name</code>Name der WebsiteErscheint in mehreren Messenger-Apps über dem Titel

    Tipps

    • Noch kein Vorschaubild? Erstellen Sie eines in der richtigen Größe mit dem OG-Bild-Generator.
    • Schneiden Sie ein vorhandenes Bild mit dem Tool Social-Media-Bildgrößen auf 1200 × 630 px zu und verkleinern Sie die Datei mit dem Bild-Komprimierer.
    • Für Player- und App-Cards auf X nutzen Sie den Twitter-Card-Generator; für Canonical, Robots und hreflang den Meta-Tag-Generator.
    • Teilen Sie den Link nach der Veröffentlichung in einem privaten Chat oder einem Entwurf, um die echte Karte zu prüfen, und aktualisieren Sie den Vorschau-Cache des Netzwerks, falls noch die alte Version erscheint.
    FAQ

    Häufig gestellte Fragen

    Keine Antwort gefunden? Schreiben Sie uns – wir antworten schnell.

    Wie groß sollte ein Open-Graph-Bild sein?

    1200 × 630 Pixel, ein Seitenverhältnis von 1,91:1, sind die sichere Wahl für große Karten. Verwenden Sie JPG oder PNG und halten Sie die Datei klein: Dieses Tool warnt ab 300 KB, weil WhatsApp bei größeren Dateien oft kein Bild zeigt, und oberhalb der Grenzen von 5 MB und 8 MB bei LinkedIn und Facebook.

    Welche Open-Graph-Tags sind Pflicht?

    Das Protokoll verlangt og:title, og:type, og:image und og:url. Ergänzen Sie außerdem og:description und og:site_name – die meisten Apps zeigen sie an.

    Warum aktualisiert sich meine Link-Vorschau nicht?

    Apps speichern die Vorschau, wenn ein Link zum ersten Mal geteilt wird. Nach einer Änderung der Tags bleibt die alte Karte, bis dieser Cache abläuft oder aktualisiert wird. Facebook und LinkedIn bieten jeweils ein Entwickler-Tool, das die Seite neu abruft.

    Helfen Open-Graph-Tags bei der Suchmaschinenoptimierung?

    Für Suchmaschinen sind sie kein Rankingfaktor. Sie bestimmen, wie ein Link beim Teilen aussieht – und eine klare Karte mit einem guten Bild wird häufiger angeklickt als eine nackte Adresse.

    Was ist der Unterschied zwischen Open-Graph-Tags und Meta-Tags?

    Title-Tag und Meta-Description sind für Suchmaschinen geschrieben. Open-Graph-Tags sind für Apps gedacht, die Link-Vorschauen anzeigen. Beide können dieselben Texte tragen, eine Seite braucht aber beide Sätze.

    Werden meine Daten an einen Server gesendet?

    Nein. Das Tool läuft vollständig in Ihrem Browser. Ihre Eingaben werden nicht hochgeladen, protokolliert oder auf unseren Servern gespeichert.

    Weitere kostenlose SEO- und Website-Tools

    Tags und Dateien erzeugen, Statuscodes, Weiterleitungen, DNS und Zertifikate prüfen – kostenlos und ohne Konto.

    Alle Tools ansehen