DEV Community

Per Starke
Per Starke

Posted on

Search Engine Optimization (SEO) #3 - Meta-Tags

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], [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>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

als auch

https://deine-website.de/posts
Enter fullscreen mode Exit fullscreen mode

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=""
Enter fullscreen mode Exit fullscreen mode

verweist dann auf die bevorzugte "kanonische" Version der Seite:

<link rel="canonical" href="https://deine-website.de/blog">
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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

[1] Granka, Joachims & Gay. Eye-Tracking Analysis of User Behavior in WWW Search. 2004.

[2] Beus. Klickwahrscheinlichkeiten in den Google SERPs. 2015.

Top comments (0)