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.
Was ist eine Meta Description?
Eine Meta Description ist ein HTML-Meta-Tag im Kopfbereich einer Seite, das deren Inhalt in ein bis zwei Sätzen zusammenfasst. Google zeigt diesen Text häufig als Beschreibung unter dem Titel in den Suchergebnissen an. Die Meta Description ist kein direkter Rankingfaktor, beeinflusst aber die Klickrate stark, weil Nutzer anhand dieses Ausschnitts entscheiden, ob ein Ergebnis zu ihrer Suche passt. Optimal sind 120 bis 155 Zeichen, danach schneidet Google den Text ab. Eine gute Meta Description enthält das wichtigste Keyword, benennt den konkreten Nutzen der Seite und endet mit einer klaren Handlungsaufforderung wie „Jetzt anfragen". Fehlt die Angabe oder passt sie nicht zur Suchanfrage, erzeugt Google eigenständig einen Ausschnitt aus dem Seitentext, der oft weniger überzeugend wirkt. Pro Seite sollte genau eine einzigartige Meta Description gepflegt werden, denn doppelte Beschreibungen über mehrere URLs schwächen die Klickrate und erschweren Google die Zuordnung.
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.
In der Praxis bei PAKU Media
Bei jeder Website aus Bielefeld pflegen wir Title, Meta-Description, Open Graph und Twitter Cards individuell pro Seite. Keine generischen Vorlagen, keine vergessenen Canonicals. Mehr dazu in unserer SEO-Beratung.