DevPanicZone Logo DevPanicZone! Cheatsheets.

HTML Meta-Tags & SEO

Meta-Tags liefern Suchmaschinen und Browsern wichtige Informationen über deine Webseite - sie sind unsichtbar für Besucher, aber entscheidend für SEO, Darstellung und Performance.

Was sind Meta-Tags?

Meta-Tags stehen im <head> -Bereich eines HTML-Dokuments und beschreiben Eigenschaften oder Einstellungen der Seite. Sie werden von Browsern, Suchmaschinen und sozialen Netzwerken ausgelesen, aber nicht direkt angezeigt.

HTML 
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Kurze Seitenbeschreibung für Suchmaschinen.">
</head>
Hinweis zu SEO & Darstellung

Die description beeinflusst nicht direkt das Ranking, aber die Klickrate - sie erscheint oft als Textauszug in den Suchergebnissen. Achte auf klare, aktive Sprache und eine Länge von etwa 150 - 160 Zeichen.

Wichtige Standard-Meta-Tags

Einige Meta-Tags sollten in keinem HTML-Dokument fehlen:

  • charset - definiert die Zeichencodierung (z. B. UTF-8).
  • viewport - sorgt für responsive Darstellung auf mobilen Geräten.
  • description - kurze Seitenbeschreibung für Suchmaschinen.
  • robots - steuert, ob Suchmaschinen die Seite indexieren dürfen.
HTML 
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Hier steht eine kurze, prägnante Beschreibung.">
<meta name="robots" content="index, follow">

Angaben im <head>

meta -Tags im Detail - neben den meta -Tags gibt es weitere Angaben im head

<meta charset="UTF-8"> 1

Zeichensatz, europäisch = UTF-8.

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

Viewport Skalierung, Standard.

initial-scale=1.0 bedeutet, dass die Website beim Laden im Maßstab 1:1 angezeigt wird, egal welches Monitorformat

<title>Titel der Website</title> 3

Seitentitel, sichtbar im Browsertab.

<meta name="description" content="Beschreibung der Seite"> 4

Die Beschreibung der Seite ist nicht sofort auf der Seite selbst sichtbar, sie erscheint im Suchergebnis bei Google.

<meta name="author" content="DevPanicZone"> 5

Autor der Website, z. B. Firmenname.

<link rel="icon" type="image/x-icon" href="../img/favicon.png"> 6

Website Icon / Favicon im Browsertab.

<meta name="robots" content="index, follow"> 7

Indexierung für Crawler.

  • index, follow Suchmaschinen werden gebeten, diesem Link zu folgen.
  • noindex, nofollow z. B. interne Tests oder Vorschauen, Datenschutzerklärung, Hilfeseiten nur für für Kunden, duplicate content.
  • noindex, follow Seite soll nicht in Suchergebnissen erscheinen, aber dem Index soll gefolgt werden, z.B internes Inhaltsverzeichnis.
  • index, nofollow Seite, die in den Suchergebnissen erscheinen soll, aber externen Links soll nicht gefolgt werden. z. B. Kommentare in einem Blog, die externe Links enthalten.
<link rel="stylesheet" href="../css/style.css"> 8

Link zum Stylesheet.

Meta-Tags für Social Media

Für soziale Netzwerke wie Facebook, LinkedIn oder X (Twitter) gibt es spezielle Tags, damit beim Teilen deiner Seite automatisch der Titel, das Bild und die Beschreibung korrekt angezeigt werden.

HTML 
<meta property="og:title" content="Seitentitel für Social Media">
<meta property="og:description" content="Beschreibung für geteilte Beiträge.">
<meta property="og:image" content="bild.jpg">
<meta name="twitter:card" content="summary_large_image">
Tipp: Einheitliche Darstellung

Wenn du die gleichen Inhalte auf mehreren Plattformen teilst, lohnt sich ein einheitlicher Titel und ein ansprechendes Vorschaubild mit klarer Beschriftung.

Erweiterte Social-Media-Meta-Tags

Mit erweiterten Open-Graph- und Twitter-Meta-Tags kannst du steuern, wie deine Seite in sozialen Netzwerken angezeigt wird. Diese Tags verbessern die Vorschau, sorgen für einheitliches Branding und mehr Klicks aufgeteilte Inhalte.

Open Graph (Facebook, LinkedIn & Co.)

Open Graph stammt ursprünglich von Facebook, wird aber auch von anderen Plattformen wie LinkedIn oder WhatsApp genutzt. Die wichtigsten Attribute sind:

  • og:title - Titel des Beitrags
  • og:description - kurze Beschreibung des Inhalts
  • og:image - Vorschaubild (idealerweise 1200 × 630 px)
  • og:url - URL der Seite
  • og:type - Typ des Inhalts (z. B. „website“ oder „article“)
HTML 
<meta property="og:title" content="HTML Meta-Tags erklärt">
<meta property="og:description" content="Was Meta-Tags sind und wie du sie optimal nutzt.">
<meta property="og:image" content="meta-tags-vorschau.jpg">
<meta property="og:url" content="https://www.deine-seite.de/meta-tags">
<meta property="og:type" content="article">
Hinweis zu Bildern

Das Bild sollte mindestens 1200 × 628 px groß sein und ein Seitenverhältnis von 1,91:1 haben, damit es auf allen Plattformen korrekt angezeigt wird. Verwende am besten JPG oder PNG, nicht WebP, da nicht alle Netzwerke es unterstützen.

Twitter Cards

Twitter (heute X) nutzt eigene Meta-Tags, um Vorschaubilder und Texte zu steuern. Die wichtigsten sind:

  • twitter:card - bestimmt den Typ der Karte, z. B. summary_large_image .
  • twitter:title - Titel, ähnlich wie og:title .
  • twitter:description - Beschreibungstext - max. ca. 200 Zeichen.
  • twitter:image - Vorschaubild - mind. 600 × 335 px empfohlen.
  • twitter:site - dein Twitter-Account - z. B. @deinprofil .
HTML 
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML Meta-Tags erklärt">
<meta name="twitter:description" content="Was Meta-Tags sind und wie sie Suchmaschinen helfen.">
<meta name="twitter:image" content="meta-tags-vorschau.jpg">
<meta name="twitter:site" content="@deinprofil">
Tipp zur Kontrolle

Du kannst mit Tools wie dem Twitter Card Validator oder dem Facebook Sharing Debugger prüfen, wie deine Vorschau aussieht. So erkennst du auch Caching-Probleme oder fehlende Tags.

Technische Meta-Tags

Einige Meta-Tags steuern das Verhalten des Browsers oder die Kompatibilität:

  • http-equiv="refresh" - automatische Weiterleitung oder Seitenaktualisierung.
  • http-equiv="X-UA-Compatible" - Kompatibilitätsmodus für ältere Internet Explorer-Versionen.
  • theme-color - bestimmt die Farbe der Adressleiste auf mobilen Geräten.
HTML 
<meta http-equiv="refresh" content="30">
<meta name="theme-color" content="#f7a600">

Der Canonical Tag - Duplicate Content vermeiden

Der canonical -Tag teilt Suchmaschinen mit, welche URL die "Hauptversion" einer Seite ist. Das ist wichtig, wenn derselbe Inhalt unter mehreren URLs erreichbar ist.

HTML 
<!-- Auf https://www.beispiel.de/artikel -->
<link rel="canonical" href="https://www.beispiel.de/artikel">

Canonical bei URL-Varianten

Wenn derselbe Inhalt unter mehreren URLs erreichbar ist, verweisen alle Varianten auf dieselbe Haupt-URL:

HTML 
<!-- Alle diese Seiten haben denselben Canonical: -->

<!-- Hauptseite: beispiel.de/artikel -->
<link rel="canonical" href="https://www.beispiel.de/artikel">

<!-- Variante mit Tracking-Parameter -->
<!-- beispiel.de/artikel?ref=newsletter -->
<link rel="canonical" href="https://www.beispiel.de/artikel">

<!-- Variante mit Session-ID -->
<!-- beispiel.de/artikel?sessionid=abc123 -->
<link rel="canonical" href="https://www.beispiel.de/artikel">

Wann brauchst du einen Canonical Tag?

  • URL-Varianten: beispiel.de/seite vs. beispiel.de/seite/ vs. www.beispiel.de/seite
  • Session-Parameter: ?sessionid=123 oder ?ref=newsletter
  • Sortierung/Filter: /produkte?sort=preis vs. /produkte?sort=name
  • HTTP vs. HTTPS: Beide Versionen erreichbar
  • Syndizierte Inhalte: Dein Artikel wird auf anderen Seiten veröffentlicht
Kein Canonical nötig bei

Unterschiedliche Seiten mit ähnlichen Elementen (z.B. in meinem Fall gleiches Code-Beispiel in Tutorial und Cheatsheet) sind kein Duplicate Content. Der Gesamtkontext zählt - jede Seite bekommt ihren eigenen self-referencing Canonical.

Wichtig
  • Immer absolute URLs verwenden (mit https:// )
  • Jede Seite sollte auf sich selbst verweisen (self-referencing canonical)
  • Auch bei paginierten Seiten: Jede Seite verweist auf sich selbst, nicht alle auf Seite 1
  • Der Canonical ist ein Hinweis , keine Anweisung - Google kann ihn ignorieren
HTML 
<!-- Self-referencing Canonical (Best Practice) -->
<head>
    <link rel="canonical" href="https://www.beispiel.de/aktueller-artikel">
</head>

<!-- Bei paginierten Seiten -->
<!-- Seite 1: verweist auf sich selbst -->
<link rel="canonical" href="https://www.beispiel.de/blog">

<!-- Seite 2, 3, etc.: verweisen auf sich selbst, NICHT auf Seite 1! -->
<link rel="canonical" href="https://www.beispiel.de/blog?page=2">

Strukturierte Daten - Rich Snippets in Google

Neben Meta-Tags gibt es strukturierte Daten (Schema.org / JSON-LD), die Google noch mehr Kontext über deine Seite geben. Sie ermöglichen Rich Snippets wie Sternebewertungen, Rezepte, FAQs oder Event-Daten in den Suchergebnissen.

HTML 
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "HTML Meta-Tags erklärt",
    "author": {
        "@type": "Person",
        "name": "DevPanicZone"
    },
    "datePublished": "2025-01-15",
    "description": "Ein umfassender Guide zu Meta-Tags."
}
</script>
Weiterführende Ressourcen

Häufige Fehler bei Meta-Tags

Vermeiden
  • Gleiche description auf allen Seiten
  • description zu kurz (<50 Zeichen) oder zu lang (>160)
  • keywords mit Keyword-Stuffing füllen
  • Fehlender viewport -Tag (Mobile-Probleme)
  • Relative URLs bei og:image oder canonical
  • noindex auf wichtigen Seiten vergessen
  • Doppelte oder widersprüchliche Meta-Tags
Best Practices
  • Jede Seite: einzigartige description
  • 150-160 Zeichen, aktiv formuliert
  • keywords weglassen oder minimal halten
  • viewport immer setzen
  • Absolute URLs mit https:// verwenden
  • robots bewusst einsetzen
  • Mit Validierungstools prüfen

Übersicht wichtiger Meta-Tags

Zum schnellen Nachsehen: Hier findest du die wichtigsten Meta-Tags mit ihrem Zweck und einem typischen Beispielwert.

Attribut Bedeutung Beispielwert
charset Zeichencodierung der Seite UTF-8
viewport Steuert die Darstellung auf mobilen Geräten width=device-width, initial-scale=1.0
name="description" Kurze Seitenbeschreibung für Suchmaschinen "Meine Website über Webentwicklung"
name="keywords" Veraltetes Feld für Schlagwörter (kaum noch relevant) "HTML, CSS, Webdesign"
name="author" Name des Autors oder Unternehmens "Bianca Schlich"
name="robots" Steuert, ob Suchmaschinen die Seite indexieren dürfen "index, follow"
property="og:title" Titel für Social-Media-Vorschauen "HTML Meta-Tags erklärt"
property="og:image" Vorschaubild für Social Media "vorschau.jpg"
name="twitter:card" Darstellungsart bei Twitter "summary_large_image"
http-equiv="refresh" Automatische Weiterleitung oder Aktualisierung "5; url=https://www.neue-seite.de"
Tipp

Halte deine Meta-Tags so minimal wie möglich - nur das, was du wirklich brauchst. Viele alte oder doppelte Angaben - wie keywords - können sogar kontraproduktiv wirken und zu Duplicate Content -Problemen führen.

→ Zum Tutorial Duplicate Content

Vollständiges Meta-Tags Template

Hier ein Copy-Paste-fertiges Template mit allen wichtigen Meta-Tags für eine typische Webseite:

HTML 
<head>
    <!-- Basis -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- SEO -->
    <title>Seitentitel - Markenname</title>
    <meta name="description" content="Kurze, prägnante Beschreibung der Seite (150-160 Zeichen).">
    <meta name="author" content="Dein Name oder Firma">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://www.beispiel.de/aktuelle-seite">
    
    <!-- Open Graph (Facebook, LinkedIn, WhatsApp) -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="Seitentitel für Social Media">
    <meta property="og:description" content="Beschreibung für geteilte Beiträge.">
    <meta property="og:image" content="https://www.beispiel.de/images/og-preview.jpg">
    <meta property="og:url" content="https://www.beispiel.de/aktuelle-seite">
    <meta property="og:site_name" content="Markenname">
    
    <!-- Twitter Cards -->
    <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://www.beispiel.de/images/twitter-preview.jpg">
    <meta name="twitter:site" content="@deinprofil">
    
    <!-- Technisch -->
    <meta name="theme-color" content="#4a90d9">
    
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <link rel="icon" type="image/png" href="/favicon.png">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    
    <!-- Stylesheet -->
    <link rel="stylesheet" href="/css/style.css">
</head>
Checkliste vor dem Launch
  • ☐ Jede Seite hat einen einzigartigen title und description
  • ☐ og:image ist mindestens 1200×630px und als absolute URL angegeben
  • ☐ canonical zeigt auf die korrekte URL
  • ☐ robots ist auf Produktiv-Seiten auf index, follow
  • ☐ Mit Facebook Debugger und Twitter Validator getestet

Teste es selbst

Wende das Gelernte direkt an - probiere den Code aus dem Tutorial aus oder experimentiere mit eigenen Ideen.

Editor öffnen

Mehr aus HTML

Tutorials werden geladen...