Meta-Tags: Die wichtigsten Angaben im Überblick
Meta-Tags stehen im head und liefern Informationen über die Seite: an den Browser, an Suchmaschinen, an soziale Netzwerke. Sie haben kein schließendes Tag und folgen fast immer dem Muster name plus content. Hier sind die, die du wirklich brauchst.
Die Pflichtangaben
HTML-Code
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">charset legt die Zeichenkodierung fest. UTF-8 ist heute der Standard und kann alles darstellen, von Umlauten bis zu Emoji. viewport sagt Mobilbrowsern dass die Seite für ihre Bildschirmbreite gedacht ist. Fehlt die Angabe, zeigen Handys die Seite winzig verkleinert an, als wäre sie ein Desktop-Screenshot. Beide gehören in jedes Dokument, ohne Ausnahme.
Die description
<meta name="description" content="Einfache Kuchenrezepte
mit normalen Zutaten, Schritt für Schritt erklärt.">Die description ist der Kurztext den Suchmaschinen gern unter dem Seitentitel im Suchergebnis anzeigen. Sie beeinflusst das Ranking nicht direkt, aber sie entscheidet mit ob jemand klickt. Schreib für jede Seite eine eigene, ein bis zwei ehrliche Sätze darüber was die Seite bietet. Länger als etwa 150 bis 160 Zeichen sollte sie nicht sein, sonst wird sie abgeschnittn.
robots: Anweisungen für Suchmaschinen
<meta name="robots" content="noindex,follow">Mit dem robots-Tag steuerst du ob eine Seite in den Suchindex soll. noindex heißt: nicht in die Suchergebnisse aufnehmen, follow heißt: den Links auf der Seite trotzdem folgen. Wer nichts angibt, bekommt das Standardverhalten index,follow, deshalb kann man das Tag auf normalen Seiten auch einfach Weglassen.
Open Graph: Vorschau beim Teilen
<meta property="og:title" content="Kuchenrezepte für Anfänger">
<meta property="og:description" content="Rezepte die immer gelingen.">Open-Graph-Angaben (erkennbar an property statt name) bestimmen wie die Seite aussieht, wenn jemand sie in einem Messenger oder sozialen Netzwerk teilt: welcher Titel, welcher Text, welches Vorschaubild erscheint. Für private Projekte optional, für alles was geteilt werden soll sehr sinnvoll.
Und der Keywords-Meta-Tag?
<meta name="keywords" ...> war in den 1990ern mal wichtig und wurde so hemmungslos mit Suchbegriffen vollgestopft, dass Suchmaschinen ihn seit vielen Jahren schlicht ignorieren. Du kannst ihn dir sparen. Ein schönes Stück Webgeschichte, mehr solcher Geschichten gibt es im Retro-Web.
Verwandt: Der head-Bereich · Das Grundgerüst · Meta-Tags mit KI erstellen