HTML: Meta-Tags

Grundlegende und unverzichtbare Meta-Tags

Diese sollten auf fast jeder Webseite vorhanden sein.

Zeichensatz (Charset)Legt die Zeichenkodierung für das HTML-Dokument fest. UTF-8 ist der universelle Standard und sollte immer verwendet werden, um sicherzustellen, dass alle Zeichen und Symbole korrekt dargestellt werden.
HTML
```
<meta charset="UTF-8">
```
ViewportDieser Tag ist entscheidend für Responsive Design. Er weist den Browser an, wie die Seite auf verschiedenen Geräten (Smartphones, Tablets, Desktops) skaliert und dargestellt werden soll. width=device-width setzt die Breite der Seite auf die Breite des Geräts, und initial-scale=1.0 legt den anfänglichen Zoom-Level fest.
HTML
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
Titel (Technisch kein Meta-Tag, aber gehört in den <head>)Obwohl es ein eigener Tag ist, ist der <title> der wichtigste einzelne Tag im <head> für SEO. Er definiert den Titel, der im Browser-Tab, in Lesezeichen und in den Suchergebnissen angezeigt wird.
HTML
```
<title>Meine fantastische Webseite</title>
```

SEO-relevante Meta-Tags (Suchmaschinenoptimierung)

Diese Tags helfen Suchmaschinen wie Google, den Inhalt deiner Seite zu verstehen und ihn in den Suchergebnissen ansprechend darzustellen.

Description (Beschreibung)Eine kurze Zusammenfassung des Seiteninhalts (ca. 150-160 Zeichen). Suchmaschinen zeigen diese Beschreibung oft unter dem Titel in den Suchergebnissen an. Eine gut formulierte Beschreibung kann die Klickrate erhöhen.
HTML
```
<meta name="description" content="Erfahre alles über die wichtigsten HTML Meta-Tags und wie du sie für eine bessere SEO und Benutzerfreundlichkeit einsetzt.">
```
Keywords (Schlüsselwörter) – VeraltetFrüher wurden hier die wichtigsten Schlüsselwörter der Seite aufgelistet. Heutzutage ignorieren große Suchmaschinen wie Google diesen Tag fast vollständig, da er in der Vergangenheit für Spam missbraucht wurde. Ich liste ihn der Vollständigkeit halber auf, aber du brauchst ihn nicht mehr zu verwenden.
HTML
```
<meta name="keywords" content="HTML, Meta-Tags, SEO, Webentwicklung">
```
RobotsGibt Suchmaschinen-Crawlern Anweisungen, was sie mit der Seite tun sollen.
- index, follow: Die Seite soll indexiert und Links auf der Seite sollen verfolgt werden (Standardverhalten).
- noindex, nofollow: Die Seite soll nicht indexiert und Links sollen nicht verfolgt werden. Nützlich für Admin-Bereiche oder private Seiten.
HTML
```
<meta name="robots" content="index, follow">
<meta name="robots" content="noindex, nofollow">
```

Meta-Tags für soziale Medien (Open Graph & Twitter Cards)

Diese Tags steuern, wie deine Webseite aussieht, wenn sie auf sozialen Netzwerken wie Facebook, LinkedIn (Open Graph) oder Twitter geteilt wird. Sie sind extrem wichtig für das Marketing.

Open Graph (og:…) für Facebook, LinkedIn, etc.

og:title: Der Titel des geteilten Inhalts.
og:description: Eine kurze Beschreibung.
og:image: Die URL zu einem Bild, das als Vorschau angezeigt wird (sehr wichtig!).
og:url: Die kanonische URL der Seite.
og:type: Die Art des Inhalts (z.B. website, article).

Beispiel:

HTML

<meta property="og:title" content="Die ultimative Anleitung zu HTML Meta-Tags">
<meta property="og:description" content="Lerne, wie du deine Webseite für Suchmaschinen und Social Media optimierst.">
<meta property="og:image" content="https://www.deine-seite.de/bilder/social-preview.jpg">
<meta property="og:url" content="https://www.deine-seite.de/artikel/meta-tags">
<meta property="og:type" content="article">

Twitter Cards (twitter:…) für TwitterÄhnlich wie Open Graph, aber speziell für Twitter. Wenn keine Twitter Cards definiert sind, greift Twitter oft auf die Open Graph Tags zurück.