Zukünftig werde ich alle Posts auf Englisch schreiben und auf meinem "Panorama Perspectives" Blog veröffentlichen! Guck gerne mal dort vorbei.

Zum Blog
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 # 1 für eure SEO - Benennung von Bildern & Alternative Texte!

Benennung von Bildern

Wenn du Bilder auf deiner Website verwendest, benutzen Suchmaschinen den Dateinamen, um den Inhalt des Bildes zu verstehen.

Verwende also keine generischen Dateinamen wie “bild1.webp“, sondern aussagekräftige Dateinamen wie “roter-sportwagen-außenansicht.webp“.

Alternative Texte

Ebenso wie Dateinamen werden auch alternative Texte für Bilder von Suchmaschinen genutzt, um den Inhalt des Bildes zu verstehen.

Außerdem benutzen auch Screenreader den alternativen Text, um z.B. Menschen mit Sehbehinderungen eine Website vorlesen oder erklären zu können.

Es hat also nur Vorteile, den alternativen Text für Bilder zu verwenden!

Dieser sollte präzise und knapp das Bild beschreiben, z.B. “Roter Sportwagen im Sonnenuntergang“.

Auf Webseiten werden Bilder in HTML folgendermaßen eingebunden:

<img src='ordner/zum/bild/bildname.webp'

Den Alternativen Text kannst du durch das “alt”-Attribut hinzufügen, das sieht dann folgendermaßen aus:

<img src='ordner/zum/bild/bildname.webp' alt='Alternativer Text'

Vorsicht

Zu lange Dateinnamen oder Alternative Texte können von Suchmaschinen negativ bewertet werden. Versuche also, wirklich präzise zu sein, und keine unnötig langen Namen und Texte zu verwenden, auch wenn du dadurch mehr “Keywords“ verwenden könntest. Suchmaschinen mögen dieses “Keyword stuffing” garnicht gerne!

Beispiel

Zu kurze, generische Bildbenennung ohne Alternativen Text

Schlecht, denn: Generischer Dateiname, kein alt-Text

Zu lange Bildbenennung und Alternativer Text, Keyword Stuffing

Schlecht, denn: “Keyword stuffing”, wird negativ bewertet

Optimale Bildbenennung und Alternativer Text

Genau richtig!

Markdown

Auch wenn du deine Webseiten nicht direkt in HTML schreibst, sondern z.B. Markdown verwendest, kannst du Alternativen Text benutzen!

(Markdown ist eine einfache Textauszeichnungssprache, die verwendet wird, um Text mit Formatierungen wie Überschriften, Listen und Links zu strukturieren und kann automatisch in HTML umgewandelt werden)

Das sieht dann so aus:
Bilder mit Alternativem Text in Markdown einfügen

Quellen

[1] Granka, Joachims & Gay. Eye-Tracking Analysis of User Behavior in WWW Search. 2004.
[2] Beus. Klickwahrscheinlichkeiten in den Google SERPs. 2015.

Updated: