Meta-Tag-Generator — Title, Description, Open Graph & Twitter-Tags
Gib Title, Description und Social-Card-Angaben einer Seite ein und erhalte einen vollständigen, korrekt maskierten <head>-Block mit Live-Längenzählern.
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Free Business & Marketing Tools | FreeToolsForWeb</title> <meta name="description" content="Free online tools for business: converters, calculators, SEO utilities and a sample-file library. No signup, no ads."> <link rel="canonical" href="https://www.example.com/page"> <meta name="theme-color" content="#244b3f"> <!-- Open Graph (Facebook, LinkedIn, Slack, WhatsApp) --> <meta property="og:type" content="website"> <meta property="og:title" content="Free Business & Marketing Tools | FreeToolsForWeb"> <meta property="og:description" content="Free online tools for business: converters, calculators, SEO utilities and a sample-file library. No signup, no ads."> <meta property="og:url" content="https://www.example.com/page"> <meta property="og:site_name" content="Example Co"> <meta property="og:image" content="https://www.example.com/images/share.png"> <meta property="og:locale" content="en_US"> <!-- Twitter / X card --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Free Business & Marketing Tools | FreeToolsForWeb"> <meta name="twitter:description" content="Free online tools for business: converters, calculators, SEO utilities and a sample-file library. No signup, no ads."> <meta name="twitter:image" content="https://www.example.com/images/share.png">
Füge sie in <head> ein. In Next.js, React Helmet oder einem CMS überträgst du jede Zeile ins passende Feld, statt rohes HTML einzufügen.
Läuft komplett in deinem Browser. Nichts, was du eingibst, wird an uns gesendet oder gespeichert. Alle kostenlosen Tools ansehen.
Ein Problem gefunden oder etwas, das besser sein könnte? Wir lesen jede Nachricht und beheben Fehler schnell.
Dieser kostenlose Meta-Tag-Generator erzeugt den kompletten Satz an Head-Tags, den eine Seite braucht: Title und Meta Description mit Live-Längenzählern, Canonical- und Robots-Anweisungen sowie die Open-Graph- und Twitter-Card-Tags, die steuern, wie ein Link aussieht, wenn er auf LinkedIn, Facebook, X, Slack und WhatsApp geteilt wird. Die Werte werden korrekt maskiert, sodass ein Title mit Und-Zeichen oder Anführungszeichen das HTML nicht zerschießt.
Meta-Tags sind der kleinste und sichtbarste Teil der Onpage-SEO: Title und Description sind der Anzeigentext, den Google für dich schreibt, wenn du es nicht selbst tust, und die Social-Tags entscheiden, ob ein geteilter Link ein Bild und eine Überschrift zeigt oder nur eine nackte URL. Die Hinweise unten nennen die aktuellen Längengrenzen und die Tags, die nichts mehr bewirken – damit du 2026 nicht noch das Meta-Keywords-Tag pflegst.
So funktioniert’s
- Gib den Seitentitel ein (50 bis 60 Zeichen anstreben, Keyword zuerst) und die Meta Description (120 bis 160 Zeichen, ein Grund zum Klicken). Im richtigen Bereich werden die Zähler grün.
- Setze die Canonical-URL auf die bevorzugte Adresse der Seite und lass Robots auf index, follow, es sei denn, die Seite soll nicht in die Suche.
- Füge das Share-Bild (1200 × 630 Pixel), den Websitenamen und das Twitter-Handle hinzu. Title und Description werden für die Social-Tags wiederverwendet.
- Prüfe die Suchvorschau und kopiere dann den erzeugten Block in den <head> der Seite.
- Teste die Live-Seite nach der Veröffentlichung mit dem Open-Graph-Vorschau-Tool, um zu bestätigen, dass die Tags wie erwartet ausgeliefert werden.
Häufige Fragen
Welche Meta-Tags sind für SEO wirklich wichtig?
Title (ein direktes Ranking-Signal und die Überschrift in den Ergebnissen), Meta Description (kein Ranking-Signal, aber dein Snippet und damit entscheidend für die Klickrate), Canonical (verhindert die Verwässerung durch doppelte Inhalte), Robots (Steuerung von index/noindex) und Viewport (mobile Nutzbarkeit). Open-Graph- und Twitter-Tags beeinflussen das Teilen in sozialen Netzwerken, nicht die Rankings. Das Meta-Keywords-Tag ignoriert Google seit 2009; spar dir die Mühe.
Wie lang sollten Title und Description sein?
Titles: etwa 50 bis 60 Zeichen, da Google nach Pixelbreite bei etwa 600 px abschneidet. Descriptions: 120 bis 160 Zeichen auf dem Desktop, auf Mobilgeräten weniger. Google schreibt beides um, wenn es glaubt, es besser zu können – das passiert häufiger bei generischem oder mit Keywords vollgestopftem Text. Schreib also konkrete, ehrliche Texte.
Brauche ich sowohl Open-Graph- als auch Twitter-Card-Tags?
X liest Open-Graph-Tags als Fallback, og:* allein funktioniert also in den meisten Fällen; twitter:card lohnt sich trotzdem, weil es zwischen der großen Bildkarte und der kleinen Zusammenfassung wählt. Alle anderen (LinkedIn, Facebook, Slack, WhatsApp, iMessage, Discord) lesen nur Open Graph.
Wie groß sollte das Share-Bild sein?
1200 × 630 Pixel (1,91:1) ist die sichere Größe für die große Karte auf jeder Plattform. Unter 600 px Breite greifen Facebook und LinkedIn auf ein kleines Vorschaubild oder gar kein Bild zurück. Halte wichtige Inhalte von den Rändern fern; manche Plattformen schneiden in Feeds auf ein Quadrat zu. Verwende eine absolute URL über HTTPS.
Sollte jede Seite ein Canonical-Tag haben?
Ja, auf sich selbst verweisend, es sei denn, die Seite ist ein Duplikat einer anderen. Es führt Tracking-Parameter, Varianten mit und ohne abschließenden Schrägstrich sowie http/https auf eine URL zusammen und ist eine günstige Absicherung. Das Canonical muss eine absolute URL zu einer Seite sein, die 200 zurückgibt.
Tags, die nichts mehr bewirken
meta keywords (seit 2009 ignoriert), meta revisit-after, meta distribution, meta rating und die Google-spezifischen geo.*-Tags sind allesamt Ballast. Die Robots-Werte noodp und noydir sowie die nosnippet-Varianten wurden abgeschafft oder durch max-snippet ersetzt. Wenn ein Template sie noch ausgibt, kannst du sie gefahrlos entfernen, und es ist etwas aufgeräumter.
Maskierung und Zeichenkodierung
Attributwerte müssen & als & und " als " maskieren; dieser Generator erledigt das für dich. Deklariere charset utf-8 als Allererstes im <head>, damit der Browser den Rest korrekt dekodiert. In Frameworks (Next.js, Nuxt, Django, Rails, WordPress) setzt du diese Werte über die Head- oder SEO-Komponente des Frameworks, statt rohes HTML einzufügen – so bleiben sie seitenspezifisch und werden automatisch maskiert.
Ähnliche kostenlose Tools
- SERP-Snippet-Vorschau — Sieh dir an, wie dein Seitentitel und deine Meta-Description bei Google aussehen werden – mit Live-Prüfung der Zeichenzahl.
- Open-Graph-Vorschau — Gib eine URL ein und sieh genau die Karte, die Facebook, LinkedIn, X und Slack anzeigen, alle gefundenen Tags und was fehlt.
- Robots.txt-Generator — Erstelle eine robots.txt mit Vorlagen für „alles erlauben“, Staging und WordPress, einem Bereich für KI-Crawler (Training blockieren, KI-Suche behalten) und Warnungen vor den Fehlern, die Websites aus dem Index werfen.