Tokenlabor

Open-Graph-Generator

Der Open-Graph-Generator erzeugt OG-Tags und Twitter Card für Ihre Seite, prüft Längen und Bildadresse und zeigt eine vereinfachte Social-Media-Vorschau.

    Social-Media-Vorschau (vereinfacht)

    Das Bild wird absichtlich nicht geladen, damit keine Anfrage an fremde Server geht. Jede Plattform stellt Karten etwas anders dar.

    Meta-Tags

    Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

    OG-Tags und Twitter Card richtig setzen

    Der Open-Graph-Generator erstellt die Meta-Tags, die Facebook, LinkedIn, WhatsApp, Slack, Mastodon und viele andere Dienste auslesen, wenn jemand einen Link teilt. Die OG-Tags legen Titel, Beschreibung, Bild und Adresse fest, statt dass die Plattform rät. Für X (früher Twitter) kommt die Twitter Card hinzu; fehlen eigene twitter:-Felder, nutzt X die Open-Graph-Werte.

    Meta-Tags erstellen Sie hier in drei Schritten: Felder ausfüllen, Hinweise prüfen, Ergebnis kopieren und in den <head> der Seite einfügen. Wichtig ist og:image: Die Adresse muss absolut sein (mit https://), das Bild öffentlich erreichbar und nicht zu groß. Bewährt hat sich 1200 mal 630 Pixel im Seitenverhältnis 1,91 zu 1. Ohne Bild zeigen viele Netzwerke nur eine schmale Textzeile.

    Die Social-Media-Vorschau oben ist eine vereinfachte Karte, keine exakte Kopie einer Plattform. Wie lang Titel und Beschreibung angezeigt werden, hängt vom Netzwerk und vom Gerät ab. Nach dem Einbau prüfen Sie die Seite am besten mit den Debug-Werkzeugen der Plattformen, die zwischengespeicherte Vorschauen auch neu laden.

    Anleitung: Open-Graph-Generator in 5 Schritten

    1. Titel (og:title), Name der Website und Beschreibung (og:description) eintragen.
    2. Adresse der Seite (og:url), Bildadresse (og:image), Bildbeschreibung sowie Bildbreite und Bildhöhe angeben.
    3. Typ (og:type), Sprache (og:locale) und die Art der Twitter Card wählen, optional das X-Konto ergänzen.
    4. Hinweise und die vereinfachte Social-Media-Vorschau prüfen.
    5. Die Meta-Tags kopieren und in den head-Bereich der Seite einfügen.

    Typische Anwendungsfälle

    • Blogartikel teilen: Dafür sorgen, dass LinkedIn und Facebook Titel, Beschreibung und Bild richtig anzeigen.
    • WhatsApp- und Slack-Vorschau: Eine fehlende oder falsche Linkvorschau einer Produkt- oder Landingpage beheben.
    • Neue Website: Für jede Seitenvorlage einen vollständigen Satz OG-Tags und Twitter-Card-Tags erstellen.
    Fragen

    Häufige Fragen

    Was sind OG-Tags?

    Meta-Tags nach dem Open-Graph-Protokoll, ursprünglich von Facebook. Sie stehen im head-Bereich einer Seite und sagen Netzwerken und Messengern, welcher Titel, welche Beschreibung und welches Bild in der Linkvorschau erscheinen sollen.

    Welche Größe sollte og:image haben?

    Verbreitet ist 1200 mal 630 Pixel (Seitenverhältnis 1,91 zu 1) als JPG oder PNG. Die Adresse muss absolut sein und öffentlich abrufbar. Wichtige Inhalte gehören in die Bildmitte, weil manche Dienste das Bild quadratisch zuschneiden.

    Brauche ich neben Open Graph noch eine Twitter Card?

    Nur das Feld twitter:card ist nötig, damit X ein großes Bild zeigt. Titel, Beschreibung und Bild übernimmt X aus den OG-Tags, wenn keine eigenen twitter:-Felder vorhanden sind.

    Warum zeigt ein Netzwerk noch die alte Vorschau?

    Plattformen speichern Vorschauen zwischen. Laden Sie die Seite im Debug-Werkzeug der Plattform neu oder hängen Sie zum Test einen Parameter an die Adresse.

    Wie lang dürfen Titel und Beschreibung sein?

    Feste Grenzen gibt es nicht. Als Faustregel bleiben Titel bis etwa 60 Zeichen und Beschreibungen bis etwa 160 Zeichen auf den meisten Plattformen lesbar; längere Texte werden gekürzt.

    Warum wird bei WhatsApp kein Vorschaubild angezeigt?

    Meist fehlt og:image, die Bildadresse ist relativ statt absolut mit https://, oder das Bild ist nicht öffentlich erreichbar. Auch sehr große Bilddateien werden teils nicht geladen, und bereits geteilte Links zeigen eine zwischengespeicherte Vorschau.

    Welchen og:type soll ich verwenden?

    Für Startseite und allgemeine Seiten website, für Blogbeiträge und Nachrichten article. Die übrigen Typen wie profile, book oder video.other passen nur, wenn die Seite genau so etwas zeigt.

    Weitere Werkzeuge

    Das könnte auch helfen

    Alle 358 Werkzeuge

    Farbumwandler

    HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.

    Öffnen

    Farbpalette aus Bild

    Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.

    Öffnen

    Kontrast prüfen (WCAG)

    Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.

    Öffnen

    CSS-Gradient-Generator

    Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.

    Öffnen

    Box-Shadow-Generator

    CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.

    Öffnen

    Flexbox-Generator

    Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.

    Öffnen