Meta-Tags richtig setzen

Der komplette Guide zu HTML Meta-Tags: Title, Description, Viewport, Robots, Canonical, Open Graph und Twitter Cards. Mit Zeichenlimits und Beispielen.

Was sind Meta-Tags?

Meta-Tags sind HTML-Elemente im <head>-Bereich einer Seite, die Suchmaschinen und sozialen Netzwerken Informationen über den Seiteninhalt liefern. Sie sind für Besucher nicht sichtbar, beeinflussen aber maßgeblich, wie deine Seite in Suchergebnissen und geteilten Links erscheint.

Title-Tag

Der Title-Tag ist der wichtigste Meta-Tag für SEO. Er erscheint als klickbare Überschrift in den Suchergebnissen und im Browser-Tab.

Regeln für gute Title-Tags

• Länge: 50–60 Zeichen. Google schneidet bei etwa 580 Pixeln Breite ab, was je nach Zeichenbreite 50–60 Zeichen entspricht.
• Keyword am Anfang: Platziere das Haupt-Keyword möglichst weit vorne.
• Einzigartig: Jede Seite braucht einen individuellen Title. Doppelte Titles verwässern die SEO-Wirkung.
• Brand am Ende: Füge den Markennamen am Ende hinzu, getrennt durch „—" oder „|".
• Ansprechend formulieren: Der Title soll Nutzer zum Klicken motivieren. Nutze Zahlen, Fragen oder aktive Verben.

<title>Meta-Tags richtig setzen — Der komplette Guide | PageScore</title>

Häufige Fehler: Keyword-Stuffing („SEO SEO Guide SEO Tipps"), zu generische Titles („Startseite"), fehlende Titles.

Meta-Description

Die Meta-Description beeinflusst nicht direkt das Ranking, aber sie ist entscheidend für die Klickrate (CTR) in den Suchergebnissen. Eine gute Description kann die CTR um 5–10% steigern.

Regeln für gute Meta-Descriptions

• Länge: 120–160 Zeichen. Google zeigt auf dem Desktop etwa 155 Zeichen, auf Mobilgeräten etwa 120 Zeichen.
• Call-to-Action: Verwende aktive Formulierungen wie „Jetzt erfahren", „Kostenlos testen" oder „So geht's".
• Keyword einbauen: Suchbegriffe in der Description werden fett dargestellt, was die Aufmerksamkeit erhöht.
• Einzigartig: Jede Seite braucht eine individuelle Description.
• Inhalt zusammenfassen: Gib einen präzisen Überblick über den Seiteninhalt.

<meta name="description" content="Der komplette Guide zu HTML Meta-Tags: Title, Description, Viewport, Open Graph und mehr. Mit Zeichenlimits, Beispielen und häufigen Fehlern.">

Viewport-Tag

Der Viewport-Tag ist essentiell für die mobile Darstellung. Ohne ihn rendert der Browser die Seite in der Desktop-Breite und skaliert sie herunter.

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

Dieser Tag sollte auf jeder Seite vorhanden sein. Vermeide maximum-scale=1 oder user-scalable=no, da diese das Zoomen verhindern und die Barrierefreiheit beeinträchtigen.

Robots-Tag

Der Robots-Tag steuert, wie Suchmaschinen mit einer Seite umgehen sollen.

<!-- Standard: Indexieren und Links folgen -->
<meta name="robots" content="index, follow">

<!-- Seite nicht indexieren -->
<meta name="robots" content="noindex, follow">

<!-- Kein Snippet in Suchergebnissen -->
<meta name="robots" content="index, nosnippet">

<!-- Snippet-Länge begrenzen -->
<meta name="robots" content="max-snippet:160, max-image-preview:large">

• index/noindex: Soll die Seite in den Suchergebnissen erscheinen?
• follow/nofollow: Sollen Links auf der Seite verfolgt werden?
• nosnippet: Kein Text-Snippet in den Suchergebnissen zeigen.
• max-snippet: Maximale Zeichenanzahl für das Snippet.
• max-image-preview: Maximale Bildgröße in der Vorschau (none, standard, large).

Achtung bei KI-Suchen: Laut Google gelten noindex, nosnippet, max-snippet und data-nosnippet auch für AI Overviews und AI Mode. Wer Snippets verbietet, kann dort nicht zitiert werden. Mehr dazu im GEO-Check und im Guide zu strukturierten Daten für KI-Suche.

Canonical-Tag

Der Canonical-Tag zeigt Suchmaschinen die bevorzugte URL-Version einer Seite. Das ist wichtig, wenn die gleiche Seite unter mehreren URLs erreichbar ist (mit/ohne www, mit/ohne Trailing Slash, mit Parametern).

<link rel="canonical" href="https://pagescore.de/meta-tags-guide">

• Verwende immer absolute URLs (mit https://).
• Jede Seite sollte genau einen Canonical-Tag haben.
• Der Canonical sollte auf sich selbst zeigen (self-referencing).
• Bei paginierten Inhalten: Jede Seite zeigt auf sich selbst, nicht auf Seite 1.

Open Graph Tags

Open Graph Tags bestimmen, wie deine Seite aussieht, wenn sie auf Facebook, LinkedIn, WhatsApp oder anderen Plattformen geteilt wird.

<meta property="og:title" content="Meta-Tags richtig setzen — PageScore">
<meta property="og:description" content="Der komplette Guide zu HTML Meta-Tags mit Beispielen und Best Practices.">
<meta property="og:image" content="https://pagescore.de/images/meta-tags-guide-og.jpg">
<meta property="og:url" content="https://pagescore.de/meta-tags-guide">
<meta property="og:type" content="article">
<meta property="og:site_name" content="PageScore">
<meta property="og:locale" content="de_DE">

Empfehlungen für das OG-Bild

• Größe: 1200 x 630 Pixel (Seitenverhältnis 1.91:1).
• Format: JPG oder PNG, unter 1 MB.
• Inhalt: Ansprechend, mit lesbarem Text und klarem Branding.

Twitter Card Tags

Twitter (X) verwendet eigene Meta-Tags für die Darstellung geteilter Links. Wenn keine Twitter-Tags vorhanden sind, fallen die meisten Plattformen auf Open Graph Tags zurück.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Meta-Tags richtig setzen">
<meta name="twitter:description" content="Der komplette Guide zu HTML Meta-Tags.">
<meta name="twitter:image" content="https://pagescore.de/images/meta-tags-guide-og.jpg">

• summary: Kleines Vorschaubild links, Text rechts.
• summary_large_image: Großes Bild über dem Text — bevorzugt für Artikel.

Hreflang-Tags

Wenn deine Website in mehreren Sprachen verfügbar ist, helfen Hreflang-Tags Suchmaschinen, die richtige Sprachversion für jeden Nutzer anzuzeigen.

<link rel="alternate" hreflang="de" href="https://pagescore.de/meta-tags-guide">
<link rel="alternate" hreflang="en" href="https://pagescore.de/en/meta-tags-guide">
<link rel="alternate" hreflang="x-default" href="https://pagescore.de/meta-tags-guide">

Checkliste für Meta-Tags

• ☑ Einzigartiger Title-Tag (50–60 Zeichen) auf jeder Seite
• ☑ Individuelle Meta-Description (120–160 Zeichen) auf jeder Seite
• ☑ Viewport-Tag für Mobile
• ☑ Canonical-Tag (self-referencing)
• ☑ Robots-Tag korrekt gesetzt
• ☑ Open Graph Tags für Social Sharing
• ☑ Twitter Card Tags
• ☑ Hreflang-Tags für mehrsprachige Seiten
• ☑ Structured Data (JSON-LD) für Rich Snippets