CrispUtils

Meta-Tag- und Open-Graph-Generator

Schreib die Tags, die darüber entscheiden, wie deine Seite in den Suchergebnissen und beim Teilen aussieht — mit Zeichenzählern, die warnen, bevor der Titel abgeschnitten wird, und einer Vorschau, die beim Tippen mitläuft.

1200×630 Pixel funktionieren überall.

Vorschau des Suchtreffers
Erzeugte Tags
Deine Datei wird von deinem eigenen Browser verarbeitet. Nichts wird hochgeladen, gespeichert oder protokolliert.

Zwei kurze Textstücke leisten den Großteil der Arbeit, damit eine Seite geklickt wird: der Titel in den Suchergebnissen und die Beschreibung darunter. Schreib sie zu lang, werden sie mitten im Satz abgeschnitten; lass sie weg, erfindet die Suchmaschine etwas aus deinem Seiteninhalt, meistens schlecht.

Open-Graph-Tags erledigen dasselbe für Links, die in Messengern und sozialen Netzwerken geteilt werden. Ohne sie ist ein geteilter Link eine nackte URL; mit ihnen wird daraus eine Karte mit Titel, Zusammenfassung und Bild. Dieser Generator erzeugt beide Sätze plus die Twitter-Card-Entsprechungen und zeigt dir das Ergebnis beim Tippen.

So benutzt du das Tool

  1. Schreib den Titel. Ziel sind 30 bis 60 Zeichen — der Zähler wird außerhalb dieses Bereichs gelb, weil deutlich über 60 meist abgeschnitten wird.
  2. Schreib die Beschreibung. 70 bis 160 Zeichen sind der nützliche Bereich; sie beeinflusst das Ranking nicht direkt, aber die Klickbereitschaft sehr stark.
  3. Trag die Canonical-URL ein. Sie sagt Suchmaschinen, welche Fassung einer Seite maßgeblich ist — wichtig, sobald du mit UTM-Parametern arbeitest.
  4. Füg ein Open-Graph-Bild hinzu. 1200×630 Pixel ist die Standardgröße, und die Tags gehen davon aus.
  5. Prüf die Vorschau und kopier den erzeugten Block in den <head> deiner Seite.

Beispiel aus der Praxis

Eine Produktseite

Der Titel Wochenendtasche aus Leder — handgemacht in Florenz hat 52 Zeichen und bleibt damit ganz stehen. Die Beschreibung nennt Material, Hersteller und Lieferversprechen in 140 Zeichen. Das Open-Graph-Bild ist das Produktfoto, der Link erscheint also als Karte, wenn eine Kundin ihn einer Freundin schickt.

Einen hässlich geteilten Link reparieren

Ein im Chat geteilter Blogbeitrag zeigt nur die URL. Mit og:title, og:description und einem 1200×630-og:image wird eine richtige Karte daraus. Die meisten Plattformen cachen hartnäckig, nutz also ihr Debug-Werkzeug, um eine Aktualisierung zu erzwingen.

Typische Anwendungsfälle

  • Neue Seiten auf einer Website ohne Meta-Tags
  • Landingpages für eine Kampagne
  • Blogbeiträge und Artikel, die geteilt werden
  • Produktseiten, bei denen die Beschreibung die Klicks bringt
  • Einen Link reparieren, der in Messengern schlecht aussieht
  • noindex für Staging- oder Danke-Seiten setzen

Häufige Fehler

  • Derselbe Titel auf jeder Seite — Doppelte Titel über eine Website hinweg verschenken das stärkste Signal, das eine Seite hat. Jede Seite braucht einen eigenen.
  • Keywords in den Titel stopfen — Es liest sich für Menschen schlecht, was Klicks kostet, und Suchmaschinen schreiben Titel, die sie für wenig hilfreich halten, oft um — dann verlierst du die Kontrolle ganz.
  • Ein Open-Graph-Bild im falschen Format — Alles weit weg von 1200×630 wird unvorhersehbar beschnitten. Halt Wichtiges von den Rändern fern.
  • Auf das Meta-Keywords-Tag setzen — Keine große Suchmaschine nutzt es seit weit über einem Jahrzehnt. Es bewirkt nichts.

Häufige Fragen

Wie lang sollte ein Titel sein?

Zwischen 30 und 60 Zeichen. Suchmaschinen messen eher die Pixelbreite als Zeichen, die genaue Grenze schwankt also, aber 60 ist eine sichere Arbeitsgrenze. Setz die auffälligen Wörter nach vorn, falls abgeschnitten wird.

Beeinflusst die Meta-Description das Ranking?

Nicht direkt. Sie beeinflusst die Klickrate eines ohnehin rankenden Treffers, und das ist eine Menge wert. Schreib sie wie Werbetext: Sag, was die Seite der Leserin bringt.

Warum zeigt mein Link immer noch das alte Bild?

Soziale Plattformen cachen Open-Graph-Daten hartnäckig. Nutz das Debug- oder Sharing-Werkzeug der jeweiligen Plattform, um nach einer Änderung ein erneutes Abrufen zu erzwingen.

Brauche ich Open Graph und Twitter Cards?

X fällt auf Open Graph zurück, wenn Twitter-Tags fehlen, streng genommen kannst du sie also weglassen. Beides sind ein paar Zeilen mehr und geben dir ausdrückliche Kontrolle, deshalb gibt dieser Generator beides aus.

Was macht das Canonical-Tag?

Es benennt die maßgebliche URL einer Seite. Es wird wichtig, sobald derselbe Inhalt unter mehreren Adressen erreichbar ist — mit und ohne Schrägstrich am Ende, mit UTM-Parametern oder mit Sortier- und Filterparametern.

Wird irgendetwas an einen Server geschickt?

Nein. Alles entsteht in der Seite, was praktisch ist, wenn du an einer noch unangekündigten Seite oder einem Kundenprojekt arbeitest, das noch nicht live ist.

Zuletzt aktualisiert 2026-09-15