Der komplette Guide zu HTML Meta-Tags: Title, Description, Viewport, Robots, Canonical, Open Graph und Twitter Cards. Mit Zeichenlimits und Beispielen.
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.
Der Title-Tag ist der wichtigste Meta-Tag für SEO. Er erscheint als klickbare Überschrift in den Suchergebnissen und im Browser-Tab.
<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.
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.
<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.">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.
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">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">https://).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">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">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?lang=de">
<link rel="alternate" hreflang="en" href="https://pagescore.de/meta-tags-guide?lang=en">
<link rel="alternate" hreflang="x-default" href="https://pagescore.de/meta-tags-guide">Prüfe die Meta-Tags deiner Website automatisch mit PageScore — kostenlos und in Sekunden.