HTML - Meta-Tags

Leon A. -

Arten von Meta-Tags

Metadaten

Metadaten-Meta-Tags liefern Informationen über das HTML-Dokument. Sie werden nicht auf der Seite angezeigt, aber von Suchmaschinen und Web-Crawlern gelesen. Einige Beispiele für Metadaten-Meta-Tags sind:

Meta-Tag Beschreibung
<meta name="author" content="John Doe"> Gibt den Autor der Webseite an.
<meta name="keywords" content="HTML, meta tags, SEO"> Listet Schlüsselwörter auf, die mit dem Inhalt der Webseite zusammenhängen und bei der Suchmaschinenoptimierung (SEO) helfen können.
<meta name="description" content="Lernen Sie die verschiedenen Arten von Meta-Tags in HTML kennen."> Bietet eine kurze Beschreibung des Seiteninhalts, die von Suchmaschinen oft als Snippet in den Suchergebnissen verwendet wird.

HTTP-Header

HTTP-Header-Meta-Tags geben Webbrowsern und Servern Anweisungen zum Umgang mit der Webseite. Sie können das Caching, den Inhaltstyp und mehr steuern. Einige gängige HTTP-Header-Meta-Tags sind:

Meta-Tag Beschreibung
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> Legt den Inhaltstyp und die Zeichenkodierung der Webseite fest.
<meta http-equiv="expires" content="Wed, 21 Oct 2015 07:28:00 GMT"> Setzt ein Ablaufdatum für die Webseite, nach dem sie vom Server aktualisiert wird.
<meta http-equiv="refresh" content="5; url=https://www.example.com"> Aktualisiert die Webseite nach einer bestimmten Anzahl von Sekunden und/oder leitet zu einer anderen URL weiter.

Viewport

Das Viewport-Meta-Tag steuert, wie die Webseite auf mobilen Geräten angezeigt wird. Es legt den sichtbaren Bereich (Viewport) der Webseite fest, was zur Erstellung von responsiven Designs genutzt werden kann, die sich an verschiedene Bildschirmgrößen anpassen. Das Viewport-Meta-Tag sieht so aus:

Beispiel: Viewport Meta-Tag

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

Dies setzt die Breite des Viewports auf die Breite des Geräts und den anfänglichen Zoom-Level auf 1.0.

Soziale Medien

Meta-Tags können auch verwendet werden, um Webseiten für das Teilen in sozialen Medien zu optimieren. Diese Tags steuern, wie die Webseite aussieht, wenn sie auf Plattformen wie Facebook und Twitter geteilt wird.

Open Graph (OG) Tags werden von Facebook und anderen Social-Media-Plattformen verwendet, um Informationen über die Webseite zu erfassen. Einige Beispiele für OG-Tags sind:

Meta-Tag Beschreibung
<meta property="og:title" content="Mein Webseiten-Titel"> Legt den Titel der Webseite beim Teilen in sozialen Medien fest.
<meta property="og:description" content="Eine kurze Beschreibung meiner Webseite."> Bietet eine Beschreibung der Webseite für das Teilen in sozialen Medien.
<meta property="og:image" content="https://example.com/image.jpg"> Gibt ein Bild an, das verwendet wird, wenn die Webseite in sozialen Medien geteilt wird.

Twitter Card Tags sind ähnlich wie Open Graph Tags, aber spezifisch für Twitter. Sie ermöglichen es Ihnen, zu steuern, wie Ihre Webseite in Tweet-Snippets erscheint. Einige Beispiele für Twitter Card Tags sind:

Meta-Tag Beschreibung
<meta name="twitter:card" content="summary"> Legt den Typ der Twitter Card fest (summary, summary_large_image, app oder player).
<meta name="twitter:title" content="Mein Webseiten-Titel"> Setzt den Titel für die Twitter Card.
<meta name="twitter:description" content="Eine kurze Beschreibung meiner Webseite."> Bietet eine Beschreibung für die Twitter Card.

Robots

Das Robots-Meta-Tag wird verwendet, um zu steuern, wie Suchmaschinen-Crawler die Webseite indexieren und Links darauf folgen. Es ermöglicht Ihnen festzulegen, ob eine Webseite indexiert werden soll und ob ihren Links gefolgt werden soll. Die Werte für das Robots-Meta-Tag können sein:

  • index: Erlaubt Suchmaschinen, die Webseite zu indexieren (Standard).
  • noindex: Teilt Suchmaschinen mit, die Webseite nicht zu indexieren.
  • follow: Erlaubt Suchmaschinen, Links auf der Webseite zu folgen (Standard).
  • nofollow: Teilt Suchmaschinen mit, Links auf der Webseite nicht zu folgen.

Ein Beispiel für ein Robots-Meta-Tag, das Suchmaschinen anweist, die Webseite zu indexieren, aber ihren Links nicht zu folgen, wäre:

Beispiel: Robots Meta-Tag

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

Zeichenkodierung

Das Charset-Meta-Tag gibt die Zeichenkodierung für das HTML-Dokument an. Es ist wichtig, die richtige Zeichenkodierung festzulegen, um sicherzustellen, dass Text korrekt auf der Webseite angezeigt wird. Die häufigste Zeichenkodierung ist UTF-8. Um die Zeichenkodierung mit dem Charset-Meta-Tag festzulegen, verwenden Sie:

Beispiel: Charset Meta-Tag

<meta charset="UTF-8">

Dies gehört in das <head>-Element und sollte so früh wie möglich im Dokument angegeben werden.

Beispiele und Code-Snippets

Grundlegende Meta-Tags Beispiel

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="Max Mustermann">
  <meta name="description" content="Eine Beispielwebseite, die Meta-Tags in HTML zeigt.">
  <meta name="keywords" content="HTML, Meta-Tags, Beispiel">
  <title>Meta-Tags Beispiel</title>
</head>
<body>
  <h1>Willkommen auf meiner Webseite!</h1>
  <p>Dies ist ein Beispiel dafür, wie man Meta-Tags in einem HTML-Dokument verwendet.</p>
</body>
</html>

Dies zeigt eine grundlegende HTML-Struktur mit den Meta-Tags charset, viewport, author, description und keywords im <head>-Bereich.

Beispiel für Social-Media-Meta-Tags

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Beispiel für Social-Media-Meta-Tags</title>

  <!-- Open Graph Meta-Tags -->
  <meta property="og:title" content="Titel meiner Webseite">
  <meta property="og:description" content="Eine kurze Beschreibung meiner Webseite.">
  <meta property="og:image" content="https://beispiel.de/bild.jpg">
  <meta property="og:url" content="https://beispiel.de">

  <!-- Twitter Card Meta-Tags -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Titel meiner Webseite">
  <meta name="twitter:description" content="Eine kurze Beschreibung meiner Webseite.">
  <meta name="twitter:image" content="https://beispiel.de/bild.jpg">
</head>
<body>
  <h1>Beispiel für Social-Media-Meta-Tags</h1>
  <p>Diese Webseite ist für die Weitergabe auf Social-Media-Plattformen optimiert.</p>
</body>
</html>

Dies zeigt, wie man Open Graph und Twitter Card Meta-Tags verwendet, um eine Webseite für die Weitergabe in sozialen Medien zu optimieren. Die Meta-Tags liefern Informationen über den Titel, die Beschreibung, das Bild und die URL der Webseite, die angezeigt werden, wenn die Webseite auf Plattformen wie Facebook und Twitter geteilt wird.

Beispiel für HTTP-Header und Robots-Meta-Tags

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Beispiel für HTTP-Header und Robots-Meta-Tags</title>

  <!-- HTTP-Header-Meta-Tags -->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="expires" content="Wed, 21 Oct 2025 07:28:00 GMT">

  <!-- Robots-Meta-Tag -->
  <meta name="robots" content="index, follow">
</head>
<body>
  <h1>Beispiel für HTTP-Header und Robots-Meta-Tags</h1>
  <p>Diese Webseite verwendet HTTP-Header-Meta-Tags, um den Inhaltstyp und das Ablaufdatum zu steuern, sowie den Robots-Meta-Tag, um die Indexierung durch Suchmaschinen und das Folgen von Links zu erlauben.</p>
</body>
</html>

Dies zeigt, wie man HTTP-Header-Meta-Tags verwendet, um den Inhaltstyp, die Zeichenkodierung und das Ablaufdatum einer Webseite zu steuern. Der Content-Type-Meta-Tag gibt den Inhaltstyp und die Zeichenkodierung an, während der expires-Meta-Tag ein Ablaufdatum für die Webseite festlegt. Der robots-Meta-Tag wird auch verwendet, um Suchmaschinen zu erlauben, die Webseite zu indexieren und ihren Links zu folgen.

Diese Code-Snippets zeigen, wie man verschiedene Arten von Meta-Tags in einem HTML-Dokument verwendet, um Informationen über die Webseite bereitzustellen, ihr Verhalten zu steuern und sie für Suchmaschinen und die Weitergabe in sozialen Medien zu optimieren.