HTML-Meta-Tags

HTML-Meta-Tags sind nicht sichtbare Sei­ten­in­for­ma­tio­nen im Header einer Website, die wichtige Angaben zur Website be­reit­stel­len. Durch Hinweise zum Sei­ten­auf­bau, zur Art der Seite sowie zu Funktion und Sprache be­ein­flus­sen Meta-Tags nicht nur die Dar­stel­lung und In­de­xie­rung, sondern dienen auch als SEO-Werkzeug für ein besseres Such­ma­schi­nen­ran­king.

Was sind HTML-Meta-Tags?

HTML-Meta-Tags sind spezielle HTML-Tags, die für die Dar­stel­lung, In­ter­pre­ta­ti­on und In­de­xie­rung von Websites durch Browser und Such­ma­schi­nen un­ver­zicht­bar sind. Sie befinden sich im Header einer Website und sind für Nut­ze­rin­nen und Nutzer einer Website nicht sichtbar. Durch die ge­schick­te Nutzung von HTML <meta> können Ent­wick­le­rin­nen und Ent­wick­ler Sei­ten­ei­gen­schaf­ten zur besseren Les­bar­keit durch Such­ma­schi­nen be­reit­stel­len und In­for­ma­tio­nen wie Sprache, Inhalt, Aufbau oder Zei­chen­co­die­rung de­fi­nie­ren.

Meta-Tags sind somit ein we­sent­li­ches Werkzeug in HTML, um Seiten für Such­ma­schi­nen zu op­ti­mie­ren, das Ranking zu ver­bes­sern und die ge­rä­te­über­grei­fen­de Dar­stel­lung zu steuern. Obwohl Me­ta­in­for­ma­tio­nen heute nicht mehr zu den wich­tigs­ten Ran­king­kri­te­ri­en für Websites zählen, spielen vor allem HTML title und die Meta De­scrip­ti­on weiterhin eine wichtige Rolle.

Die wich­tigs­ten An­wen­dungs­be­rei­che von HTML-Meta-Tags

Zu den wich­tigs­ten An­wen­dungs­be­rei­chen von HTML-Meta-Elementen zählen:

• Such­ma­schi­nen­op­ti­mie­rung: Meta-Tags wie De­scrip­ti­on und Title liefern Such­ma­schi­nen In­for­ma­tio­nen über Inhalt und Schwer­punk­te einer Seite. Auf diese Weise können Sie den Sei­ten­in­halt klar zu­sam­men­fas­sen, Interesse wecken und Klicks ge­ne­rie­ren.
• In­de­xie­rung: Metadaten wie robots geben Such­ma­schi­nen Hinweise, ob eine Seite indexiert werden soll oder nicht.
• Anzeige und Dar­stel­lung: Meta-Tags können In­for­ma­tio­nen und An­wei­sun­gen zur Zei­chen­co­die­rung, zur Anzeige auf mobilen Geräten oder zu Ak­tua­li­sie­run­gen und au­to­ma­ti­schen Wei­ter­lei­tun­gen enthalten.
• Social Media: Soziale Netzwerke verwenden de­di­zier­te Meta-Tags, die es für eine korrekte Dar­stel­lung beim Teilen von Content zu beachten gilt.
• Bar­rie­re­frei­heit: Metadaten spielen eine wichtige Rolle für Bar­rie­re­frei­heit, denn sie helfen bei der Ka­te­go­ri­sie­rung durch Screen­rea­der oder bei der ge­rä­te­über­grei­fen­den korrekten Dar­stel­lung durch das Element viewport.

Welche Bedeutung haben HTML-Meta-Tags?

Such­ma­schi­nen wie Google liefern heute anhand von Such­be­grif­fen und Fragen ein sehr konkretes und präzises the­ma­ti­sches 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 ma­ni­pu­lie­ren ließ, führte das mitunter zum Miss­brauch von Metadaten, bei­spiels­wei­se durch Keyword-Stuffing.

Für moderne Such­ma­schi­nen haben Metadaten und ihre Aus­zeich­nung durch HTML-Meta-Tags aber nicht an Wich­tig­keit verloren. Im Gegenteil: Wer Metadaten falsch verwendet, läuft Gefahr, voll­stän­dig ignoriert zu werden. Eine korrekte Ver­wen­dung von re­le­van­ten Metadaten wie <title>-Tag und Meta De­scrip­ti­on und eine re­gel­mä­ßi­ge Pflege der Metadaten kann weiterhin ein ent­schei­den­des Kriterium für ein dauerhaft gutes Ranking sein.

Die wich­tigs­ten HTML-Meta-Tags und ihre Syntax

Welche Funk­tio­nen Meta-Tags erfüllen und wofür sie zum Einsatz kommen, hängt von der Art des Meta-Tags ab. Einige der wich­tigs­ten Meta-Tags haben wir in den nach­fol­gen­den Ab­schnit­ten für Sie zu­sam­men­ge­fasst.

Such­ma­schi­nen­op­ti­mie­rung (SEO)

Die Such­ma­schi­nen­op­ti­mie­rung ist eine der wich­tigs­ten Funk­tio­nen von HTML <meta>. Hier spielen ins­be­son­de­re die folgenden SEO-re­le­van­ten Meta-Tags eine Rolle:

Title

Mit dem Title bzw. dem <title>-Element erklären Sie Such­ma­schi­nen sowie Nut­ze­rin­nen und Nutzern kurz und knapp, worum es auf einer Website geht. Genau genommen handelt es sich nicht um ein Meta-Tag, sondern um ein ei­gen­stän­di­ges Tag, das vor allen anderen Meta-Tags steht. Dennoch wird der Title häufig im Rahmen der wich­tigs­ten Meta-Tags erwähnt, da er ebenfalls von Such­ma­schi­nen aus­ge­le­sen und als einer der wich­tigs­ten Faktoren fürs Ranking verwendet wird.

Da es sich um das klickbare Element in Such­ergeb­nis­sen handelt, kommt es auf einen klaren, prä­gnan­ten Titel an, der Interesse weckt und die korrekte Länge für eine voll­stän­di­ge Anzeige hat.

Syntax:

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

Meta De­scrip­ti­on

Für das Ranking spielt die Meta De­scrip­ti­on zwar keine direkte Rolle, jedoch stellt sie genau wie der Title den ersten Kontakt zu Nut­ze­rin­nen und Nutzern dar und liefert erste In­for­ma­tio­nen, die Klicks ge­ne­rie­ren. 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 Such­ma­schi­nen folgende SEO-relevante An­wei­sun­gen zu In­de­xie­rung, 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 ge­spei­cher­te Seite darf nicht angezeigt werden

Werden keine robots-Daten angegeben, deuten Such­ma­schi­nen das als Erlaubnis zur In­de­xie­rung, zur Snippet-Dar­stel­lung oder zum Folgen von Links. In­de­xie­rungs­ma­nage­ment 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 re­spon­si­ve Design von Websites von ele­men­ta­rer Bedeutung. Obwohl das Meta-Tag selbst nicht un­mit­tel­ba­re SEO-Relevanz hat, dient die mobile Op­ti­mie­rung von Websites, also Mobile SEO, als wichtiger Ran­king­fak­tor. Durch viewport teilen Sie einer Such­ma­schi­ne mit, ob Ihre Website eine re­spon­si­ve Dar­stel­lung auf ver­schie­de­nen End­ge­rä­ten un­ter­stützt und als mo­bil­freund­lich gilt. Zugleich sorgen Sie mit viewport für die korrekte Dar­stel­lung 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">

Zei­chen­co­die­rung mit charset

Mit dem Meta-Tag charset teilen Sie Browsern die ver­wen­de­te Zei­chen­co­die­rung mit, um eine korrekte Text­dar­stel­lung zu ge­währ­leis­ten. Das gilt vor allem, wenn Sie den Zei­chen­satz nicht im HTTP-Header definiert haben oder der Browser HTML-Dateien nicht mittels HTTP(S), sondern direkt von Fest­plat­ten abruft.

Syntax:

<meta charset="utf-8"/>

Zwi­schen­spei­chern mit expires

Möchten Sie das Speichern im Cache nicht gänzlich verbieten, so können Sie mit expires einen Zeitpunkt oder eine Zeit­span­ne festlegen, nach der ge­spei­cher­te HTML-Daten verfallen sollen. In modernen Web­an­wen­dun­gen 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 hin­ter­le­gen, bieten sich die HTML-Meta-Tags author und copyright an. Hierdurch er­leich­tern Sie die Ver­wal­tung der Seite und schaffen Trans­pa­renz über letzte Än­de­run­gen an einer Seite.

Syntax:

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

Keywords

Früher zählten Meta-Keywords zu wichtigen Ran­king­kri­te­ri­en bei der Er­stel­lung von Websites. Heute haben Meta-Keywords eine deutlich geringere Bedeutung und werden zumindest von Google hin­sicht­lich SEO-Relevanz und Ranking ignoriert. Als Schlüs­sel­wör­ter be­schrei­ben Sie die wich­tigs­ten Schwer­punk­te einer Seite, die im Idealfall mit den Such­in­ten­tio­nen von Nut­ze­rin­nen und Nutzern über­ein­stim­men. Werden in be­stimm­ten Branchen und Ge­schäfts­zwei­gen weiterhin Meta-Keywords verwendet, so kann es Wett­be­werbs­vor­tei­le bieten, sich über relevante Keywords zu in­for­mie­ren. Grund­sätz­lich spielen Meta-Keywords jedoch nur noch eine un­ter­ge­ord­ne­te Rolle fürs Ranking.

Syntax:

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