Eingabe
Ergebnis
Das Ergebnis erscheint hier.Wie ein Link in Slack, LinkedIn, Facebook, Discord oder X aussieht, entscheidet eine Handvoll Meta-Tags, die die meisten Seiten leicht falsch setzen: eine relative og:image-URL, ein fehlendes og:url, ein Titel, der so lang ist, dass er abgeschnitten wird. Geben Sie Titel, Beschreibung, URL und Bild der Seite als einfache Zeilen ein, und dieses Werkzeug schreibt den kompletten Satz – Title- und Description-Tag, den Canonical-Link, die Open-Graph-Eigenschaften von ogp.me und die X-Card-Tags –, korrekt maskiert. Außerdem misst es Titel und Beschreibung an den Breiten, die Google üblicherweise anzeigt, und listet auf, was von den vier erforderlichen Open-Graph-Eigenschaften fehlt. In einem Next.js-Projekt erzeugen next-seo (garmeeh/next-seo, 8,5k Sterne, MIT) oder die Metadata-API des Frameworks dieselben Tags aus dem Code.
So arbeitet es
- Kurze Schlüssel genügen – title, description, url, image, image:alt, site_name, type, locale –, und jede og:-, article:- oder twitter:-Eigenschaft lässt sich so hinzufügen, wie sie in den Spezifikationen geschrieben wird.
- og:type ist standardmäßig website, der Canonical-Link standardmäßig die url-Zeile, und als de-DE oder de-de eingegebene Locales werden zu de_DE umgeschrieben, der Form, die Open Graph erwartet.
- Für X wird standardmäßig nur twitter:card ergänzt, weil X auf og:title, og:description und og:image zurückgreift; mit Bild wird die Karte zu summary_large_image.
- Bei der Breite von Titel und Beschreibung zählt ein CJK-Zeichen doppelt, weil Google nach Pixelbreite kürzt und chinesische Zeichen etwa doppelt so breit wie lateinische Buchstaben sind.
Wohin Ihre Daten gehen
Nirgendwohin. Dieses Werkzeug läuft vollständig in Ihrem Browser: Der eingefügte Text wird von der Seite verarbeitet und weder an einen Server übertragen noch protokolliert.
Dieses Tool ist kostenlos und braucht kein Konto. Die Ergebnisse existieren nur in Ihrer geöffneten Seite und werden nirgends gespeichert.
Was es kostet
Dieses Werkzeug ist kostenlos, ohne Anmeldung und ohne Punkte.
Häufige Fragen
- Wie lang sollten Titel und Beschreibung sein?
- Google kürzt Titel bei etwa 600 Pixeln, rund 60 lateinischen Zeichen, und Beschreibungen bei etwa 155–160 Zeichen. Das sind Faustregeln, keine Grenzen: Ein längerer Wert wird trotzdem indexiert, er endet nur mit Auslassungspunkten. Deutsche Titel mit langen Komposita stoßen schneller an diese Grenze. Soziale Plattformen haben eigene, meist großzügigere Grenzen.
- Welche Größe sollte das og:image haben?
- 1200×630 Pixel, ein Seitenverhältnis von 1,91:1, empfehlen Facebook und LinkedIn, und es passt auch für die große Karte von X. Verwenden Sie eine absolute https-URL, halten Sie die Datei unter einigen Megabyte und setzen Sie og:image:width und og:image:height, damit das erste Teilen dargestellt wird, ohne auf den Bild-Download zu warten.
- Ich habe die Tags geändert, aber es erscheint noch die alte Vorschau. Warum?
- Jede Plattform speichert die abgerufene Vorschau im Cache. Der Sharing Debugger von Facebook und der Post Inspector von LinkedIn erzwingen beide einen neuen Abruf; bei anderen Plattformen lässt ein Query-String wie ?v=2 an der geteilten URL den Link neu erscheinen.
- Brauche ich noch twitter:-Tags?
- Nur twitter:card ist unverzichtbar, da X für Titel, Beschreibung und Bild die og:-Werte liest, wenn twitter:-Entsprechungen fehlen. Ergänzen Sie twitter:site (das @Handle der Website) und twitter:creator (das des Autors), wenn die Karte zugeordnet werden soll; einem ohne @ eingegebenen Handle wird eines vorangestellt.
Das Open Source dahinter
Dieses Werkzeug ist eine eigenständige Implementierung ohne fremde Bibliothek. garmeeh/next-seo (MIT) erledigt dieselbe Aufgabe als Bibliothek — wer sie im eigenen Programm braucht, fängt dort an, statt eine Webseite aufzurufen.
garmeeh/next-seoAuch bekannt als
- Open Graph Generator
- OG Meta Tags
- Twitter Card Generator
- Meta Tags Generator
- Social Media Vorschau Tags
- og:image Größe