Meta-Tags richtig einsetzen – Suchmaschinenoptimierung
Meta-Tags sind nicht sichtbare Meta-Informationen, die im Kopfbereich (Englisch: Head) die Eigenschaften der Webseite definieren. Der Head-Bereich wird mit <head> eingeleitet und muss mit </head> abgeschlossen werden. Die Meta-Daten sollte man für jede Webseite stets individuell angeben.
Meta-Tags haben immer den gleichen Aufbau. Metadaten werden immer als Eigenschaft / Wert-Paar notiert
<meta name="Eigenschaft" content="Wert">Die wichtigsten Informationen im Head-Bereich (Deutsch: Kopf oder Kopf-Bereich der Webseite) sind:
Title-Tag (Titel der Seite)
Das Title-Tag ist kein Meta-Tag, sondern ein eigenes HTML-Tag, mit dem der Seitentitel definiert wird. Das Title-Tag wird mit <title> eingeleitet und muss mit </title> abgeschlossen werden. Das Title-Tag wird manchmal fälschlicherweise als Meta-Title bezeichnet. Das ist auf seine besondere Bedeutung für das Ranking einer Webseite zurückzuführen. Der Titel sollte für jede Webseite individuell festgelegt werden.
Das Title-Tag muss bei der On-Page Optimierung für jede Webseite berücksichtigt werden. Der Title ist ein wichtiger Rankingfaktor und wird in den Suchergebnissen der Suchmaschinen als klickbare Überschrift angezeigt.
Der Titel dient dazu, den Inhalt der Webseite zu beschreiben. Er wird im Head-Bereich in der Regel vor allen Meta-Tags angegeben. Google und andere Suchmaschinen begrenzen den Titel auf 580 Pixel. Der Titel sollte deshalb inklusive Leerzeichen und notwendige Kommas maximal 55 - 65 Zeichen lang sein.
Besonders für die Suchmaschinenoptimierung (Englisch: Search Engine Optimization, abgekürzt SEO) ist der Titel der Webseite ein wichtiger Faktor.
Meta-Description (Beschreibung der Webseite)
Die Meta-Description (Deutsch: Beschreibung) wird mit dem folgenden Meta-Tag festgelegt:
<meta name="description" content="Beschreibung der Seite">Die Beschreibung der Webseite sollte inklusive Leerzeichen und Satzzeichen maximal 140 - 160 Zeichen lang sein.
Da die Meta-Description als Snippet (Deutsch: Schnipsel) in die Suchmaschinen-Ergebnisseite (SERP für Englisch: Search Engine Result Page) übernommen wird, ist eine sorgfältige und möglichst fehlerfreie Formulierung der Beschreibung zu empfehlen. Punkt und Komma sollten verwendet werden.
Die Meta-Description richtet sich in erster Linie an den Besucher der Webseite. Deshalb sollte sie den Seiteninhalt in leicht verständlicher Sprache beschreiben.
Aufgrund ihrer Bedeutung für Besucher und Suchmaschinen ist die Meta-Description neben dem Seitentitel das wichtigste Meta-Tag für die Suchmaschinenoptimierung.
Laut Google soll jede Webseite eine individuelle Beschreibung haben, die präzise Informationen über den Inhalt der Seite bietet.
Meta-Keywords (Suchbegriffe)
Mit Meta-Keywords (Deutsch: Schlüsselwörter bzw. Suchbegriffe) können relevante Suchbegriffe definiert werden, die zum Inhalt der Webseite passen müssen. Für jede Seite können Suchbegriffe oder Suchphrasen (d.h. mehrere Wörter, die zusammen eine Suchanfrage bilden) definiert werden. Je Seite sollte man nicht mehr als maximal 5 - 10 Suchbegriffe angeben. Die Suchbegriffe werden durch Komma (ohne Leerzeichen) voneinander getrennt und sollten in der Liste nach Relevanz sein, d.h. der wichtigste Suchbegriff steht am Anfang der Keywords.
Die Meta-Keywords werden mit dem folgenden Meta-Tag definiert:
<meta name="keywords" content="durch Kommas getrennte Liste der Suchbegriffe">Die in Meta-Keywords angegebenen Suchbegriffe haben keinen oder nur einen geringen positiven Einfluss auf das Ranking der Webseite. Der übermäßige Gebrauch von Keywords (Keyword Stuffing) kann das Ranking aber negativ beeinflussen.
Auf die Angabe von Meta-Keywords sollte man am besten verzichten, weil Suchmaschinen diese Angabe entweder ignorieren (z.B. Google) oder sogar als Spam-Signal werten könnten (z.B. Bing).
Meta-Charset (Zeichenkodierung definieren)
Mit Meta-Charset (Deutsch: Zeichensatz) wird die Zeichenkodierung für die Webseite definiert. Es gibt viele verschiedene Character-Sets, die beiden meist genutzten sind aber ISO-8859-1 (Latin-1) und UTF-8 (Unicode 8 Bits). Für neue Websites ist UTF-8 die beste Wahl.
Die Angabe der falschen Zeichen-Kodierung kann dazu führen, dass einige Zeichen nicht korrekt dargestellt werden. Dies kann auch SEO-Probleme verursachen, da der Inhalt durch Suchmaschinen eventuell nicht korrekt gelesen werden kann.
Die Zeichenkodierung für UTF-8 wird in HTML5 mit dem folgenden Meta-Tag definiert:
<meta charset="utf-8">Probleme mit der Zeichenformatierung sind schlecht für die User Experience (Deutsch: Nutzererfahrung). Die Webseite wirkt defekt. Google empfiehlt die Zeichenkodierung UTF-8.
Meta-Robots (Anweisungen für Web-Crawler)
Mit Meta-Robots kann man die Indexierung der Webseite steuern. Dieses Meta-Tag ist eine Aufforderung bzw. eine Anweisung für Suchmaschinen-Crawler, auch Robots genannt. Die zwei bekanntesten Suchmaschinen Robots sind googlebot für Google und bingbot für Bing. Die Crawler anderer Suchmaschinen haben andere Namen. Mit der Angabe name="robots" werden die Crawler aller Suchmaschinen angesprochen.
Für das Robots-Tag wird standardmäßig der folgende Code verwendet:
<meta name="robots" content="index, follow">Durch diesen Code werden die Suchmaschinen-Robots aufgefordert, die Webseite zu indexieren (d.h. die Suchmaschine soll die Seite in ihre Datenbank einfügen und der Crawler soll interne und externe Links der Webseite verfolgen.
Da das Crawlen und Indexieren von Webseiten das Standard-Verhalten für Web-Crawler ist, muss im Allgemeinen nicht explizit angegeben werden, dass die Webseite indexiert werden soll. Wenn das Robots-Tag nicht vorhanden ist, wird in der Regel index und follow angenommen.
Nicht alle Seiten einer Website sollen in den Index der Suchmaschine aufgenommen werden. Das Robots-Tag ist notwendig, wenn eine Webseite nicht in den Index der Suchmaschine aufgenommen werden soll oder wenn die Links der Webseite nicht verfolgt werden sollen.
Folgende Kombinationen für content="…" sind möglich.
-
index, follow (Standard)
Seite indexieren und Links verfolgen -
index, nofollow
Seite indexieren, aber Links nicht verfolgen -
noindex, follow
Seite nicht indexieren, aber Links verfolgen -
noindex, nofollow
Seite nicht indexieren und Links nicht verfolgen
Die großen Suchmaschinen – vor allem Google und Bing – respektieren die Anweisungen, die im Robots-Tag gemacht werden.
Viewport Meta-Tag (Anzeigebereich skalieren)
Die meisten Desktop-Monitore zeigen ein Bild mit einer Pixeldichte zwischen 75 und 110 PPI (Pixel per Inch) an. Die Displays von Handys haben bei Retina-Displays eine extreme Pixeldichte von 300 PPI oder mehr.
Handys könnten daher mit beinahe gleicher Pixel-Anzahl eine Webseite im gleichen Layout anzeigen wie ein Desktop-Monitor. Aber der Text der Webseite wäre dann zu klein und nicht mehr lesbar.
Mit dem Viewport Meta-Tag kann man den Anzeigebereich für Handys und Smartphones so anpassen, dass die Webseite bedienbar und der Text lesbar ist. Das Viewport-Tag sorgt für die korrekte Skalierung der Webseite für mobile Geräte. Ohne dieses Tag könnte man die Webseite nicht bedienen und den Text (ohne Zoomen) nicht lesen.
Das Viewport-Tag allein reicht aber nicht aus, um eine mobil-freundliche Webseite zu gestalten. Ein Responsives Web-Design ist ebenfalls notwendig.
Für das Viewport-Tag wird standardmäßig der folgende Code verwendet:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">-
Der Parameter width teilt dem mobilen Gerät mit, wie die Seitenbreite behandelt werden soll. Mit dem Wert width=device-width passt sich die Seite automatisch an die Gerätebreite an und wird responsiv dargestellt.
-
Der Parameter initial-scale bestimmt den Zoom-Faktor beim Aufruf der Seite. Sein Standardwert ist 1.0 und bedeutet, dass die Seite im Maßstab 1 zu 1 angezeigt werden soll. Eine Skalierung ist bei einem responsiven Web-Design auch gar nicht notwendig.
-
Mit user-scalable wird festgelegt, ob Benutzer die Seite zoomen dürfen. Der Standardwert ist user-scalable=yes Der Wert no würde die Nutzung einschränken.
Meta Language (Sprache des Inhalts)
Mit Meta-Language (Deutsch: Sprache) kann man die Sprache des Inhalts angeben. Der Language Code wird dabei gemäß ISO 639-1 angegeben.
Dieses Meta-Tag wird von Suchmaschinen verwendet, um herauszufinden, in welcher Sprache der Inhalt einer Webseite geschrieben ist. Mit dem Language Meta-Tag kann die Sprache für jede einzelne Seite individuell angegeben werden.
Für das Language-Tag wird der folgende Code verwendet:
<meta name="language" content="de">Im Language-Tag können zweistellige Sprach-Codes entsprechend ISO 639-1 verwendet werden, die ggf. durch einen zweistelligen Länder-Code erweitert werden. Zum Beispiel:
| Sprache | Code |
| Deutsch | de |
| Deutsch Österreich | de-at |
| Deutsch Schweiz | de-ch |
| Englisch | en |
| Englisch UK | en-gb |
| Englisch USA | en-us |
| Englisch Kanada | en-ca |