Webdesign und SEO – ein offener Brief an alle Webdesigner und Webprogrammierer

Letztes Artikel-Update: 16. April 2023

Webdesign und Suchmaschinenoptimierung sollten eine Symbiose eingehen. Damit das gelingt zeigt die ein waschechter SEOler was es dabei aus SEO-Sicht zu beachten gibt.
4.7
(58)

Liebe Webdesigner und Webprogrammierer,
ohne Euch wäre die Internet-Welt ein grauer und langweiliger Ort ohne Emotion und Leidenschaft (ok, zumindest fast).

Jede schöne Website, die ihr mit Fleiß und Geduld in stundenlanger Arbeit erstellt habt, hat es verdient, eine möglichst große Zielgruppe anzusprechen und viel Traffic zu generieren. Es wäre doch schade, wenn eure ganze Mühe von niemandem gesehen würde.

Der Traffic-Kanal über die Suchmaschinen ist für viele Websitebetreiber attraktiv, da für die organischen Suchergebnisse bei Google & Co. kein Geld bezahlt werden muss. Daher ist eine Optimierung für diesen Kanal oft sinnvoll.

Das Tolle dabei:
Du, lieber Designer/Programmier, kannst aktiv die Suchmaschinenoptimierung mitgestalten!

In diesem Beitrag zeige ich, ein SEOler, Dir neun Regeln, die du beachten solltest, um eine Website für die Suchmaschinen zu optimieren.

Usability geht immer vor Design

So sehr wir auch knallige Effekte mit einem Wow-Moment lieben, sollte eine Website stets Usability-Standards einhalten und von jedem User schnell verstanden werden.
Innerhalb weniger Sekunden sollte ein Besucher den Sinn der Website verstanden haben.

Sei daher nicht zu verspielt und mache das Leben für den normalen Besucher so einfach wie nur möglich. Im „Above the fold“ (der Bereich, den User sehen, ohne zu scrollen) muss eine klare Botschaft zu lesen sein, um was es auf der Seite geht.

Leite Deine Besucher durch die Website, lass sie nicht mit Animationen und schönen Bildern alleine, sondern zeige ihnen den Weg, z.B. durch interne Verlinkungen und eine klare visuelle Struktur. Es sollte bei jedem Element klar sein, wofür es steht und was es kann.

Überschriftenstruktur

Pro Unterseite soll es immer nur eine H1-Überschrift geben und diese sollte als Hauptüberschrift für die jeweilige URL genommen werden und entsprechend groß und prominent platziert werden, da diese am wichtigsten für die Suchmaschinen ist. Der H1 folgen hierarchisch die Überschriften H2 bis H6.

Beispiel 1 – falsche Vorgehensweise:
Hier wurde ohne eine H2 von der Hauptüberschrift H1 zu einer H3 übergegangen. Auf der Webseite sollte immer zuerst mit einer H1-Überschrift gestartet werden und nicht wie hier mit einer H3.

H3 Zwischenüberschrift
H1 Hauptüberschrift
H5 Zwischenüberschrift
H4 Zwischenüberschrift
H2 Fazit

Beispiel 2 – richtige Vorgehensweise:
Hier wird die Überschriften-Hierarchie richtig eingehalten, es wird nur eine H1 verwendet und es wird keine Überschrift (z. B. von H2 zu H4) übersprungen.
H1 Hauptüberschrift
H2 Zwischenüberschrift
H3 Weitere Zwischenüberschrift
H4 Weitere Zwischenüberschrift
H2 Noch eine letzte Zwischenüberschrift
H2 Fazit

Ebenfalls ein beliebter Fehler ist es, in dr Navigation, im Footer oder in der Sidebar H-Überschriften zu setzen. Dies sollte bei einer sauberen Überschriften-Struktur vermieden werden. Nur im Inhaltsbereich sollten die H-Überschriften eingesetzt werden.

Ladezeiten beachten

Laut der Studie „2015 Report: Global Consumer Online Shopping Expectations“ sind lange Ladezeiten ein wahrer Conversion-Killer und damit auch schädlich für die Suchmaschinenoptimierung, da viele User von einer Website wieder abspringen, wenn diese zu lange lädt.

Webdesign und SEO – ein offener Brief an alle Webdesigner und Webprogrammierer 1

Behalte beim designen und programmieren immer im Hinterkopf, wie wichtig kurze Ladezeiten sind. Für viele CMS-Systeme gibt es Caching-Plugins, die Ladezeiten bereits reduzieren können. Für WordPress ist das kostenpflichtige Plugin WP-Rocket empfehlenswert, da sich dieses leicht einstellen und die Performance deutlich verbessern lässt.

Webdesign und SEO – ein offener Brief an alle Webdesigner und Webprogrammierer 2

Analysiere die Ladezeiten deiner Website mit gängigen Tools wie Pingdom, um die größten Ladezeitenfresser zu identifizieren und anschließend zu beseitigen.

Besonders zu groß geladene und nicht komprimierte Bilder können ein Problem darstellen. Versuche Bilder immer in der genau passenden Größe hochzuladen und vorher zu komprimieren – z.B. mit tinypng.
Hier findest Du mehr Infos zum Thema Bilder optimieren fürs Web – Tools, Dateiformate & Plugins.

Das title-Element

Mit dem Title-Tag kannst du bereits eine ordentliche Grundoptimierung deiner Website oder der deines Kunden hinbekommen. Der Seitentitel ist mit das Erste, was ein User auf der Google-Suche über eine Website erfährt. Hier lässt sich mit wenig Aufwand bereits Großes erreichen.

Webdesign und SEO – ein offener Brief an alle Webdesigner und Webprogrammierer 3

Bei der Erstellung des Title-Tags sollten folgende Punkte beachtet werden:

  • Der Title sollte nicht länger als 70 Zeichen / 500 Pixel sein.
  • Jede URL sollte einen einzigartigen Title-Tag haben.
  • Der Title sollte zum Klicken animieren und keine bloße Aneinanderreihung von Keywords sein.

Negatives Beispiel:
„Bitcoins, Bitcoins kaufen, Bitcoins verkaufen, Bitcoins zu Geld machen“
Hier weiß der User nicht, was ihn genau erwartet.

Positives Beispiel:
„Anleitung: Der Handel mit Bitcoins verständlich erklärt | Domainname“

Bei diesem positiven Beispiel weiß der User schon eher, was ihn erwartet – eine verständliche Anleitung zum Handel von Bitcoins…. Das Leben kann so einfach sein.

Je häufiger in den Google-Suchergebnissen deine URL angeklickt wird, desto höher steigen die Chancen auf bessere Rankings – mehr zur CTR (Click-Through-Rate) erfährst du im Artikel: So steigern Sie Ihre CTR in den organischen Suchergebnissen

Fehlende oder zu kurze Title kannst du mit der Google Search Console identifizieren. Unter dem Punkt „Darstellung in der Suche“ erscheint der Unterpunkt „HTML-Verbesserungen“. Hier werden Dir alle Seiten angezeigt, deren Titel noch optimiert werden sollte.

Wie du siehst, ist der Meta Title hilfreich zur Suchmaschinenoptimierung und kann bereits mit wenigen Handgriffen optimiert werden.
Benutzt du WordPress, kannst du mit kostenlosen Plugins wie dem Yoast SEO for WordPress Plugin den Title-Tag optimieren.

Meta Description – Die Kurzbeschreibung der Seite

Die Description ist laut Google kein direkter Rankingfaktor, kann jedoch zusätzlich die CTR positiv beeinflussen. Daher optimiere immer die Meta Description neben den Titel Tags gleich mit. Die Description sollte nicht länger als 170 Zeichen sein und nicht mehrfach auf anderen URLs verwendet werden, sondern immer einzigartig sein.

Die Description sollte ebenfalls nicht mit Keywords zugekleistert werden, sondern einen kurzen Auszug darstellen, welche Informationen der User zu erwarten hat und ihn zum Klicken animieren.

Webdesign und SEO – ein offener Brief an alle Webdesigner und Webprogrammierer 4

Du kannst versuchen, die Description mit Sonderzeichen etwas aufzuwerten und damit die CTR zu erhöhen.

Hier ein Beispiel für eine gelungene Meta Description:
„Bitcoins kaufen bei Domainname ✓ Einfach und schnell mit Bitcoins handeln ✓ Keine Registrierung notwendig ➜ Stabiler Wert und zu 100 % sicher.“

Mit dem SERP Snippet Generator kannst du kannst du Dir deine Title Tags und Descriptions anzeigen lassen und gegebenenfalls optimieren

Robots.txt-Datei beachten

Mit der Robots.txt-Datei können bestimmte Bereiche auf deiner Website von den Suchmaschinencrawlern ausgeschlossen werden. Standard bei WordPress ist das Ausschließen (disallow) der Anmelde-Maske unter der URL /wp-admin. Verständlicherweise hat der Crawler hier nichts zu suchen.

Überprüfe die Robots.txt-Datei um gegebenenfalls falsche Einträge, die ein Auslesen wichtiger Unterseiten oder gar deiner ganzen Domain durch die Crawler verhindern, zu beheben. In der Google Search Console kannst du Dir unter „Crawling“ und dann „robots.txt-Tester“ alle Einträge anzeigen lassen.

Mehr über die Robots.txt-Datei findest du im Artikel: robots.txt: The ultimate guide

Duplicate Content vermeiden und beheben

Achte darauf, dass die Texte auf der Website nicht 1zu1 von anderen Seiten kopiert wurden oder, was bei vielen CMS/CMS-Templates angeboten wird, sinnloser Demo Content auf der Website vorhanden ist. Solche Texte werden von Google oftmals als Duplicate Content gewertet, was auf eine geringe informative Qualität deiner Seite schließen kann.

Wenn du mit einer Website gute Rankings erzielen willst, sollten all deine Texte einzigartig (unique) sein und von nirgendwo kopiert worden sein.
Fälschlicherweise wird die Robots.txt-Datei oft missbraucht, um Duplicate Content auf einer Domain zu beheben. Das Ausschließen des Suchmaschinen-Crawler führt nicht automatisch zur Deindexierung bestimmter Seiten. Besser ist es, doppelte Inhalte mit einem Noindex- oder Canonical-Tag zu beheben.

An alle Webprogrammierer: Es gibt für SEOs nichts Ärgerlicheres als einzelne Seiten nicht auf „noindex,follow“ setzen zu können. Wenn versucht wird, jede URL, auch solche ohne einen Mehrwert/Nutzen, in den Such-Index zu integrieren, kann das Budget, welches der Crawler von Google zur Verfügung gestellt bekommt, verringert werden und die Crawler schauen deutlich seltener auf deiner Website vorbei und stufen diese ggf. als qualitativ minderwertig ein. Daher ist es so wichtig, einzelne Unterseiten auf „noindex,follow“ setzen zu können.

Mehr zum Umgang mit Duplicate Content findest Du in den Artikeln:
Duplicate Content – Lösungen zur Behebung von doppelten Inhalten und Duplicate Content bei Google vermeiden

Sitemap erstellen und hinterlegen

Mit den meisten gängigen CM-Systemen kannst Du eine Sitemap.xml-Datei für deine Website erstellen lassen. Diese hilft dabei, deine Seite besser zu verstehen und schwach intern verlinkte Seiten besser zu finden und zu indexieren.

Damit die Sitemap von Google gefunden wird, kannst Du einen Eintrag zum Pfad (z.B. www.deine-domain.de/sitemap.xml) in die Robots.txt-Datei hinzufügen und die Sitemap in der Search Console unter „Crawling“ -> „Sitemaps“ eintragen.

Keine wichtigen Inhalte in Bildern verstecken

Ein eher grober Anfänger-Fehler: Texte die auf JPG, PNG oder ähnlichen Bilddateien platziert werden, können von Google nicht gelesen und somit nicht verstanden werden. Da Content ein sehr relevanter Rankingfaktor ist, solltest Du wichtige Informationen und Überschriften niemals auf einer Bild-Datei haben.

Nutze stattdessen auch das alt-Attribut, um Inhalte des Bildes für Suchmaschinen auffindbar zu machen.

Toller Job

Hier endet auch schon der offene Brief an alle Webdesigner und Programmierer. Ihr macht einen tollen Job! Wenn ihr jetzt noch diese SEO-Regeln befolgt, erhöht ihr auch gleichzeitig die Chancen, bei Google besser gefunden zu werden. Und erleichtert Euren SEO-Kollegen den Einstieg in Eure Seite und die vernünftige Weiterarbeit.

9 SEO-Regeln
für Webdesigner

Denn eines ist auch klar: diese Regeln sind nur der Anfang von SEO-Maßnahmen.

Bewertungsergebnis: 4.7 / 5. | Anzahl der Bewertungen: 58

Über 8.250 sind schon dabei:

Exklusive Webdesign-Inhalte

Kostenfreie Templates + wöchentlich Webdesign-Links & -tipps

Deine Daten sind sicher. Mehr Infos: Beispiele, Datenschutz, Analyse und Widerruf

Optimiere Websites und
deinen Webdesign-Workflow:

Über den Autor

Martin Hahn ist Webdesigner, Dozent, Fachbuchautor und dreifacher Papa. Seit vielen Jahren hilft er anderen effektivere Webdesigns zu erstellen – in Schulungen und mit Artikeln auf dieser Website.
Mehr über diese Website und den Autor erfahren   →

Die Inhalte des Webdesign Journals wurden mit Sorgfalt, Engagement und Liebe erstellt – so auch dieser Artikel. Wenn du Ergänzungen oder Anmerkungen hast, kannst du dich gerne bei mir melden. Ebenso wenn du Ideen oder Wünsche für weitere Themen hast.

Wenn du Ausschnitte oder Zitate in wissenschaftlichen Arbeiten zitieren möchtest, kann du dies gerne machen. Was gar nicht geht: Inhalte klauen oder kopieren! Sollte aber selbstverständlich sein…

Nach oben scrollen

Über 8.250 sind schon dabei!

Exklusive Webdesign-Inhalte

Bleibe up to date mit den kostenlosen Templates und den wöchentlichen Links & Tipps: