Meta-Tag-Generator
Tragen Sie die Angaben Ihrer Seite ein und kopieren Sie fertiges HTML für den Head: Title, Description, Canonical, Robots, Open-Graph- und Twitter-Card-Tags.
Läuft vollständig in Ihrem Browser
Leere Felder werden in der Ausgabe weggelassen. Die Vorschauen sind Nachbildungen aus Ihrem Text; Ihre Bildadresse wird nie geladen, und echte Suchmaschinen und soziale Netzwerke stellen die Inhalte auf ihre eigene Weise dar.
So erzeugen Sie Meta-Tags
- Geben Sie Titel und Beschreibung der Seite ein. Die Zähler zeigen grob, wie viel davon üblicherweise angezeigt wird.
- Ergänzen Sie eine kanonische Adresse, die Robots-Auswahl und die benötigten Open-Graph- und Twitter-Felder. Warnungen weisen auf Adressen hin, die keine vollständigen
https://-URLs sind. - Prüfen Sie die Vorschau für Suche und soziale Netzwerke, klicken Sie dann auf HTML kopieren und fügen Sie die Tags in den
<head>Ihrer Seite ein.
Wofür die einzelnen Tags da sind
Aus <title> und Meta-Description wird ein Suchergebnis meist zusammengesetzt. Der Canonical-Link sagt Suchmaschinen, welche Adresse die Hauptadresse ist, wenn dieselbe Seite auf mehreren Wegen erreichbar ist, etwa mit Tracking-Parametern. Das Robots-Tag ist nur nötig, wenn Sie vom Standard abweichen wollen, die Seite zu indexieren und ihren Links zu folgen. Mit diesem Meta-Tag-Generator erstellen Sie alle diese Tags auf einmal.
Open-Graph-Tags wurden für Linkvorschauen eingeführt und werden heute von den meisten Chat-Apps und sozialen Netzwerken gelesen. Titel, Beschreibung, Bild und URL sind die vier wichtigsten; og:image:alt gibt dem Bild eine Textbeschreibung, und og:type ist meist website oder article. Das X-Card-Tag wählt zwischen einem kleinen quadratischen Vorschaubild (summary) und einem breiten Bild (summary_large_image).
Der Text wird beim Schreiben maskiert, sodass aus einem kaufmännischen Und & und aus einem doppelten Anführungszeichen " wird. Das hält die Seite gültig und verhindert, dass verirrte Anführungszeichen ein Attribut vorzeitig beenden. Prüfen Sie die fertige Seite mit einer echten Teilen-Vorschau, bevor Sie sich darauf verlassen, denn jede Website speichert die Vorschau, die sie zuerst abgerufen hat.
Tipps
- Zählen Sie Zeichen genauer mit Zeichen zählen.
- Erstellen Sie eine saubere Adresse für die kanonische URL mit dem Slug-Generator.
- Bringen Sie den Head, in den Sie die Tags einfügen, mit HTML formatieren und verschönern in Ordnung.
Häufige Fragen
Wie lang sollten Title und Description sein?
Eine feste Grenze gibt es nicht. Suchmaschinen kürzen Text nach Pixelbreite, nicht nach Zeichen, und schreiben ihn eventuell um. Als grobe Richtlinie werden Titel mit etwa 50 bis 60 Zeichen und Beschreibungen mit etwa 150 bis 160 Zeichen meist vollständig angezeigt. Die Zähler hier sind Orientierung, keine Regeln.
Brauche ich sowohl Open-Graph- als auch Twitter-Tags?
Oft nur Open Graph. X (Twitter) liest Titel, Beschreibung und Bild aus Open Graph, wenn eigene Tags fehlen, möchte aber trotzdem twitter:card, um das Card-Layout zu wählen. Fügen Sie twitter:site hinzu, wenn das Konto genannt werden soll.
Warum muss og:image eine vollständige Adresse sein?
Soziale Netzwerke laden das Bild von ihren eigenen Servern, daher fehlt bei einem relativen Pfad wie /img/card.png die Basis zum Auflösen. Verwenden Sie eine absolute https://-URL. Eine gängige Card-Größe ist 1200 × 630 Pixel.
Was bewirkt die Robots-Auswahl?
noindex bittet Suchmaschinen, die Seite nicht aufzuführen, und nofollow, ihren Links nicht zu folgen. Standard für eine Seite ohne Robots-Tag ist index und follow; wählen Sie beides, wird gar kein Tag geschrieben.
Werden Sonderzeichen maskiert?
Ja. Kaufmännische Und-Zeichen, spitze Klammern und doppelte Anführungszeichen in Ihrem Text werden in HTML-Entitäten umgewandelt, sodass ein Titel wie Q&A "live" nicht aus seinem Attribut ausbrechen oder der Seite Markup hinzufügen kann.
Wird etwas an einen Server gesendet oder mein Bild geladen?
Nein. Die Tags werden in Ihrem Browser erstellt, und die Bildadresse wird in der Social-Vorschau nur als Text angezeigt, nie abgerufen. Soziale Netzwerke laden das Bild später, wenn jemand die Seite teilt.