Meta-Tag-Generator — Open Graph und X Cards erstellen
Generator für Meta-Tags für Suche und Social Sharing mit Vorschau der Link-Karten
Verarbeitung im Browser · kein Hochladen
Es sind Beispielwerte eingetragen. Ersetzen Sie sie durch die Angaben Ihrer Seite.
Verwenden Sie die vollständige Adresse, die mit https:// (oder http://) beginnt.
Vollständige Adresse des Bildes, das beim Teilen des Links angezeigt wird. Die Vorschau lädt das Bild direkt von dieser Adresse.
Mit oder ohne @. Leer lassen, um das Tag wegzulassen.
Erzeugte Tags
12 Tag-Zeilen erzeugt, 2 Punkte zu prüfen
- Ohne Bild zeigen die Vorschauen von KakaoTalk und Facebook kein Bild.
- Die Card mit großem Bild ist ausgewählt, aber es gibt kein Bild.
<title>Zeichenzähler — Wörter und Zeichen zählen</title> <meta name="description" content="Fügen Sie Ihren Text ein und zählen Sie sofort Zeichen mit und ohne Leerzeichen, Wörter und Bytes."> <link rel="canonical" href="https://www.example.com/de/character-counter/"> <meta property="og:type" content="website"> <meta property="og:title" content="Zeichenzähler — Wörter und Zeichen zählen"> <meta property="og:description" content="Fügen Sie Ihren Text ein und zählen Sie sofort Zeichen mit und ohne Leerzeichen, Wörter und Bytes."> <meta property="og:url" content="https://www.example.com/de/character-counter/"> <meta property="og:site_name" content="Beispielseite"> <meta property="og:locale" content="de_DE"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Zeichenzähler — Wörter und Zeichen zählen"> <meta name="twitter:description" content="Fügen Sie Ihren Text ein und zählen Sie sofort Zeichen mit und ohne Leerzeichen, Wörter und Bytes.">
Fügen Sie sie in den <head> Ihres HTML ein.
Vorschauen (Nachbildungen)
Zeichenzähler — Wörter und Zeichen zählen
Fügen Sie Ihren Text ein und zählen Sie sofort Zeichen mit und ohne Leerzeichen, Wörter und Bytes.
example.com
Beispielseite
https://www.example.com/de/character-counter/
Zeichenzähler — Wörter und Zeichen zählen
Fügen Sie Ihren Text ein und zählen Sie sofort Zeichen mit und ohne Leerzeichen, Wörter und Bytes.
Dies sind Nachbildungen der echten Apps, Längen und Kürzungsstellen können daher abweichen. Prüfen Sie die Breite von Titel und Beschreibung bei Google mit dem Tool für die SERP-Vorschau. KakaoTalk kann die Vorschau eines bereits bekannten Links eine Zeit lang zwischenspeichern, daher kann nach einer Änderung der Tags noch eine alte Vorschau erscheinen.
Die Tag-Namen folgen dem Open-Graph-Protokoll (ogp.me) und den X-(Twitter-)Cards. KakaoTalk, Facebook, LinkedIn und Slack lesen og:title, og:description, og:image und og:url; X liest twitter:card und kann für den Rest auf die og-Tags zurückgreifen. Anführungszeichen, <, > und & in Ihrem Text werden für HTML maskiert. Nichts, was Sie eingeben, wird gespeichert oder gesendet.
Was das Tool ist
Dieser Meta-Tag-Generator schreibt die Tags im Head, die steuern, wie eine Seite in Suchergebnissen und beim Teilen ihres Links aussieht. Messenger und soziale Netzwerke bauen ihre Link-Karten aus Open-Graph-Tags, X ergänzt eigene Card-Tags. Füllen Sie ein kurzes Formular aus und erhalten Sie HTML, das Sie direkt in den Head Ihrer Seite einfügen können. Die Maskierung der Anführungszeichen wird erledigt, und Sie sehen nachgebildete Vorschauen einer KakaoTalk-Link-Karte und eines Google-Ergebnisses.
Anleitung
- Geben Sie Titel, Beschreibung und Seiten-URL ein. Zu Beginn sind Beispielwerte eingetragen.
- Ergänzen Sie die vollständige URL des Vorschaubilds und eine kurze Bildbeschreibung. Ohne Bild erinnert eine Warnung daran, dass Link-Karten dann kein Bild zeigen.
- Wählen Sie Seitenname, Seitentyp, Sprache und den Typ der X Card. Das X-Konto ist optional.
- Beheben Sie alles, was unter den erzeugten Tags aufgeführt ist, etwa relative URLs oder einen leeren Titel.
- Kopieren Sie die Tags in den Head Ihrer Seite.
- Die nachgebildeten Vorschauen geben einen ungefähren Eindruck vom Ergebnis.
So funktioniert es
- Die Tag-Namen folgen dem Open-Graph-Protokoll (ogp.me): og:type, og:title, og:description, og:url, og:site_name, og:locale, og:image und og:image:alt, dazu die X-Card-Tags twitter:card, twitter:site, twitter:title, twitter:description und twitter:image.
- Die Seiten-URL wird sowohl für den Canonical-Link als auch für og:url verwendet.
- Anführungszeichen, <, > und & werden als HTML-Entitäten maskiert, Zeilenumbrüche und mehrfache Leerzeichen werden zu einem Leerzeichen zusammengefasst, und leere Felder erzeugen kein Tag.
- X-Konten werden nur als 1–15 Buchstaben, Ziffern oder Unterstriche akzeptiert.
- Die Vorschauen sind Nachbildungen; echte Apps verwenden eigene Schriften und Kürzungsregeln.
Beispiele
| Eingabe | Erzeugtes Tag |
|---|---|
| Titel: Zeichenzähler | <title>Zeichenzähler</title>, og:title, twitter:title |
| Beschreibung mit “Anführungszeichen” | content="Beschreibung mit "Anführungszeichen"" |
| X-Konto: toolsnack | <meta name="twitter:site" content="@toolsnack"> |
| Bild /og.png | Warnung: vollständige https://-Adresse verwenden |
Häufige Fragen
Welche Tags verwenden Link-Vorschauen?
KakaoTalk, Facebook, LinkedIn und Slack lesen og:title, og:description, og:image und og:url. X liest zuerst twitter:card und kann für Titel, Beschreibung und Bild auf die og-Tags zurückgreifen.
Warum fehlt mein Bild in der Vorschau?
og:image muss eine vollständige Adresse sein, die mit https:// beginnt. Relative Pfade wie /og.png werden von den meisten Crawlern ignoriert, und das Bild muss öffentlich erreichbar sein.
Ich habe die Tags geändert, aber es erscheint noch die alte Vorschau.
Apps wie KakaoTalk können die Vorschau eines bereits bekannten Links eine Zeit lang zwischenspeichern. Sie wird mit der Zeit aktualisiert, und über die Entwicklerwerkzeuge der Plattformen lässt sich ein erneutes Auslesen der Seite anstoßen.
Wie lang sollten Titel und Beschreibung sein?
Google kürzt Snippets nach Breite, nicht nach Zeichenanzahl. Mit dem Tool für die SERP-Vorschau sehen Sie genau, wo Titel und Beschreibung abgeschnitten würden.
Werden meine Eingaben gespeichert?
Nein. Tags und Vorschauen entstehen in Ihrem Browser. Wenn Sie eine Bild-URL eingeben, lädt Ihr Browser dieses Bild direkt, um die Vorschau anzuzeigen.
