Meta-Tags sind HTML-Elemente im <head>-Bereich einer Website, die Metadaten über die Seite bereitstellen. Für Nutzer unsichtbar, spielen sie eine zentrale Rolle für Suchmaschinen, soziale Netzwerke und Browser.
Die wichtigsten Meta-Tags
Title-Tag
Technisch ein eigenes HTML-Element (<title>), nicht ein Meta-Tag – aber der wichtigste SEO-Faktor. Der Title erscheint als klickbare Überschrift in den Suchergebnissen und im Browser-Tab. Optimal: 50-60 Zeichen, Keyword vorne, Markenname hinten.
Meta-Description
Die Beschreibung der Seite, die in den Suchergebnissen unter dem Titel erscheint. Optimal: 120-155 Zeichen. Kein direkter Ranking-Faktor, aber entscheidend für die Klickrate (CTR).
Robots Meta-Tag
Steuert, ob Suchmaschinen die Seite indexieren (index/noindex) und Links folgen (follow/nofollow). Standard ist index, follow. Seiten wie Impressum oder Danke-Seiten können mit noindex von der Indexierung ausgeschlossen werden.
Canonical URL
Definiert die bevorzugte URL einer Seite, wenn derselbe Inhalt unter mehreren URLs erreichbar ist. Verhindert Duplicate Content und bündelt die Link-Autorität.
Viewport Meta-Tag
Essenziell für Responsive Design: <meta name="viewport" content="width=device-width, initial-scale=1"> sorgt dafür, dass die Seite auf Mobilgeräten korrekt skaliert wird.
Open Graph und Twitter Meta-Tags
Open Graph-Tags und Twitter-Card-Tags definieren, wie eine Seite in sozialen Netzwerken dargestellt wird. Sie sind technisch Meta-Tags, bilden aber ein eigenes System mit spezifischen Anforderungen.
Meta-Tags und SEO
Meta-Tags bilden die Grundlage der technischen SEO:
- Title und Description beeinflussen die Klickrate in den Suchergebnissen
- Canonical Tags verhindern Duplicate Content
- Robots-Direktiven steuern die Indexierung
- Hreflang-Tags definieren Sprachversionen für internationale Websites
Meta-Tags in Next.js
Next.js bietet eine elegante Metadata-API: In jedem Page- oder Layout-File können Metadaten als Objekt exportiert werden. Next.js generiert daraus automatisch die korrekten HTML-Meta-Tags, Open Graph-Tags und JSON-LD strukturierte Daten.
Dynamische Metadaten – etwa der Titel eines Blog-Artikels – werden über die generateMetadata-Funktion erzeugt.
Häufige Meta-Tag-Fehler
- Fehlender Title oder Description: Suchmaschinen generieren dann eigene Texte
- Duplicate Titles: Jede Seite braucht einen einzigartigen Title
- Zu lange Meta-Description: Wird in den Suchergebnissen abgeschnitten
- Vergessene Canonical Tags: Führt zu Duplicate-Content-Problemen
- Fehlendes Viewport-Tag: Website ist auf Mobilgeräten nicht nutzbar
Für professionelles Webdesign sind Meta-Tags die unsichtbare Visitenkarte einer Website in Suchmaschinen und sozialen Netzwerken – technisch klein, aber strategisch von großer Bedeutung.