Was sind Meta Tags? Einfach erklärt

Was sind Meta Tags einfach erklärt? Meta Tags sind kurze Angaben im Quelltext einer Webseite, die der Besucher normalerweise nicht sieht. Sie stehen im Kopfbereich der Seite, dem head, und richten sich vor allem an Suchmaschinen und Browser. Man kann sie sich wie ein Etikett vorstellen, das beschreibt, worum es auf der Seite geht und wie sie dargestellt werden soll. Erst dieses Etikett sorgt dafür, dass eine Seite im Suchergebnis sauber erscheint und auf dem Handy richtig skaliert.

Was sind Meta Tags? Einfach erklÃ¤rt: Browserfenster mit einer Reihe haengender Tag-Kaertchen (Bild, Zahnrad, Schild, Stern, Code) im verborgenen Kopfb

Wo Meta Tags stehen

Jede HTML-Seite hat einen Kopfbereich, im Code head genannt. Dort sammeln sich Angaben, die nicht direkt auf der Seite erscheinen. Genau hier liegen die Meta Tags. Sie tauchen nicht im sichtbaren Text auf, sondern arbeiten im Hintergrund und geben Maschinen die nötigen Hinweise.

Schaust du dir den Quelltext einer Seite an, findest du dort Zeilen, die mit meta beginnen. Den Quelltext öffnest du in jedem Browser mit einem Rechtsklick und der Funktion Seitenquelltext anzeigen. So ein head sieht in einfacher Form etwa aus wie die folgenden vier Zeilen, hier zur besseren Lesbarkeit untereinander beschrieben:

meta charset="utf-8" legt die Zeichenkodierung fest
meta name="viewport" content="width=device-width, initial-scale=1" steuert die Darstellung auf dem Handy
title mit dem Seitentitel, der im Suchergebnis als Überschrift erscheint
meta name="description" content="..." mit der kurzen Beschreibung unter dem Titel

Die wichtigsten Meta Tags

Es gibt viele Meta Tags, aber nur wenige sind für Einsteiger wirklich wichtig. Die folgende Tabelle stellt sie kurz vor.

Angabe	Aufgabe
title	Titel der Seite, erscheint als Überschrift im Suchergebnis
description	kurze Beschreibung unter dem Titel
charset	legt die Zeichenkodierung fest, üblich ist utf-8
viewport	steuert die Darstellung auf dem Handy

Der Titel ist streng genommen kein Meta Tag, wird aber meist im selben Atemzug genannt, weil er direkt daneben steht und eng zusammengehört. Mehr zu seiner Wirkung steht im Artikel Title-Tag bei Bildern und zur Beschreibung unter Was ist die Meta Description. Charset und viewport sind technische Angaben, die fast jede Seite braucht. Fehlt das charset oder steht eine falsche Kodierung darin, werden Umlaute schnell zu kryptischen Zeichen wie Ã¤ statt ä.

Tags für Fortgeschrittene

Über den Standardkanon hinaus gibt es Angaben, die erst dann interessant werden, wenn du Seiten gezielt steuern oder teilen willst. Sie sind kein Pflichtprogramm, lösen aber konkrete Aufgaben.

Angabe	Wofür sie gut ist
Open Graph (og:title, og:image)	bestimmt Titel und Vorschaubild, wenn jemand die Seite in sozialen Medien teilt
robots noindex	weist Suchmaschinen an, eine Seite nicht in den Index aufzunehmen
canonical	nennt bei ähnlichen Seiten die eine maßgebliche Adresse

Open Graph ist bei einer Bildergalerie nützlich: Mit og:image legst du fest, welches Foto als Vorschau erscheint, wenn jemand den Link zu einem Album teilt. Ohne diese Angabe wählt das Netzwerk irgendein Bild oder gar keines. Das robots-noindex setzt du dagegen auf Seiten, die nicht in der Suche auftauchen sollen, etwa eine interne Vorschau. Mit canonical sagst du der Suchmaschine, welche von mehreren ähnlichen Adressen die richtige ist. Ob deine Seiten sauber im Index landen, prüfst du später mit der Google Search Console.

Wer die Meta Tags pflegt

Bei einer fertigen Galerie-Software musst du die Meta Tags oft gar nicht selbst in den Quelltext schreiben. Stattdessen gibst du Titel und Beschreibung in der Verwaltung ein, und das Script baut die passenden Zeilen automatisch ein. Bei einer Bildergalerie kannst du so jeder Kategorie eine eigene Beschreibung geben: Eine Kategorie mit Landschaftsfotos bekommt dann eine andere als eine mit Tierbildern. Das vermeidet doppelte Titel auf vielen Seiten, die es der Suchmaschine schwer machen, die richtige Seite zu zeigen. Nimm am besten den Namen der Kategorie in den Title auf, dann ist auf einen Blick klar, was den Besucher erwartet.

Was du nicht übertreiben solltest

Früher haben manche Seiten lange Listen aus Stichwörtern in einem keywords-Tag gefüllt. Das wertet Google heute nicht mehr aus, du kannst es weglassen. Konzentriere dich auf einen guten Titel und eine ehrliche Beschreibung, das bringt mehr als viele leere Angaben. Auch zu viele technische Tags sind kein Vorteil. Wenige, richtig gesetzte Angaben reichen vollkommen aus. Wer Bilder zusätzlich auszeichnen will, schaut sich besser strukturierte Daten für Bilder an, die über Meta Tags hinausgehen.

Häufige Fragen

Rund um die Angaben im head-Bereich kommen immer wieder dieselben Fragen, hier die wichtigsten kurz beantwortet:

Welche Meta Tags braucht wirklich jede Seite?

Praktisch jede Seite braucht charset für die Zeichenkodierung und viewport für die Handy-Darstellung, dazu einen guten title und eine description. Fehlt das charset (üblich ist UTF-8), werden Umlaute schnell zu kryptischen Zeichen.

Brauche ich noch das keywords-Tag?

Nein, das keywords-Tag mit langen Stichwortlisten wertet Google heute nicht mehr aus, du kannst es weglassen. Konzentriere dich auf einen treffenden Titel und eine ehrliche Description, das bringt mehr als viele leere Angaben.

Wozu ist Open Graph gut?

Open-Graph-Tags steuern, mit welchem Titel und Bild ein Link in sozialen Medien wie Facebook erscheint, wenn jemand deine Seite teilt. Wer einzelne Seiten gezielt vor Suchmaschinen verstecken will, nutzt dafür ein robots-Tag mit dem Wert noindex.