01
Tool

Kostenloser Meta-Tags-Generator

Erstellen Sie ein vollständiges HTML-`head`-Snippet — grundlegendes SEO, Open Graph, Twitter Card und mehr. Kopieren und in jede Seite einfügen.

Konfigurieren

Geben Sie Ihre Seitendetails ein. Lassen Sie Open Graph- und Twitter-Felder leer, um sie von den Basisfeldern zu ubernehmen.

Grundlegendes SEO

0/60
0/160

Open Graph

Twitter-Karte

Generierter HTML-Code

Fugen Sie diese Tags in das Head-Element Ihrer Seite ein.

head-meta.html
<!-- Basic SEO -->
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#0F172A">

<!-- Open Graph -->
<meta property="og:type" content="website">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">

10 Zeilen

Ihre robots.txt ist fertig — aber das ist nur eines von 99+ SEO-Signalen.

Kostenloses Audit durchführen →

Was sind Meta-Tags und warum sind sie wichtig?

Meta-Tags sind HTML-Elemente im <head> einer Seite, die das Dokument für Maschinen beschreiben: Suchmaschinen, Social-Media-Plattformen, Browser und Betriebssysteme. Der Body einer Seite ist das, was Menschen sehen; der Head ist das, was Bots, Crawler und Plattform-Integrationen lesen. Meta-Tags entscheiden, wie deine Seite indexiert wird, wie sie in geteilten Links dargestellt wird, welche Farbe die Browser-Oberfläche auf Mobilgeräten annimmt, und ob das Gerät Telefonnummern und E-Mail-Adressen als tippbare Links interpretiert.

Die meisten Meta-Tags fallen in eine von vier Rollen. Technische Tags wie charset und viewport teilen dem Browser mit, wie er das Dokument parsen und darstellen soll; ohne sie bricht das Rendering auf vorhersehbare Weise zusammen. SEO-Tags wie title, description, canonical, robots und hreflang teilen Suchmaschinen mit, was die Seite ist und wie sie im Index behandelt werden soll. Social-Tags wie die og:-Familie von Open Graph und die twitter:-Familie von Twitter Card steuern, wie die Seite dargestellt wird, wenn ihre URL in einen Chat, Post oder geteilten Link eingefügt wird. Branding- und UX-Tags wie theme-color, apple-touch-icon und format-detection steuern, wie die Seite in das jeweilige Betriebssystem integriert wird.

Die Geschichte ist vielschichtig. Die ursprüngliche HTML-4-Spezifikation definierte <meta> für generische Name-Wert-Paare. Open Graph wurde 2010 von Facebook veröffentlicht, um Sharing-Plattformen eine einheitliche Möglichkeit zu geben, eine saubere Vorschau zu extrahieren. Twitter Card folgte 2012 mit eigenem Namespace, weil Open Graph allein die Twitter-spezifischen Produktvarianten nicht abdeckte. Apple, Microsoft und die PWA-Community fügten eigene Tag-Familien für Icons, mobile UI und Progressive Enhancement hinzu. Das Ergebnis ist ein Head-Bereich, der auf einer gut getaggten Seite vierzig Zeilen umfassen kann – jedes Tag bedient einen bestimmten Konsumenten.

Der reale Einfluss summiert sich. Ein fehlender Canonical teilt die Link-Equity auf duplizierte URLs auf. Ein fehlendes oder falsches og:image verwandelt geteilte Links in unformatierte Blöcke, an denen Nutzer vorbeiscrollen. Ein fehlender viewport lässt die Seite auf einem Smartphone in Desktop-Breite rendern, was die Mobile-Friendliness-Penalty von Google auslöst und die Core Web Vitals ruiniert. Keiner dieser Punkte ist für sich genommen katastrophal, aber zusammen lassen sie erheblichen Traffic und Engagement liegen.

So verwendest du diesen Generator

Das Formular ist nach Tag-Familien gruppiert, sodass du nur die Abschnitte ausfüllen kannst, die du brauchst, ohne an irrelevanten Feldern vorbeizuscrollen.

Schritt 1 — SEO-Kern ausfüllen. Gib Seitentitel, Meta-Description, Canonical-URL und Sprache ein. Diese vier Felder decken die Tags ab, die Rankings und Klickrate beeinflussen, daher sollte auch ein minimales Meta-Setup sie befüllen.

Schritt 2 — Social-Previews hinzufügen. Lege Open-Graph-Titel, -Beschreibung und Bild-URL fest. Der Generator kopiert sie standardmäßig in beide og:- und twitter:-Tags, da 90 % der Seiten auf beiden Plattformen denselben Inhalt wünschen. Überschreibe die Twitter-Felder nur, wenn du eine Twitter-spezifische Variante hast.

Schritt 3 — Ausgabe kopieren und in deinen <head> einfügen. Der Generator gibt gültiges HTML5 aus, sortiert mit Charset und Viewport zuerst, dann SEO-Tags, dann Social-Tags, dann Branding. Füge den Block vor externen Stylesheets oder Scripts ein, damit render-blockierende Ressourcen die Meta-Informationen nicht verzögern.

Die vollständige Meta-Tag-Taxonomie

Eine moderne Seite profitiert von weit mehr Tags als dem Titel und der Description, die die meisten Tutorials zeigen. Nachfolgend die Prioritätsreihenfolge für einen sauberen, vollständigen Head.

Technisch (muss zuerst kommen)

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

charset muss in den ersten 1024 Bytes des Dokuments erscheinen. Erscheint es später, hat der Browser möglicherweise bereits begonnen, in einer Standard-Zeichenkodierung zu parsen, und muss neu starten – das kostet Zeit und riskiert Darstellungsfehler bei Nicht-ASCII-Zeichen. viewport steuert, wie mobile Browser das initiale Layout berechnen. Ohne ihn rendern Mobilgeräte die Seite in Desktop-Breite und zoomen heraus, was Touch-Targets zerstört und die Mobile-Friendliness-Penalty auslöst, die Google seit dem Mobile-Update 2015 anwendet.

SEO-Kern

<title>Primäres Keyword — Marke</title>
<meta name="description" content="Eine 150-160 Zeichen lange Zusammenfassung, die das Keyword und einen Call-to-Action enthält.">
<link rel="canonical" href="https://example.com/seiten-pfad">
<meta name="robots" content="index, follow">
<link rel="alternate" hreflang="de" href="https://example.com/de/seite">
<link rel="alternate" hreflang="en" href="https://example.com/en/page">

Das Title-Tag ist das am stärksten gewichtete On-Page-SEO-Signal und die Überschrift des SERP-Snippets. Die Description beeinflusst nicht direkt das Ranking, steigert aber die Klickrate. Canonical disambiguiert duplizierte URLs, die durch Tracking-Parameter, Sortierreihenfolgen oder Paginierung entstehen. Das Robots-Meta-Tag überschreibt robots.txt für die jeweilige Seite, wenn du Crawling erlauben, aber Indexierung verhindern möchtest. Hreflang teilt Google mit, welche Sprach- und Regionsvariante Nutzern bei unterschiedlichen Suchanfragen ausgespielt werden soll – es ist für sauberes internationales SEO erforderlich.

Die Titel-Hierarchie

Drei verschiedene Titelfelder steuern drei verschiedene Oberflächen. Das <title>-Tag füllt das SERP-Snippet und den Browser-Tab. <meta property="og:title"> füllt die Vorschaukarten auf Facebook, LinkedIn und Slack. <meta name="twitter:title"> füllt die Twitter Card. Setze standardmäßig alle drei auf denselben String. Überschreibe og:title, wenn du eine längere, sharing-optimierte Version möchtest (Facebook erlaubt etwa 88 Zeichen vor dem Abschneiden, deutlich mehr als Googles 60). Überschreibe twitter:title, wenn du plattformspezifischen Text für Twitter-native Zielgruppen möchtest.

Open Graph (Sharing)

<meta property="og:type" content="website">
<meta property="og:title" content="Seitentitel für Social Shares">
<meta property="og:description" content="Beschreibung für Social Shares.">
<meta property="og:url" content="https://example.com/seite">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Beispiel">
<meta property="og:locale" content="de_DE">

Die Bildabmessungen sind wichtig. Facebook, LinkedIn und die meisten anderen Open-Graph-Konsumenten erwarten ein 1200 mal 630 Pixel großes Bild bei einem Seitenverhältnis von 1,91:1. Ein kleineres Bild veranlasst die Plattform, auf ein kleines Thumbnail-Layout statt auf eine Hero-Card zurückzugreifen. Ein Bild mit falschem Seitenverhältnis wird zugeschnitten, was oft Text oder Gesichter abschneidet. Die Breiten- und Höhenangaben ermöglichen es Crawlern, Platz zu reservieren und asynchron zu laden, wodurch ein Layout-Shift in der Vorschau vermieden wird.

Twitter Card (Sharing)

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Seitentitel für Twitter">
<meta name="twitter:description" content="Beschreibung für Twitter.">
<meta name="twitter:image" content="https://example.com/twitter.png">
<meta name="twitter:site" content="@deinhandle">

Wähle summary_large_image für ein Hero-Layout (die meisten Marketing-Seiten und Artikel) und summary für eine kompakte Karte (leichtgewichtige Inhalte). Twitter bevorzugt ein 1200 mal 675 Pixel großes Bild, etwas breiter als Open Graphs 1200 mal 630. Wenn du dein Open-Graph-Bild wiederverwendest, funktioniert das trotzdem, aber ein Twitter-spezifisches Bild füllt die Karte ohne Letterboxing.

Branding und UX (oft vergessen)

<meta name="theme-color" content="#0F172A">
<meta name="color-scheme" content="light dark">
<meta name="format-detection" content="telephone=no">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

theme-color färbt die Browser-Oberfläche auf Android und die Statusleiste in PWAs ein. color-scheme teilt dem Browser mit, Scrollbalken und Formularelemente im passenden Dark- oder Light-Mode zu rendern. format-detection mit telephone=no verhindert, dass iOS Safari telefonnummernähnliche Ziffernfolgen automatisch als tel:-Links verlinkt – das ist entscheidend für Rechnungsnummern, Bestellnummern und jede sieben- bis elfstellige Zahl, die keine Telefonnummer ist. Die Icon-Links decken Desktop-Tab-Favicons, iOS-Homescreen-Icons und adaptive Android-Icons ab.

Häufige Fehler, die SEO und Sharing schaden

Falscher Canonical, der auf eine andere Seite zeigt. Ein Canonical-Tag, das auf eine andere URL zeigt, teilt Google mit, dass die aktuelle URL ein Duplikat ist, und konsolidiert Signale auf das Ziel. Seiten, die ranken sollten, verschwinden aus der Suche, weil ihr Canonical versehentlich woanders hinzeigt. Immer selbst referenzieren, es sei denn, die Seite ist tatsächlich ein Duplikat.

Fehlendes oder zu kleines og:image. Ein fehlendes og:image lässt die Plattform willkürlich etwas aus dem Body auswählen, oft ein Logo oder Icon. Ein zu kleines Bild (unter 600 Pixel breit) stuft die Vorschau auf ein kleines Thumbnail-Layout herab. Beides schadet dem Engagement bei geteilten Links und ist einfach zu beheben.

Identische Descriptions über alle Seiten. Vorlagen-Descriptions, die sich nur im Seitentitel unterscheiden, signalisieren wenig Aufwand. Google überschreibt sie routinemäßig mit Text aus dem Body, was bedeutet, dass die Description, die du mühsam formuliert hast, nie erscheint. Jede Seite braucht eine einzigartige Description, die auf die Absicht dieser Seite zugeschnitten ist.

Zu spät deklariertes Charset. Ein charset-Tag unterhalb der ersten 1024 Bytes löst in einigen Browsern einen Encoding-Neustart aus. Das Ergebnis ist ein kurzes Aufblitzen falsch kodierter Zeichen, bevor die Seite neu gezeichnet wird. Platziere <meta charset="utf-8"> immer als erstes Kind des Head.

Robots-Meta und X-Robots-Tag-Header nicht synchron. Wenn der HTTP-Header noindex setzt und das Meta-Tag index, gewinnt die restriktivere Direktive, und die Seite wird nicht indexiert. Prüfe beide Ebenen in einem einzigen Durchgang, wenn eine Seite mysteröiserweise nicht in der Suche erscheint.

Theme-color auf Weiß bei einer dunkel gestalteten Website. Das Standardverhalten des Browsers färbt die Adressleiste auf den meisten Android-Geräten weiß. Eine Website mit einem dunklen Navy-Header und einer weißen Adressleiste wirkt auf Mobilgeräten kaputt. theme-color auf die Markenfarbe zu setzen ist eine einzeilige Änderung, die die wahrgenommene Qualität spürbar verbessert.

Twitter Card ohne site oder creator. Fehlendes twitter:site und twitter:creator entfernt die Attributionszeile aus der Karte und verhindert, dass Twitter Shares deinem Account zuordnet. Beide Felder nehmen einen Twitter-Handle inklusive @ und sollten auf jeder Seite gesetzt sein.

Randfälle, die niemand erwähnt

Meta-Tags interagieren mit HTTP-Response-Headern, und die Header gewinnen in der Regel. X-Robots-Tag: noindex in der Antwort überschreibt jedes <meta name="robots" content="index"> auf der Seite. Content-Security-Policy-Header können das Laden von og:image im Vorschau-Crawler blockieren, besonders wenn das Bild auf einer anderen Domain liegt. Referrer-Policy auf no-referrer gesetzt entfernt den Referrer, den Open-Graph-Crawler manchmal zur Verifizierung der Anfrage verwenden – das veranlasst manche Plattformen, die Vorschau überhaupt nicht zu rendern. Wenn Meta-Tags im Quellcode korrekt erscheinen, die Seite sich aber nicht wie erwartet verhält, prüfe als nächstes die Response-Header.

Verwandte Tools