META-Tags in HTML: META-Angaben in Webseiten (2024)

Werbung

Zum vollständigen Grundgerüst einer Webseite gehört neben der Dokumenttyp-Deklaration der HEAD- und BODY-Bereich. Im BODY-Bereich werden die Inhalte der Webseite festgelegt und somit das, was im Browser sichtbar ist, z.B. Texte, Bilder, Hyperlinks, Tabellen etc. Im HEAD-Bereich fügt man über sogenannte Meta-Tags Zusatzinformationen ein, die (bis auf den Titel im Title-Tag) im Browser nicht direkt sichtbar sind.

Auch wenn die Informationen in den Meta-Tags nicht im Browser sichtbar sind, so können sie dennoch sehr wichtig sein, z.B. die Angabe der Sprache, in der die Inhalte der Webseite geschrieben sind, der verwendete Zeichensatz oder die Erlaubnis für Suchmaschinen, die Seiten zu indexieren und den Links zu folgen. Da sich der Title-Tag ebenfalls im HEAD-Bereich befindet, kann man die Meta-Tags vor oder nach dem Title-Tag einfügen.

Wichtig ist, dass sich die Meta-Angaben innerhalb des HEAD-Bereichs, innerhalb den Befehlen <head> ... </head> befinden. Richtigerweise muss man erwähnen, dass es sich bei den Meta-Angaben nicht um Meta-Tags handelt, sondern um Elemente innerhalb des HEAD-Bereichs und sie somit Meta-Elemente sind. Es hat sich jedoch eingebürgert, dass man sie Meta-Tags nennt.

META-Tags in HTML: META-Angaben in Webseiten (1)

Die Syntax einer Meta-Angabe

Innerhalb der spitzen Klammern wird eine Meta-Angabe mit dem Schlüsselwort meta begonnen. Danach wird nach einem Leerzeichen angegeben, für welche Eigenschaft eine Meta-Angabe erfolgen soll. Die Eigenschaft gibt man entweder über name="..." oder http-equiv="..." an. Der Unterschied zwischen den beiden Varianten ist, dass name="..." sich vorrangig an auslesende Programme wie Browser oder Suchmaschinenbots richten und http-equiv="..." an den Webserver. Die Eigenschaft, für die ein Wert zugewiesen werden soll, steht innerhalb der Anführungszeichen. Getrennt durch ein Leerzeichen erfolgt an dritter Stelle die Angabe eines Werts für die Eigenschaft. Der Wert wird mit content="..." ebenfalls innerhalb der Anführungszeichen angegeben. Werden mehrere Werte eingegeben, werden diese mit Kommas getrennt. Die Syntax einer Meta-Angabe ist wie folgt:

META-Tags in HTML: META-Angaben in Webseiten (2)

Wenn man beispielsweise den Suchmaschinenbots erlauben möchte, alle Seiten zu indexieren und den Links zu folgen, gibt man die nachfolgende Meta-Angabe an. Es bedeutet in etwa "Weise der Eigenschaft robots die Werte all und follow zu". Suchmaschinenbots würden den Hinweis auslesen und zumindest die seriös arbeitenden Suchmaschinen halten sich auch daran.

META-Tags in HTML: META-Angaben in Webseiten (3)

Wichtige Meta-Angaben

Bei der Angabe von Meta-Elementen hat man sehr viel Auswahl. Man sollte diese jedoch mit Bedacht auswählen und nicht jedes beliebige Meta-Element in die Webseite einfügen. Zum einen müssen Meta-Angaben genauso wie die Inhalte einer Webseite gepflegt werden. Man kann z.B. den Namen eines Autors in den Meta-Angaben platzieren. Ändert sich irgendwann der Autor und eine andere Person bearbeitet die Webseiten, müsste man theoretisch auf allen Seiten der Internetpräsenz die Namen des ehemaligen Autors durch den Namen des neuen Autors ersetzen. Außerdem sollte man sich immer fragen, ob und wofür eine bestimmte Meta-Angabe nützt. Ist kein erkennbarer Nutzen vorhanden, sollte man sich die Arbeit ersparen und die Meta-Angabe eher weglassen. Nachfolgend einige wichtige Meta-Angaben, wobei die Einschätzung über die Wichtigkeit subjektiv ist.

Angabe der verwendeten Zeichenkodierung

Wenn man mit HTML Webseiten erstellt, dann verwendet man eine bestimmte Zeichenkodierung. Die Angabe der Zeichenkodierung in den Meta-Tags ist wichtig, damit Browser oder Suchmaschinen wissen, in welche Zeichen die Bytes der Webseite umgewandelt werden sollen. Gibt man diese nicht oder falsch an, kann es passieren, dass z.B. der Browser eine unpassende Zeichenkodierung wählt und die Zeichen auf der Webseite nicht richtig dargestellt werden. Die Zeichenkodierung für UTF-8 sieht wie folgt aus:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

In XHTML-Dokumenten kann die Zeichenkodierung auch als sogenannter XML-Prolog in der ersten Zeile, noch vor der Dokumenttyp-Deklaration, angegeben werden. In dem Fall würde die Angabe als Meta-Tag entfallen. Bei manchen Browsern löste der XML-Prolog jedoch den Quirks-Modus aus. Daher wurde auf vielen Webseiten auf den XML-Prolog verzichtet und die Zeichenkodierung wurde über die Meta-Tags angegeben. Gibt man die Zeichenkodierung über die Meta-Tags an, muss die Angabe innerhalb der ersten 1024 Bytes erfolgen. Daher ist es ratsam, die Zeichenkodierung als erstes Element im HEAD-Bereich, noch vor dem Title-Tag anzugeben. Für die deutsche Sprache könnte man statt UTF-8 die Zeichenkodierung ISO-8859-1 wählen.

Hinweise für Suchmaschinen

Die Bots von Suchmaschinen besuchen Webseiten, nehmen die Inhalte in den Index auf, folgen Links und einige andere Dinge mehr. Das verhalten kann über die Meta-Tags in bestimmten Maßen beeinflusst werden. Hierfür verwendet man folgenden Code:

<meta name="robots" content="...., ...."> 

Der Name robots bedeutet, dass das für alle Suchmaschinen gilt. Man könnte hier auch spezielle Suchmaschinenbots ansprechen, z.B. googlebot. Das ist jedoch nicht bei allen Suchmaschinenbots möglich. Ob und in welcher Form ein Suchmaschinenbot gezielt angesprochen werden kann, muss aus den Dokumentationen der entsprechenden Suchmaschine entnommen werden. Unter content="..." können innerhalb der Anführungszeichen eine oder mehrere Werte eingetragen werden. Mehrere Werte werden durch ein Komma und Leerzeichen voneinander getrennt, z.B. content="index, follow". Die Bedeutung für die Werte sind wie folgt:

  • index: Man willigt der Indexierung der Webseite ein.
  • follow: Links auf der Webseite können weiterverfolgt werden.
  • noindex: Indexierung der Webseite ist unerwünscht.
  • nofollow: Den Links auf der Webseite soll nicht gefolgt werden.
  • nosnippet: In den Suchergebnissen soll kein Ausschnitt gezeigt werden.
  • noarchive: Die Seite soll im Cache der Suchmaschine nicht gespeichert werden. Wird die Seite im Cache gespeichert, könnten Besucher die Webseite betrachten, auch wenn die Webseite mal offline sein sollte. Dagegen spricht, dass die im Cache gespeicherte Webseite unter Umständen nicht aktuell ist.
  • noimageindex: Die Bilder auf der Webseite sollen nicht in den Suchergebnissen erscheinen.
  • noodp: ODP ist ein Verzeichnis, in dem die Webseite evtl. mit einer Beschreibung eingetragen ist. Es kann vorkommen, dass Suchmaschinen in den Suchergebnissen die Beschreibung aus dem ODP anzeigen. Mit noodp wird das verhindert.
  • noydir: Auch Yahoo hat ein Verzeichnis, in dem die Webseite mit einer Beschreibung eingetragen sein kann. Mit noydir wird verhindert, dass die Beschreibung aus dem Yahoo Verzeichnis in den Suchergebnissen angezeigt wird.
  • notranslate: Bei manchen Suchmaschinen gibt es die Möglichkeit, dass die Besucher die Webseite über das Übersetzungsprogramms der Suchmaschine übersetzen. Das ist nützlich für ausländische Besucher, die die Sprache auf der Webseite nicht verstehen. Mit notranslate wird das unterbunden.
  • unavailable_after:[Datum]: Hinweis an die Suchmaschine, dass die Webseite nur bis zu einem genannten Datum gültig ist und danach nicht mehr erneut besucht werden soll.

Nicht alle Suchmaschinen halten sich an die genannten Werte. Außerdem gibt es weitere, suchmaschinenspezifische Meta-Angaben, die bei Bedarf verwendet werden können. Ob und welche Meta-Angaben von den Suchmaschinen in welcher Form berücksichtigt werden, muss aus den Dokumentationen der Suchmaschinen entnommen werden.

Beschreibung der Webseite in den Suchergebnissen

Wenn Besucher einer Suchmaschine nach einem Suchbegriff suchen, erscheinen in den Suchergebnissen neben dem Titel der Webseite eine Beschreibung. Entweder wird die Beschreibung aus dem ODP genommen oder es werden Texte, sogenannte Snippets, von der Webseite angezeigt. Es gibt außerdem noch die Möglichkeit, dass die Beschreibung aus den Meta-Angaben angezeigt wird. Hierfür wird die Meta-Angabe description verwendet. Unter content="..." trägt man die Beschreibung ein.

<meta name="description" content="Beschreibung der Webseite">

Die Verwendung einer eigenen Beschreibung kann hilfreich sein, da es durchaus sein kann, dass Besucher von Suchmaschinen die Beschreibung lesen und bei einer ansprechenden Beschreibung lieber die Webseite besuchen, statt eine andere. In früheren Zeiten wurde über die Beschreibung versucht, die Suchmaschine zu manipulieren, indem sie in den Meta-Angaben ganz andere Inhalte angaben als auf der Webseite vorhanden war. Wir raten von jeglichen Manipulationsversuchen ab, da man sich ansonsten der Gefahr begibt, aus dem Suchindex entfernt zu werden. Außerdem hat die Beschreibung in den Meta-Angaben mittlerweile einen sehr geringen bzw. gar keinen Einfluss auf das Ranking und die Suchmaschinen können sehr genau feststellen, welche Inhalte auf der Webseite tatsächlich vorhanden sind. Die Beschreibung dient hauptsächlich zur Anzeige in den Suchergebnissen und hat wenn überhaupt, einen sehr geringen Einfluss auf das Ranking einer Webseite. Es sollte nicht mehr als ca. 150 Zeichen umfassen.

Sonstige Meta-Angaben

Nachfolgend einige weitere Meta-Angaben, die man aber im Grunde vernachlässigen kann, bzw. deren Nutzen fragwürdig ist. Einige Angaben sind Relikte aus den Anfängen des Internetzeitalters und bei anderen ist es zum Großteil überhaupt nicht klar, wer oder was diese Informationen verarbeitet und nutzt. Auch diese Einschätzung ist natürlich subjektiv anzusehen.

Angabe der Sprache auf der Webseite

<meta http-equiv="language" content="deutsch, de">

Angabe von Schlüsselwörter (Keywords) auf der Webseite

<meta name="keywords" content="Keyword 1, Keyword 2, Keyword 3">

Name des Autors

<meta name="author" content="Autorname">

Name des Herausgebers

<meta name="publisher" content="Herausgebername">

Thema der Webseite

<meta name="page-topic" content="Handel, Dienstleistung">

Zielgruppe der Webseite

<meta name="audience" content="alle">

Copyright-Vermerk

<meta name="copyright" content="(c) Name des Urhebers">

Erstelldatum der Webseite

<meta name="date" content="[Datum/Uhrzeit]">

Hinweis an die Suchmaschine zum erneuten Besuch

<meta name="revisit-after" content="14 days">

E-Mailadresse des Herausgebers

<meta http-equiv="reply-to" content="E-Mailadresse">

Weiterleitung auf eine andere Internetadresse nach x Sekunden

<meta http-equiv="refresh" content="10; URL=http://www........">

Obwohl es funktioniert, ist eine Weiterleitung über Meta-Tags gemäß den HTML-Spezifikationen unerwünscht. Man sollte eine Weiterleitung immer serverseitig über die Datei .htaccess realisieren. So ist es auch möglich anzugeben, ob die Webseite nur temporär oder dauerhaft umgezogen ist. Bei der Variante über die Meta-Tags ist eine solche Angabe nicht möglich.

Es gibt noch eine ganze Reihe weiterer Meta-Angaben, die im Internet zu finden sind und die man berücksichtigen kann. Ob man sich die Arbeit macht, diese zu pflegen, muss individuell entschieden werden. Der Trend geht eher in die Richtung, dass man spezielle Meta-Angaben berücksichtigt, die z.B. von bestimmten Suchmaschinen ausgelesen werden. Beispielsweise verwendet man spezielle Meta-Angaben, um sich als Eigentümer der Webseite bei den Suchmaschinen zu verifizieren. Denn, nur der Eigentümer hätte die Möglichkeit, die Meta-Angaben entsprechend einzufügen.

Werbung

META-Tags in HTML: META-Angaben in Webseiten (2024)

FAQs

META-Tags in HTML: META-Angaben in Webseiten? ›

<meta> tags always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings. Metadata will not be displayed on the page, but is machine parsable.

What is the correct meta tag in HTML? ›

<meta> tags always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings. Metadata will not be displayed on the page, but is machine parsable.

How do meta tags show up on Web pages? ›

Meta tags are snippets of text that describe a page's content; the meta tags don't appear on the page itself, but only in the page's source code. Meta tags are essentially little content descriptors that help tell search engines what a web page is about.

What is an example of a meta tag? ›

Example of Meta description tag code: <meta name="description" content="This is a meta description. This text will show up in Google's search engine results page.">

What are meta keywords for website? ›

Meta keywords are meta tags that you can use to give search engines more information about a page's content. They're found in a webpage's HTML source code, and are not visible to visitors. It's easy to add meta keywords in most website builders and CMS', but should you bother?

How do you write meta tags? ›

Optimizing Your Meta Description for SEO
  1. Keep it under 160 characters.
  2. Create distinct summaries for each page.
  3. Avoid duplicate meta descriptions on your website.
  4. Use sentence case.
  5. Be accurate, descriptive, and concise.
  6. Match search intent.
  7. Only include your target keyword where it makes sense.
Nov 4, 2022

Do websites still use meta tags? ›

The answer is no — Google hasn't used meta keywords since 2009. It was 21 September 2009 when Google published an article stating they would no longer use meta keywords in ranking web search results. So, aptly, you shouldn't invest time adding meta keywords to your website.

How do I verify meta tags? ›

To verify using the <meta> tag, simply click the Verify link for your site, choose Add a meta tag as the verification option, and then copy the tag provided to the <head> section of your home page. You must place this meta tag: On the home page of your site (sometimes called the index page or root page).

How many meta tags should I use? ›

Incorporating Meta Keywords in Your Content

Another common question is, How many meta keywords should I use? As a general rule, don't use more than about 10 meta keywords for a single page.

Which meta tags are important? ›

10 Most Important Meta Tags You Need to Know for SEO
  • Title Tags. The title tag is your main and most important anchor. ...
  • Meta Description Tags. ...
  • Heading Tags (H1-H6) ...
  • Image Alt Attributes. ...
  • Nofollow Attributes. ...
  • Robots Meta Tag. ...
  • rel=”canonical” Link Tag. ...
  • Schema Markup.
Sep 6, 2021

What is a custom meta tag? ›

The meta tag contains information about the document. Google understands a standard set of meta tags. You can use custom meta tags to provide Google with additional information about your pages. Google can use this information to create rich snippets or enable sorting of search results.

Where is meta title displayed? ›

A meta title, also known as a title tag, refers to the text that is displayed on search engine result pages and browser tabs to indicate the topic of a webpage.

Will metadata be displayed on the web page in title bar? ›

Explanation: Metadata is information about data. The meta tag provides metadata/meta information about the HTML document. Metadata will not be displayed on the page. Metadata is present in head.

Will meta data be displayed on the webpage in the title bar? ›

The <meta> element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings. The metadata will not be displayed on the page, but is used by browsers (how to display content or reload page), by search engines (keywords), and other web services.

Are meta tags on page SEO? ›

Meta tags are the most fundamental part of SEO and making sure that your site's pages have a good, solid foundation of optimization. These are the tags that you add to your page's header to describe the page using syntax that Google understands.

References

Top Articles
Latest Posts
Article information

Author: Duncan Muller

Last Updated:

Views: 5702

Rating: 4.9 / 5 (79 voted)

Reviews: 86% of readers found this page helpful

Author information

Name: Duncan Muller

Birthday: 1997-01-13

Address: Apt. 505 914 Phillip Crossroad, O'Konborough, NV 62411

Phone: +8555305800947

Job: Construction Agent

Hobby: Shopping, Table tennis, Snowboarding, Rafting, Motor sports, Homebrewing, Taxidermy

Introduction: My name is Duncan Muller, I am a enchanting, good, gentle, modern, tasty, nice, elegant person who loves writing and wants to share my knowledge and understanding with you.