Meta-Tags für Suche und Teilen, mit Vorschau
Dieser Meta-Tag-Generator schreibt das HTML, das bestimmt, wie eine Seite in den Google-Ergebnissen erscheint und wie ihr Link auf Facebook, LinkedIn, X, Slack, Discord oder WhatsApp aussieht. Geben Sie Titel, Beschreibung, kanonische URL und Vorschaubild ein, und Sie erhalten die wichtigsten SEO-Tags, die Open-Graph-Tags und die Twitter-Card-Tags – korrekt maskiert und bereit zum Einfügen in Ihren <code><head></code> – mit Live-Vorschau des Suchergebnisses und jeder Social-Media-Karte. Fügen Sie den Head einer bestehenden Seite ein, um deren Tags zu laden und zu verbessern. Alles läuft in Ihrem Browser.
So erstellen Sie Meta-Tags
- 1Schreiben Sie einen Titel und eine Beschreibung. Die Zähler werden rot, wenn Google sie wahrscheinlich kürzt: bei etwa 600 Pixeln (≈60 Zeichen) für den Titel und etwa 160 Zeichen für die Beschreibung.
- 2Geben Sie die kanonische URL der Seite, den Namen Ihrer Website und eine absolute Bild-URL – idealerweise 1200 × 630 Pixel – mit Alternativtext ein.
- 3Wählen Sie Open-Graph-Typ, Sprache und Twitter-Kartenstil und tragen Sie Ihre X-Handles ein. Entfernen Sie den Haken bei Indexierung erlauben für Seiten, die nicht in den Suchergebnissen erscheinen sollen.
- 4Prüfen Sie die Vorschauen für Google, Facebook, LinkedIn und X, wechseln Sie dann zu HTML, wählen Sie die gewünschten Gruppen und kopieren Sie die Tags in den
<head>Ihrer Seite. - 5Um eine bestehende Seite zu bearbeiten, klicken Sie auf Importieren und fügen ihr HTML oder den Quelltext ein.
Die Tags, die für SEO zählen
- <title>
- Das wichtigste On-Page-Signal und die klickbare Überschrift in den Ergebnissen. Stellen Sie das Hauptthema an den Anfang, halten Sie ihn pro Seite eindeutig und enden Sie mit der Marke. Google schreibt Titel um, die es für wenig hilfreich, zu lang oder mit Keywords überladen hält.
- meta description
- Kein Rankingfaktor, wird aber oft als Snippet unter dem Titel genutzt und beeinflusst damit die Klicks. Fassen Sie die Seite in 120–160 Zeichen zusammen, mit einem Grund für den Besuch.
- canonical
- <link rel="canonical"> nennt die bevorzugte URL, wenn derselbe Inhalt unter mehreren Adressen erreichbar ist (Tracking-Parameter, http und https, Schrägstriche am Ende).
- robots
- noindex hält eine Seite aus den Ergebnissen heraus, nofollow sagt Crawlern, ihren Links nicht zu folgen. Index, follow ist der Standard, daher wird das Tag nur geschrieben, wenn Sie etwas ändern.
- viewport & charset
- Keine SEO-Tags im engeren Sinn, aber jede Seite braucht sie: UTF-8 und ein responsiver Viewport sind Voraussetzung für die Mobile-First-Indexierung.
- keywords
- Wird von Google und Bing seit über zehn Jahren für das Ranking ignoriert. Nur angeben, wenn eine interne Suche oder ein anderes System es liest.
Open Graph: So sehen geteilte Links aus
Open Graph ist das von Facebook eingeführte Protokoll, das heute fast jede Plattform liest: LinkedIn, Slack, Discord, WhatsApp, Telegram, iMessage, Pinterest und viele mehr. Die wesentlichen Tags sind og:title, og:description, og:image, og:url und og:type; og:site_name und og:locale verfeinern die Karte.
Das Bild entscheidet über die Karte. Verwenden Sie eine absolute https://-URL, 1200 × 630 Pixel (Seitenverhältnis 1,91:1), unter 5 MB, als JPEG, PNG oder WebP, und halten Sie Text und Logos von den Rändern fern, weil Plattformen unterschiedlich zuschneiden. Plattformen speichern Karten im Cache: Aktualisieren Sie sie nach einer Änderung mit dem Sharing Debugger von Facebook, dem Post Inspector von LinkedIn oder indem Sie die URL mit einem Query-String teilen.
Twitter-/X-Cards
X liest sein eigenes Tag twitter:card, um das Layout zu wählen – summary_large_image für ein Bild in voller Breite, summary für ein kleines quadratisches Vorschaubild –, sowie twitter:site und twitter:creator für die Handles von Website und Autor. Für Titel, Beschreibung und Bild greift es auf die Open-Graph-Tags zurück; deshalb schreibt der Generator twitter:title, twitter:description und twitter:image nur, wenn Open Graph ausgeschaltet ist, und vermeidet so doppeltes Markup.
X zeigt Karten mit großem Bild derzeit als Bild mit eingeblendetem Titel und darunter der Domain; Beschreibungen erscheinen nur auf Summary-Karten und nur in manchen Clients.
Titellänge: Zeichen oder Pixel
Google kürzt Titel nach Breite, nicht nach Zeichenzahl: Am Desktop liegt die Grenze bei etwa 600 Pixeln in einer Arial-ähnlichen Schrift mit 20 Pixeln, was je nach Buchstaben etwa 50–60 Zeichen entspricht – „WWW“ ist dreimal so breit wie „iii“. Der Zähler misst den Titel in dieser Schrift in Ihrem Browser und bildet daher Ihre tatsächlichen Wörter ab. Beschreibungen werden bei etwa 920 Pixeln abgeschnitten, also rund 155–160 Zeichen am Desktop und weniger auf Mobilgeräten.
Kürzen ist keine Abstrafung – es verbirgt nur das Textende –, aber wichtige Wörter am Anfang werden sicher gesehen. Sorgen Sie dafür, dass Titel und Beschreibung zum sichtbaren Inhalt passen; dann übernimmt Google sie eher unverändert.
Wohin die Tags gehören
Alle diese Tags gehören in das <head>-Element der Seite und müssen im HTML stehen, das der Server ausliefert: Crawler für Linkvorschauen führen kein JavaScript aus, daher sind clientseitig hinzugefügte Tags für Facebook, LinkedIn und X unsichtbar. In Frameworks wie Next.js, Nuxt oder Astro nutzen Sie deren Metadaten-APIs, um sie auf dem Server zu rendern. Jeder Attributwert wird HTML-maskiert, sodass Anführungszeichen und kaufmännische Und-Zeichen in Ihren Titeln das Markup nicht beschädigen.
Kombinieren Sie das mit einer robots.txt, die Crawlern Zugang zu Ihren Seiten gibt, einer XML-Sitemap mit Ihren kanonischen URLs und einem Favicon, damit Ihr Suchergebnis Ihr Icon zeigt.
Häufige Fragen
- Wie lang sollten Meta-Title und Meta-Description sein?
- Etwa 50–60 Zeichen (unter ~600 Pixel) für den Titel und 120–160 Zeichen für die Beschreibung. Die Zähler zeigen beides und werden rot, wenn Google den Text wahrscheinlich abschneidet.
- Wie groß sollte ein Open-Graph-Bild sein?
- 1200 × 630 Pixel (1,91:1) funktioniert bei Facebook, LinkedIn, X und Messenger-Apps. Verwenden Sie eine absolute https-URL, bleiben Sie unter 5 MB und platzieren Sie Wichtiges in der Mitte.
- Warum zeigt meine Linkvorschau ein altes Bild oder einen alten Titel?
- Plattformen speichern Linkvorschauen im Cache. Lassen Sie die URL mit dem Sharing Debugger von Facebook oder dem Post Inspector von LinkedIn neu einlesen; X aktualisiert seinen Cache nach etwa einer Woche oder sofort bei einer URL mit neuem Query-String.
- Brauche ich sowohl Open-Graph- als auch Twitter-Tags?
- Für die meisten Plattformen brauchen Sie Open Graph und für X mindestens twitter:card. X greift auf og:title, og:description und og:image zurück, daher sind die übrigen Twitter-Tags optional, wenn Open Graph vorhanden ist.
- Hilft das Meta-Keywords-Tag bei SEO?
- Nein. Google und Bing ignorieren es seit vielen Jahren für das Ranking. Hier ist es optional und nur nützlich, wenn ein internes System es liest.
- Kann ich die Meta-Tags einer bestehenden Seite bearbeiten?
- Ja. Klicken Sie auf Importieren, fügen Sie das HTML der Seite ein (der Quelltext genügt), und Titel, Beschreibung, Canonical, Open Graph, Twitter und Robots werden ins Formular geladen.
- Warum erscheint mein Vorschaubild nicht in der Vorschau?
- Die URL muss absolut (https://…) und öffentlich erreichbar sein. Manche Server verhindern, dass ihre Bilder auf anderen Websites angezeigt werden; die echten Plattformen laden sie serverseitig, daher kann es dort trotzdem funktionieren.
- Wird etwas hochgeladen?
- Nein. Die Tags werden in Ihrem Browser erzeugt. Nur das Vorschaubild wird von der eingegebenen URL geladen, um es in den Vorschauen anzuzeigen.