Meta-Tag-Generator 2026

Stand April 2026

Geprueft von Finanzrechner-Redaktion, Redaktion Tools|Stand: April 2026|Quellen: Google – Title Best Practices, Open Graph Protocol, X (Twitter) – Card Documentation

Title, Description, canonical-Link, Open Graph und Twitter Cards in einem Schritt – fertig zum Kopieren in den <head>.

Geben Sie Title, Description, Canonical-URL, OG-Bild und Twitter-Handle ein – das Tool erzeugt einen vollständigen Meta-Tag-Block für SEO und Social Sharing. Längen-Indikator hilft, Title und Description optimal zu halten. HTML-Code per Klick kopieren und in <head> einfügen.

Title22 / 60 Zeichen

Description64 / 160 Zeichen

Canonical URL

OG-Bild URL

Twitter @-Handle

Generiertes HTML

<title>Meine Seite – Beispiel</title>
<meta name="description" content="Eine prägnante Beschreibung dieser Seite in maximal 160 Zeichen.">
<link rel="canonical" href="https://example.com/">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/">
<meta property="og:title" content="Meine Seite – Beispiel">
<meta property="og:description" content="Eine prägnante Beschreibung dieser Seite in maximal 160 Zeichen.">
<meta property="og:image" content="https://example.com/og-image.jpg">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@beispiel">
<meta name="twitter:title" content="Meine Seite – Beispiel">
<meta name="twitter:description" content="Eine prägnante Beschreibung dieser Seite in maximal 160 Zeichen.">
<meta name="twitter:image" content="https://example.com/og-image.jpg">

So funktioniert der Meta-Tag-Generator

Der Generator nimmt Ihre Eingaben für Title, Description, URL und Bild entgegen und kombiniert sie zu einem vollständigen HTML-Snippet für den <head>-Bereich Ihrer Seite. Sonderzeichen werden automatisch HTML-escaped, damit der Output valide bleibt – Anführungszeichen, kaufmännisches Und, spitze Klammern.

Der Block deckt drei Bereiche ab: klassische Suchmaschinen-Tags (Title, Description, Canonical), Open-Graph-Tags für Facebook/LinkedIn/WhatsApp, und Twitter Cards für X. So erscheint Ihre Seite überall korrekt mit Bild, Titel und Kurzbeschreibung beim Teilen.

Standards: Open Graph und Twitter Cards

Das Open Graph Protocol wurde 2010 von Facebook eingeführt und ist heute De-facto-Standard. Es nutzt das property-Attribut statt name – ein Detail, das oft falsch gemacht wird. Twitter Cards sind die Twitter-eigene Variante und nutzen name="twitter:...".

Für die Suchmaschinen-Tags gilt das HTML Living Standard. Der canonical-Link ist in den Google Search Central Guidelines als Best Practice empfohlen.

Anwendungsfälle

SEO-Onboarding: Standard-Meta-Tags für jede neue Seite eines CMS oder Blog.
Marketing-Landingpages: Optimierte Snippets für maximale Click-through-Rate.
Social-Media-Kampagnen: Konsistentes OG-Bild für alle Kanal-Posts.
SaaS-Templates: Reproduzierbarer Meta-Tag-Block für CMS-Themes.
Audit: Vergleich der eigenen Meta-Tags mit Mitbewerbern.

Datenschutz: Client-Side

Der Generator läuft komplett im Browser. Die Eingaben für Title, Description und Bild verlassen Ihren Rechner nicht. Es findet keine Server-Verarbeitung statt, keine Cookies.

Damit ist auch das Tool selbst DSGVO-konform nutzbar. Auch interne, noch nicht öffentliche Seiten können bedenkenlos getestet werden.

Typische Fehler

Title zu lang: Mehr als 60 Zeichen werden in Google abgeschnitten – Marke am Ende, damit das wichtigste Keyword sichtbar bleibt.
Description identisch auf jeder Seite: Google bevorzugt unique Descriptions. Pro Seite individuell formulieren.
Relative Bild-URL: og:image braucht absolute URL inklusive https://, sonst zeigen Social-Plattformen kein Bild.
Falsches og-Attribut: Open Graph nutzt property, nicht name – häufige Verwechslung.
Bild zu klein: Unter 600×315 px wird das OG-Bild von Facebook nicht angezeigt.

Häufige Fragen

Pflicht: <title> und <meta name='description'>. Sehr empfehlenswert: canonical-Link, Open-Graph-Tags (og:title, og:description, og:image, og:url, og:type) und Twitter Cards (twitter:card, twitter:title, twitter:image). Optional: viewport (für mobile Darstellung), robots (Indexierungssteuerung), theme-color (PWA-Farbgebung). Für mehrsprachige Sites zusätzlich hreflang-Tags.

Google schneidet Title nach etwa 50–60 Zeichen, Description nach 150–160 Zeichen ab. Mobil ist der Rahmen leicht enger. Beste Praxis: Title 50–55 Zeichen mit Marke am Ende, Description 140–155 Zeichen mit klarem Mehrwert und Call-to-Action. Längere Texte werden nicht abgestraft, aber abgeschnitten dargestellt.

Open Graph (OG) ist ein Meta-Standard von Facebook, der mittlerweile von allen Social-Plattformen (LinkedIn, X/Twitter, WhatsApp, iMessage, Slack, Discord) verstanden wird. Mit OG steuern Sie, wie Ihre Seite beim Teilen erscheint: Titel, Beschreibung, Bild, Domain. Ohne OG-Tags zeigen Plattformen Standard-Werte aus title/meta description und ein zufälliges Bild der Seite.

Empfohlen: 1200 × 630 Pixel (Verhältnis 1,91:1) – das ist optimal für Facebook, LinkedIn und Twitter Large-Card. Mindestens 600 × 315 px, sonst zeigen Plattformen das Bild nicht. JPG oder PNG, unter 8 MB. Wichtige Inhalte (Logo, Headline) im sicheren mittleren Bereich, da Plattformen unterschiedlich beschneiden.

summary zeigt das Bild als kleines Quadrat links neben Titel/Description (mit 300×157 px optimal). summary_large_image zeigt es großflächig oberhalb (1200×675 px). Für Marketing-Content ist large_image fast immer besser, da es 5–10× mehr Aufmerksamkeit erzeugt.

Nein, Google ignoriert keywords seit 2009. Bing und andere Suchmaschinen ebenfalls. Das Tag richtet keinen Schaden an, aber bringt auch keinen Nutzen. Manche SEO-Tools verlangen es noch – dann minimal halten und nur 5–10 echt relevante Begriffe nennen.

Der canonical-Link sagt Suchmaschinen, welche URL die 'Originalversion' eines Inhalts ist – wichtig bei Duplicate Content (Kategorieseiten, Filter, Tracking-URLs). Setzen Sie auf jeder Seite einen Canonical, der auf die kanonische URL zeigt (auch self-canonical bei Originalen). Verhindert Verwässerung des PageRank und Indexierungsprobleme.

hreflang-Tags signalisieren mehrsprachige oder regionale Versionen einer Seite. Beispiel: <link rel='alternate' hreflang='en' href='https://example.com/en/'>. Wichtig für internationale SEO: vermeidet, dass Google englische Nutzer auf deutsche Versionen schickt. Pro Sprache plus 'x-default' für die Fallback-Version.