So nutzt du: Meta-Tag-Generator
- Trage den Seitentitel, die Meta-Description und die Canonical-URL ein. Die Zähler warnen dich, bevor Google die Texte abschneidet.
- Fülle das Open-Graph-Bild, den Seitennamen und das Locale aus und wähle einen X-Card-Typ. Die Vorschauen für Google, Facebook und X aktualisieren sich beim Tippen.
- Lege bei Bedarf Robots-Direktiven, Theme-Farbe und Icon-Pfade fest.
- Kopiere die Ausgabe Vollständiger <head> für eine handgecodete Seite oder wechsle zu Webflow Custom Code, um nur die Tags zu erhalten, die Webflow nicht aus seinen Einstellungen generiert.
Was sind Meta-Tags?
Meta-Tags sind HTML-Elemente im <head> einer Seite, die die Seite für Browser, Suchmaschinen und soziale Netzwerke beschreiben. Auf der Seite selbst sind sie unsichtbar, bestimmen aber, wie sie in den Google-Ergebnissen erscheint, wie ein Link in Slack, LinkedIn oder WhatsApp dargestellt wird, ob die Seite indexiert werden darf und wie sie sich auf dem Smartphone skaliert.
Die Tags, die wirklich zählen
| Tag | Genutzt von | Zweck |
|---|---|---|
<title> | Google, Browser-Tabs | Die klickbare Überschrift in den Suchergebnissen – ein bestätigter Relevanzfaktor. |
meta description | Google, Bing | Wird oft als Snippet unter dem Titel verwendet; beeinflusst die Klickrate, nicht das Ranking. |
link rel="canonical" | Google, Bing | Benennt die bevorzugte URL, wenn derselbe Inhalt unter mehreren Adressen erreichbar ist (Parameter, Schrägstriche am Ende, http/https). |
meta robots | Alle großen Crawler | noindex hält eine Seite aus den Ergebnissen; max-image-preview:large erlaubt große Bildvorschauen in Discover. |
og:* | Facebook, LinkedIn, Slack, Discord, iMessage… | Das Open-Graph-Protokoll – Titel, Beschreibung, Bild und Typ eines geteilten Links. |
twitter:* | X | Kartenlayout (summary oder summary_large_image) und Account-Zuordnung; greift auf og:-Tags zurück. |
viewport, charset | Browser | Korrekte Skalierung auf dem Smartphone und Zeichenkodierung. |
Das alte Tag meta keywords wird bewusst nicht erzeugt: Google ignoriert es seit weit über zehn Jahren, und es verrät Mitbewerbern nur deine Keyword-Strategie.
Häufige Fehler, die dieser Generator vermeidet
- Relative og:image-URLs. Social-Scraper brauchen eine absolute
https://-URL. Ergänzeog:image:widthundog:image:height, damit das Bild beim allerstbesten Teilen erscheint und nicht erst nach einem erneuten Scrapen. - Noindex plus Canonical. Ein Canonical auf eine andere URL und gleichzeitig
noindexsenden widersprüchliche Signale. Entscheide dich für eines. - Nicht maskierte Anführungszeichen. Ein
"in der Beschreibung bricht das Attribut. Alle Werte werden in der Ausgabe HTML-maskiert. - Doppelte Tags. Plattformen wie Webflow, WordPress-SEO-Plugins oder Shopify geben bereits viele Tags aus. Ein zweites
<title>oderog:imagevon Hand lässt Crawler raten, welches gilt.
Webflow: Einstellungsfelder vs. Custom Code
Webflow schreibt Title, Description, Open-Graph-Titel/-Beschreibung/-Bild, Canonical, Charset und Viewport für dich aus den Seiten- und Website-Einstellungen. Ein vollständiger Head im Custom Code würde sie daher doppeln. Wähle oben Webflow Custom Code, und die Ausgabe enthält nur, was Webflow nicht nativ setzen kann: Robots-Direktiven, theme-color, og:site_name, og:locale, X-Account-Handles und zusätzliche Icon-Links. Auf CMS-Template-Seiten akzeptiert dieselbe Custom-Code-Box eingefügte CMS-Felder. Prüfe nach der Veröffentlichung die live ausgegebenen Tags mit dem Meta Tag Checker und dem Open Graph Checker oder gestalte ein Teaser-Bild mit dem OG Image Generator.
Auch gesucht als: meta tags generator, meta tags erstellen, og tags generator, open graph generator, twitter card generator, seo meta tags, html meta tags, webflow meta tags.
Passende Tools zu: Meta-Tag-Generator
- SERP-Vorschau — Schreib einen Title-Tag und eine Meta-Description und sieh genau, wo Google sie wahrscheinlich abschneidet – gemessen in Pixeln statt nur in Zeichen, auf Desktop und Mobile.
- Favicon-Generator — Erstelle aus einem Logo, einem Buchstaben oder einem Emoji ein komplettes Favicon-Paket: eine „favicon.ico“-Datei in verschiedenen Größen, ein Apple-Touch-Icon, Android-/PWA-Icons, einen Webflow-Webclip, das Web-Manifest und die HTML-Tags zum Einfügen.
- Schema-Markup-Generator — Wähle einen Schematyp aus, fülle das Formular aus und kopiere den JSON-LD-Code, der direkt eingefügt werden kann.
- robots.txt – Erklärvideo — Die Regeln in der robots.txt-Datei sind kurz, lassen sich aber leicht falsch interpretieren.
Häufige Fragen
Sind Meta-Tags für SEO noch wichtig?
Welche Größe sollte ein Open-Graph-Bild haben?
Brauche ich sowohl Open-Graph- als auch Twitter-Tags?
og:title, og:description und og:image als Fallback. Zusätzlich zu Open Graph brauchst du also nur twitter:card (und optional twitter:site).