Search Engine Optimization (SEO) #3 - Meta-Tags
Published: 2023-12-14 17:48:16

SEO ist ein unfassbar wichtiges Thema im Web Development!  
Bei Google (oder anderen Suchmaschinen) gut gefunden zu werden, ist ohne Zweifel ein wichtiges Ziel einer Website. Wenn du die Position deiner Website bei einer Google Suchanfrage von 8 auf 4 verbesserst, besuchen im Schnitt 4x mehr Personen deine Seite - wenn du auf Position 1 kommst, sind es nochmals 12x so viele! [[1]](#1), [[2]](#2)  

In den Posts dieser Reihe möchte ich euch zeigen, was ihr tun könnt, um eure Seite für Suchmaschinen zu optimieren.  

Jeder Post soll dabei ein „To-Do“ für die SEO eurer Website erklären.  

Voraussetzung ist immer, dass die absoluten Basics eurer Website schon stimmen! Das heißt, ihr habt relevante Inhalte, gut formulierte Texte, verwendet für eure Zielgruppe passende Keywords in euren Texten, und der Aufbau und das Design der Website sind übersichtlich und ansprechend. Dazu gehört vor allem auch eine vernünftige Navigation, sodass alle Inhalte leicht zu finden sind. Ist das nicht gegeben, bringen auch weitere Tricks nicht viel für eure SEO.  

Starten wir mit To-Do # 3 für eure SEO - **Meta-Tags!**  

* * *

### Übersicht

Meta-Tags sind kurze, versteckte Informationen in einer Webseite, die den Suchmaschinen helfen, den Inhalt zu verstehen, die Auffindbarkeit beeinflussen und angezeigt werden, wenn deine Seite in den Suchergebnissen erscheint. Sie verändern aber nichts an der Optik oder am sichtbaren Inhalt der Website.  

Es gibt verschiedenste Meta-Tags, vor allem im Kontext von SEO sind folgende 6 besonders wichtig:  

*   Title-Tag
*   Description-Meta-Tag
*   Canonical-Tag
*   Robots-Meta-Tag
*   Viewport-Meta-Tag
*   Charset-Meta-Tag

* * *

### Title-Tag

**Funktion:**  
Der Title-Tag definiert den Titel einer Webseite, der in den Suchergebnissen erscheint und im Browser-Tab angezeigt wird.  

**Beispiel:**  

```
<title>Pers Rezepte</title>
```

**Bedeutung für SEO:**  
Ein aussagekräftiger Title-Tag ist entscheidend für die Klickrate. Er sollte relevant, prägnant und mit relevanten Schlüsselwörtern versehen sein. Die Länge sollte etwa 50-60 Zeichen nicht überschreiten, um vollständig in den Suchergebnissen angezeigt zu werden.

* * *

### Description-Meta-Tag

**Funktion:**  
Das Description-Meta-Tag bietet eine kurze Zusammenfassung des Inhalts einer Webseite und wird oft in den Suchergebnissen unter dem Title-Tag angezeigt.  

**Beispiel:**  

```
<meta name="description" content="Entdecke die  
besten Rezepte für das perfekte sommerliche Abendessen">
```

**Bedeutung für SEO:**  
Eine gut geschriebene Meta-Beschreibung kann die Klickrate erhöhen, indem sie den Nutzer*Innen eine klare Vorstellung vom Inhalt der Seite gibt. Die Länge sollte maximal 150-160 Zeichen betragen, um sicherzustellen, dass sie vollständig in den Suchergebnissen angezeigt wird. Verwende relevante Schlüsselwörter, um die Relevanz zu steigern.

* * *

### Canonical-Tag

Wenn du verschiedene Versionen derselben Seite hast, bzw. eine Seite über mehrere URLs erreichbar ist, dann kann das Suchmaschinen verwirren.  

Hast du zum Beispiel eine Unterseite deiner Website, die alle Posts deines Blogs auflistet, und diese ist sowohl unter der URL

```
https://deine-website.de/blog
```

als auch

```
https://deine-website.de/posts
```

erreichbar, dann solltest du ein Canonical-Tag verwenden, um Suchmaschinen zu zeigen, welche der URLs als „bevorzugt“ betrachtet und in den Suchergebnissen angezeigt werden soll.  

Für jede Version der gleichen Seite solltest du dann folgendes auf deiner Seite haben, der Link im 
```
href=""
```
verweist dann auf die bevorzugte "kanonische" Version der Seite:

```
<link rel="canonical" href="https://deine-website.de/blog">
```

* * *

### Robots-Meta-Tag

**Funktion:**  
Das Robots-Meta-Tag wird verwendet, um spezifische Anweisungen für Suchmaschinen-Crawler (automatische Programme von z.B. Google, die das Internet nach Informationen über Webseiten durchsuchen) bereitzustellen. Es beeinflusst, ob eine Seite indexiert (von Suchmaschinen in ihre Datenbank aufgenommen) und ob Links auf der Seite verfolgt werden sollen  

**Beispiel für die Standardwerte:**  

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

**Bedeutung für SEO:**  
Standardmäßig sind Seiten indexierbar, und Links werden verfolgt. Das Robots-Meta-Tag ist besonders wichtig, wenn du möchtest, dass eine Seite nicht indexiert wird (noindex) oder wenn du nicht möchtest, dass Suchmaschinen Links auf dieser Seite verfolgen (nofollow). Das ist z.B. sinnvoll für Bestätigungs- oder Danksagungs-Seiten, da diese für Suchmaschinen nicht relevant sind.

* * *

### Viewport-Meta-Tag

**Funktion:**  
Das Viewport-Meta-Tag beeinflusst die Darstellung einer Webseite auf mobilen Geräten, insbesondere die Breite des Anzeigebereichs.  

**Beispiel, so sollte es standardmäßig gesetzt werden:**  

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

**Bedeutung für SEO:**  
Das Viewport-Tag ist entscheidend für die mobile Optimierung. "width=device-width" stellt sicher, dass die Breite der Seite der Breite des Geräts entspricht, und "initial-scale=1.0" setzt den initialen Zoom-Level.  

**Hinweis:**  
Ohne das Viewport-Tag können Webseiten auf mobilen Geräten möglicherweise nicht korrekt angezeigt werden, was die Benutzerfreundlichkeit und SEO beeinträchtigen kann.

* * *

### Charset-Meta-Tag

**Funktion:**  
Das Charset-Meta-Tag gibt das Zeichenkodierungsschema für die Webseite an.  

**Beispiel:**  

```
<meta charset="UTF-8">
```

**Bedeutung für SEO:**  
Die Zeichenkodierung ist entscheidend, um sicherzustellen, dass der Text einer Webseite korrekt angezeigt wird. UTF-8 ist die häufigste Zeichenkodierung und unterstützt eine breite Palette von Zeichen, was besonders wichtig ist, wenn deine Seite verschiedene Sprachen oder Sonderzeichen enthält.  

**Hinweis:**  
Charset und Viewport sollten im Head-Bereich jeder Seite angegeben werden!

* * *

### Quellen

<span id="1">[1] Granka, Joachims & Gay. Eye-Tracking Analysis of User Behavior in WWW Search. 2004.</span>  
<span id="2">[2] Beus. Klickwahrscheinlichkeiten in den Google SERPs. 2015.</span>