HTML-Meta-Tags

HTML-Meta-Tags sind nicht sichtbare Seiteninformationen im Header einer Website, die wichtige Angaben zur Website bereitstellen. Durch Hinweise zum Seitenaufbau, zur Art der Seite sowie zu Funktion und Sprache beeinflussen Meta-Tags nicht nur die Darstellung und Indexierung, sondern dienen auch als SEO-Werkzeug für ein besseres Suchmaschinenranking.

Was sind HTML-Meta-Tags?

HTML-Meta-Tags sind spezielle HTML-Tags, die für die Darstellung, Interpretation und Indexierung von Websites durch Browser und Suchmaschinen unverzichtbar sind. Sie befinden sich im Header einer Website und sind für Nutzerinnen und Nutzer einer Website nicht sichtbar. Durch die geschickte Nutzung von HTML <meta> können Entwicklerinnen und Entwickler Seiteneigenschaften zur besseren Lesbarkeit durch Suchmaschinen bereitstellen und Informationen wie Sprache, Inhalt, Aufbau oder Zeichencodierung definieren.

Meta-Tags sind somit ein wesentliches Werkzeug in HTML, um Seiten für Suchmaschinen zu optimieren, das Ranking zu verbessern und die geräteübergreifende Darstellung zu steuern. Obwohl Metainformationen heute nicht mehr zu den wichtigsten Rankingkriterien für Websites zählen, spielen vor allem HTML title und die Meta Description weiterhin eine wichtige Rolle.

Die wichtigsten Anwendungsbereiche von HTML-Meta-Tags

Zu den wichtigsten Anwendungsbereichen von HTML-Meta-Elementen zählen:

• Suchmaschinenoptimierung: Meta-Tags wie Description und Title liefern Suchmaschinen Informationen über Inhalt und Schwerpunkte einer Seite. Auf diese Weise können Sie den Seiteninhalt klar zusammenfassen, Interesse wecken und Klicks generieren.
• Indexierung: Metadaten wie robots geben Suchmaschinen Hinweise, ob eine Seite indexiert werden soll oder nicht.
• Anzeige und Darstellung: Meta-Tags können Informationen und Anweisungen zur Zeichencodierung, zur Anzeige auf mobilen Geräten oder zu Aktualisierungen und automatischen Weiterleitungen enthalten.
• Social Media: Soziale Netzwerke verwenden dedizierte Meta-Tags, die es für eine korrekte Darstellung beim Teilen von Content zu beachten gilt.
• Barrierefreiheit: Metadaten spielen eine wichtige Rolle für Barrierefreiheit, denn sie helfen bei der Kategorisierung durch Screenreader oder bei der geräteübergreifenden korrekten Darstellung durch das Element viewport.

Welche Bedeutung haben HTML-Meta-Tags?

Suchmaschinen wie Google liefern heute anhand von Suchbegriffen und Fragen ein sehr konkretes und präzises thematisches Ranking. Früher hatten Metadaten eine deutlich größere Bedeutung für das Ranking einer Website. Da sich das Website-Ranking mit Meta-Tags und Meta-Keywords deutlich leichter manipulieren ließ, führte das mitunter zum Missbrauch von Metadaten, beispielsweise durch Keyword-Stuffing.

Für moderne Suchmaschinen haben Metadaten und ihre Auszeichnung durch HTML-Meta-Tags aber nicht an Wichtigkeit verloren. Im Gegenteil: Wer Metadaten falsch verwendet, läuft Gefahr, vollständig ignoriert zu werden. Eine korrekte Verwendung von relevanten Metadaten wie <title>-Tag und Meta Description und eine regelmäßige Pflege der Metadaten kann weiterhin ein entscheidendes Kriterium für ein dauerhaft gutes Ranking sein.

Die wichtigsten HTML-Meta-Tags und ihre Syntax

Welche Funktionen Meta-Tags erfüllen und wofür sie zum Einsatz kommen, hängt von der Art des Meta-Tags ab. Einige der wichtigsten Meta-Tags haben wir in den nachfolgenden Abschnitten für Sie zusammengefasst.

Suchmaschinenoptimierung (SEO)

Die Suchmaschinenoptimierung ist eine der wichtigsten Funktionen von HTML <meta>. Hier spielen insbesondere die folgenden SEO-relevanten Meta-Tags eine Rolle:

Title

Mit dem Title bzw. dem <title>-Element erklären Sie Suchmaschinen sowie Nutzerinnen und Nutzern kurz und knapp, worum es auf einer Website geht. Genau genommen handelt es sich nicht um ein Meta-Tag, sondern um ein eigenständiges Tag, das vor allen anderen Meta-Tags steht. Dennoch wird der Title häufig im Rahmen der wichtigsten Meta-Tags erwähnt, da er ebenfalls von Suchmaschinen ausgelesen und als einer der wichtigsten Faktoren fürs Ranking verwendet wird.

Da es sich um das klickbare Element in Suchergebnissen handelt, kommt es auf einen klaren, prägnanten Titel an, der Interesse weckt und die korrekte Länge für eine vollständige Anzeige hat.

Syntax:

<title>Title des Dokuments einfügen</title>

Meta Description

Für das Ranking spielt die Meta Description zwar keine direkte Rolle, jedoch stellt sie genau wie der Title den ersten Kontakt zu Nutzerinnen und Nutzern dar und liefert erste Informationen, die Klicks generieren. Hierbei kommt es ebenfalls auf die korrekte Länge sowie auf Elemente wie Icons oder Symbole an, die relevante Begriffe oder einen CTA (Call-to-Action) betonen.

Syntax:

<meta name="description" content="Hier steht die gewünschte Meta Description der betreffenden Webseite, die im Optimalfall eine Länge von ungefähr 150 Zeichen haben sollte.">

robots

Mit dem HTML-Attribut robots können Sie Suchmaschinen folgende SEO-relevante Anweisungen zu Indexierung, Folgen, Snippets oder Speichern geben:

• index: Die Seite darf indexiert werden
• noindex: Die Seite darf nicht indexiert werden
• follow: Crawler dürfen den Links auf der Seite folgen
• nofollow: Crawler sollen Links auf der Seite nicht folgen
• nosnippet: Inhalte dürfen nicht als Featured Snippet verwendet werden
• noarchive: Die im Google-Cache gespeicherte Seite darf nicht angezeigt werden

Werden keine robots-Daten angegeben, deuten Suchmaschinen das als Erlaubnis zur Indexierung, zur Snippet-Darstellung oder zum Folgen von Links. Indexierungsmanagement mit robots ist somit eine sehr wichtige Funktion von Meta-Tags.

Syntax-Beispiel für eine Seite, die indexiert werden darf und deren Links die Crawler folgen dürfen:

<meta name="robots" content="index, follow">

viewport

Das HTML-Meta-Attribut viewport ist für das responsive Design von Websites von elementarer Bedeutung. Obwohl das Meta-Tag selbst nicht unmittelbare SEO-Relevanz hat, dient die mobile Optimierung von Websites, also Mobile SEO, als wichtiger Rankingfaktor. Durch viewport teilen Sie einer Suchmaschine mit, ob Ihre Website eine responsive Darstellung auf verschiedenen Endgeräten unterstützt und als mobilfreundlich gilt. Zugleich sorgen Sie mit viewport für die korrekte Darstellung der Website je nach Endgerät und somit für eine optimale Usability.

Syntax :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Zeichencodierung mit charset

Mit dem Meta-Tag charset teilen Sie Browsern die verwendete Zeichencodierung mit, um eine korrekte Textdarstellung zu gewährleisten. Das gilt vor allem, wenn Sie den Zeichensatz nicht im HTTP-Header definiert haben oder der Browser HTML-Dateien nicht mittels HTTP(S), sondern direkt von Festplatten abruft.

Syntax:

<meta charset="utf-8"/>

Zwischenspeichern mit expires

Möchten Sie das Speichern im Cache nicht gänzlich verbieten, so können Sie mit expires einen Zeitpunkt oder eine Zeitspanne festlegen, nach der gespeicherte HTML-Daten verfallen sollen. In modernen Webanwendungen wird expires aber nur noch sehr selten genutzt, da das Caching in den meisten Fällen über HTTP-Header gesteuert wird.

Syntax:

<meta http-equiv="expires" content="Verfallszeitpunkt in Sekunden"/>

Angaben zu Urheber und Copyright

Um Angaben zu Autor und Copyright im Quellcode zu hinterlegen, bieten sich die HTML-Meta-Tags author und copyright an. Hierdurch erleichtern Sie die Verwaltung der Seite und schaffen Transparenz über letzte Änderungen an einer Seite.

Syntax:

<meta name="author" content="Autor"/>
<meta name="copyright" content="Copyright-Inhaber"/>

Keywords

Früher zählten Meta-Keywords zu wichtigen Rankingkriterien bei der Erstellung von Websites. Heute haben Meta-Keywords eine deutlich geringere Bedeutung und werden zumindest von Google hinsichtlich SEO-Relevanz und Ranking ignoriert. Als Schlüsselwörter beschreiben Sie die wichtigsten Schwerpunkte einer Seite, die im Idealfall mit den Suchintentionen von Nutzerinnen und Nutzern übereinstimmen. Werden in bestimmten Branchen und Geschäftszweigen weiterhin Meta-Keywords verwendet, so kann es Wettbewerbsvorteile bieten, sich über relevante Keywords zu informieren. Grundsätzlich spielen Meta-Keywords jedoch nur noch eine untergeordnete Rolle fürs Ranking.

Syntax:

<meta name="keywords" content="Keyword1, Keyword2, Keyword3…">