Was sind Meta-Tags und wofür sind sie notwendig…

Meta-Tags sind spezielle HTML-Tags, die Metadaten (Informationen über das Dokument) für Browser und Suchmaschinen bereitstellen. Sie befinden sich im <head>-Abschnitt des HTML-Dokuments.

Die wichtigsten Arten von Meta-Tags und ihre Zwecke:

charset: Gibt die Zeichenkodierung der Seite an, z.B. UTF-8. Wichtig für die korrekte Anzeige des Textes.
```
<meta charset="UTF-8">
```
name="description": Definiert eine kurze Beschreibung des Seiteninhalts. Wird von Suchmaschinen in den Ergebnissen verwendet.
```
<meta name="description" content="Kurze Beschreibung Ihrer Seite für Suchmaschinen.">
```
name="keywords": Liste von Schlüsselwörtern, die den Inhalt der Seite beschreiben. Der Einfluss auf SEO hat abgenommen, kann aber von älteren Systemen genutzt werden.
```
<meta name="keywords" content="Schlüsselwort1, Schlüsselwort2, Schlüsselwort3">
```
name="viewport": Steuert das Zoomverhalten und die Abmessungen des Viewports auf mobilen Geräten. Entscheidend für responsive Design.
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
- width=device-width: Die Breite des Viewports entspricht der Breite des Geräts.
- initial-scale=1.0: Anfangszoom der Seite beim Laden.

name="robots": Gibt Suchmaschinen-Robots die Regeln für die Indexierung der Seite vor.

Tabelle der Werte für das content-Attribut:

Wert	Beschreibung
`index`	Erlaubt die Indexierung der Seite.
`noindex`	Verhindert die Indexierung der Seite.
`follow`	Erlaubt das Folgen der Links auf der Seite und deren Indexierung.
`nofollow`	Verhindert das Folgen der Links auf der Seite.
`all`	Entspricht `index, follow`. (Standardwert)
`none`	Entspricht `noindex, nofollow`.

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

property (Open Graph, Twitter Cards): Wird verwendet, um festzulegen, wie der Inhalt der Seite beim Teilen in sozialen Netzwerken angezeigt wird.

<meta property="og:title" content="Titel für soziale Medien">
<meta property="og:description" content="Beschreibung für soziale Medien">
<meta property="og:image" content="URL des Bildes für Vorschau">
<meta property="og:url" content="URL der Seite">
<meta name="twitter:card" content="summary_large_image">

Der Bedarf an Meta-Tags lässt sich zusammenfassen in:

SEO (Suchmaschinenoptimierung): Helfen Suchmaschinen, das Thema und den Inhalt der Seite zu verstehen, was das Ranking und die Anzeige in den Suchergebnissen beeinflusst (insbesondere description, keywords, robots).
UX (Benutzererfahrung): Verbessern die Anzeige und Interaktion auf der Seite auf verschiedenen Geräten (viewport).
Soziale Netzwerke: Bestimmen das ansprechende Erscheinungsbild des Links beim Teilen, was die Klickrate erhöht (property - Open Graph, Twitter Cards).
Technische Informationen: Stellen wichtige technische Daten für den Browser bereit (z.B. Kodierung).

Die Verwendung von Meta-Tags ist notwendig, um korrekte, optimierte und benutzerfreundliche Webseiten zu erstellen.

Was sind Meta-Tags und wofür sind sie notwendig?