Softonic

Open Graph Preview

Schritt 1 / 2
Weiter

Geben Sie Titel, Beschreibung, Seitenname, Seiten-URL und Bild-URL ein, und dieses Tool rendert eine Live-Share-Karte für Facebook und X (Twitter), die sich bei jedem Tastendruck aktualisiert. Es ist ein Gestaltungs-Sandkasten für Ihre Open-Graph-Tags: Nichts wird abgerufen oder veröffentlicht, sodass Sie Titellänge und Bildausschnitt so lange proben können, bis die Karte stimmt, und den Wortlaut anschließend in Ihre echten og:-Tags übernehmen.

Wie die Vorschau zusammengesetzt wird

  1. 1

    Die Kartenfelder eingeben

    Titel, Seitenname, Beschreibung, Seiten-URL und Bild-URL. Jedes Feld entspricht einem og:-Tag.

  2. 2

    Den Karten beim Aktualisieren zusehen

    Die Facebook- und X-Modelle werden beim Tippen neu gerendert und nutzen das echte Layout und die echte Kürzung jeder Plattform.

  3. 3

    Eine Bild-URL hinzufügen

    Fügen Sie eine absolute https-Bildadresse ein, um den Ausschnitt zu sehen; lassen Sie sie leer, zeigt die Facebook-Karte einen Platzhalter.

  4. 4

    In Ihre og:-Tags übernehmen

    Liest sich die Karte gut, übertragen Sie denselben Titel, dieselbe Beschreibung und dasselbe Bild in die Meta-Tags Ihrer Seite.

Was jedes Feld wird

Feld Open-Graph-Tag In der Karte gezeigt
Titel og:title Fette Überschrift, auf eine Zeile gekürzt
Beschreibung og:description Grauer Untertitel, auf zwei Zeilen begrenzt
Seitenname og:site_name Kleines Label über der Facebook-Überschrift
URL og:url Die Domain wird gezeigt; der Host bestimmt sie
Bild-URL og:image Auf 1.91:1 zugeschnitten auf beiden Karten

Das Tool liest den Host aus der eingegebenen URL, sodass https://blog.example.com/post auf der Karte blog.example.com zeigt.

Die zwei Karten und ihre Unterschiede

  • Facebook zeigt das Bild auf 1.91:1 zugeschnitten, dann die Domain in Kapitälchen, den fetten Titel auf einer Zeile und die Beschreibung auf bis zu zwei Zeilen. Ohne Bild-URL wird ein grauer Platzhalter gerendert, was in der Praxis die häufigste Ursache für eine flache, bildlose Freigabe ist.
  • X (Twitter) zeigt eine abgerundete summary_large_image-Karte: das Bild im Ausschnitt 2:1, die Domain, den Titel und darunter die Beschreibung.

Damit der Wortlaut passt

  • Titel: Streben Sie 60 bis 70 Zeichen an. Facebook schneidet bei etwa 88 ab, X bei etwa 70, ein Titel unter 70 bleibt daher überall vollständig.
  • Beschreibung: Halten Sie sie unter etwa 160 Zeichen; die Karte begrenzt auf zwei Zeilen und verwirft den Rest.
  • Bild: Gestalten Sie es mit 1200 x 630 px, damit der 1.91:1-Ausschnitt sauber ist, und hosten Sie es unter einer absoluten https://-URL. Ein relativer Pfad lädt nicht, sobald die Tags live sind.
  • Seitenname: Kurz und nur die Marke, kein Slogan. Er steht als Label über der Überschrift.

Checkliste für den Veröffentlichungstag

  • [ ] Titel unter 70 Zeichen
  • [ ] Beschreibung unter 160 Zeichen
  • [ ] Bild-URL ist absolut (https, nicht // oder ein relativer Pfad)
  • [ ] Bild mit 1200 x 630 px gestaltet, JPG oder PNG
  • [ ] URL stimmt mit der kanonischen URL überein, die Sie ausliefern
  • [ ] Wortlaut in die echten og:-Tags übernommen und dann mit einem Checker geprüft

Häufig gestellte Fragen

Nein. Sie geben die Kartenfelder von Hand ein, und das Tool modelliert, wie sie aussehen würden. Es ist ein Gestaltungs-Sandkasten, kein Scraper, deshalb funktioniert es auch, bevor die Seite online ist. Um die auf einer Seite bereits vorhandenen Tags zu lesen, fügen Sie das HTML dieser Seite stattdessen in den Open Graph Checker ein.

Eine Facebook-Karte und eine X-(Twitter-)Karte mit großem Bild. Sie nutzen dieselben Open-Graph-Werte, sodass eine Karte, die sich hier gut liest, ein guter Anhaltspunkt für LinkedIn, Slack, Discord und andere Apps ist, die aus denselben og:-Tags entfalten, jede mit leicht anderen Grenzen.

Weil das Bildfeld leer ist oder die eingefügte URL keine funktionierende absolute https-Adresse ist. Fügen Sie eine vollständige https-Bild-URL hinzu, und der Ausschnitt erscheint sofort. Wenn es live geht, halten Sie die Datei unter 5 MB und liefern Sie sie mit einem öffentlichen image/*-Content-Type aus.

Jede Plattform kürzt an einem anderen Punkt (Facebook nahe 88 Zeichen, X nahe 70), und die Modellkarte bildet das ab. Kürzen Sie den Titel auf 60 bis 70 Zeichen, dann bleibt er auf jeder Plattform vollständig.

Verwandte Tools

Meta-Beschreibungslängenprüfer

Messen Sie eine Meta-Beschreibung in Zeichen und geschätzten Pixeln, vergleichen Sie redaktionelle Richtwerte und prüfen Sie Desktop- und Mobilbeispiele.

Google-SERP-Simulator

Prüfen Sie ein ungefähres Google-ähnliches Such-Snippet mit Zeichenlimits für Mobilgeräte und Desktop. Ihr Entwurf bleibt in dieser Browsersitzung.

FAQ-Schema-Generator

Erzeugen Sie FAQPage-JSON-LD-Markup aus Frage-Antwort-Paaren, damit Ihre Seite für Googles Rich Results und die Antwortbox infrage kommt.

HTTP-Sicherheitsheader-Prüfer

Füge HTTP-Response-Header ein und prüfe HSTS, CSP, Einbettungsschutz, MIME-, Referrer- und Cross-Origin-Richtlinien lokal im Browser.

Interne Links Extraktor

Extrahiere alle internen Links von einer URL oder eingefügtem HTML mit Ankertext, rel-Attributen und Nofollow-Status für SEO-Audits.

Canonical-Tag-Generator

Generieren Sie ein gültiges rel=canonical Link-Tag für jede URL. Inklusive URL-Validierung und häufiger Fehler, die Sie vermeiden sollten.

Tool in anderen Sprachen verfügbar