Log in

+49 (0)611 / 945 800 38-0 Live ChatKontakt

5 SEO-Regeln, die jeder Designer befolgen sollte

Suchmaschinenoptimierer und Webdesigner mögen zwei unterschiedliche Berufe sein, SEO und Design sind aber längst untrennbar miteinander verbunden. Schließlich nützt die schönste Webseite wenig, wenn niemand sie findet. Und auch ein Top-Ranking bei Google ist wenig wert, wenn letztlich keine Konversion stattfindet.

Weil das Webdesign die Basis für ein gutes Ranking ist, haben Webdesigner großen Einfluss auf die Sichtbarkeit. Aber nicht jede kreative Gestaltungsidee lässt sich mit dem Anspruch nach bestmöglicher Suchmaschinenoptimierung vereinen. Letztlich aber wollen auch die Designer, dass ihre Arbeit von möglichst vielen Menschen wahrgenommen wird.

Damit dieser Wunsch Wirklichkeit wird, verraten wir in diesem Artikel fünf grundlegende SEO-Regeln, die jeder Webdesigner kennen und beachten sollte. Denn SEOs und Designer sind keine Gegner, sondern Partner, die ihre Ziele nur gemeinsam erreichen können.

1. Möglichkeiten der Auszeichnungssprache ausnutzen

Die Zeiten, als durchgestylte Webseiten in Grafikprogrammen wie Photoshop entworfen wurden, um die einzelnen Elemente danach zu zerstückeln und als Bilddatei abzuspeichern, sind längst vorbei. Selbst wer großen Wert auf Ästhetik legt, kann rein mit Auszeichnungssprachen (Markups) viel erreichen. Ein guter Webdesigner zeichnet sich dadurch aus, dass er HTML, XML, XHTML und CSS perfekt beherrscht. Denn die beste Suchmaschinenoptimierung ist ein standardkonformes Webdesign, das die Möglichkeiten der Auszeichnungssprache komplett ausgeschöpft.

Der Google Crawler hat keine Augen und ist deshalb darauf angewiesen, dass wir ihm sagen, welcher Bestandteil einer Seite die Überschrift ist, welcher der Text und was Bilder sind. Deshalb gibt es in HTML, der mit Abstand meistgenutzten Auszeichnungssprache, für all das sogenannte Tags, die das jeweilige Element kennzeichnen.

Der Titel- und die Überschriften-Tags haben für Google besondere Priorität, weil darin in wenigen Wörtern wiedergegeben wird, worum es auf der Webseite geht. Überschriften sollten somit immer ordentlich ausgezeichnet sein, wobei auch die Hierarchieebenen zu beachten sind. Eine H1-Überschrift ist die wichtigste Headline und sollte nur einmal pro Seite vorkommen. Auch wenn der Webdesigner gern möchte, dass die folgende Überschrift genauso aussieht.

Die einzelnen HTML-Elemente werden mithilfe von CSS formatiert. Statt jedem HTML-Tag einzeln zu sagen, wie es auszusehen hat (z. B. Größe und Farbe der Überschrift), erfolgt die Gestaltung mit CSS über zentrale Befehle, die auch später noch Änderungen ohne großen Aufwand zulassen. Durch die Auslagerung der Gestaltungsvorschriften bleibt der Quelltext schön schlank und die Ladezeit wird verbessert.

Wenngleich sicherlich noch nicht alles möglich ist, was anspruchsvolle Designer vielleicht gern umsetzen würden, bietet CSS mittlerweile unglaublich viele Möglichkeiten, für die früher sperrige Grafiken herhalten mussten. Ob abgerundete Ecken, Farbverläufe, Schattenwürfe oder geometrische Formen – fast jede grafische Idee lässt sich heute über Code umsetzen und kann damit auch gut ranken. Wenn nicht, ist es meist eh besser darauf zu verzichten.

Übrigens: Auch die Barrierefreiheit profitiert von einem crawler-freundlichen Webdesign ungemein. Und von Barrierefreiheit profitiert auch das Ranking. Ein Thema, mit dem sich selbst viele SEO-Profis so gut wie gar nicht auseinandersetzen. Wenngleich Webseiten von Behörden sogar von Gesetzes wegen barrierefrei sein müssen.

Mehr zum Thema „warum Design so wichtig für SEO ist“, finden Sie hier.

Merke:

Jedes Element bleibt was es ist. Bilder sind Bilder und sollten nicht dafür verwendet werden um Text wiederzugeben oder als Button zu fungieren. Außerdem sollte unbedingt darauf verzichtet werden Inhalte aus ästhetischen Gründen vor dem Besucher oder vor der Suchmaschine zu verstecken. Unsichtbarer Text oder versteckte Links beispielsweise werden von Google als Spam eingestuft und können sich negativ auf das Ranking auswirken.

2. Content hat immer Vorrang

Es gibt Webdesigner, die haben vor allem ein Ziel: Sie wollen sich selbst verwirklichen. Das ist durchaus legitim, aber dann sollte man doch lieber Künstler werden, statt Webseiten zu gestalten. Für Google hat nicht die Optik, sondern der Inhalt die oberste Priorität. Und auch die Besucher kommen letztlich deshalb, weil sie die Antwort auf eine Frage oder die Lösung für ein Problem suchen und nicht weil der Blümchenhintergrund so pittoresk ist.

Das Webdesign ist niemals Selbstzweck, sondern hat stets die Aufgabe den Content in den Mittelpunkt zu rücken. Genau das kann eben auch bedeuten, dass sich ein Designer in seiner Kreativität zurücknehmen muss. Alle Designelemente sollten den Inhalt unmittelbar unterstützen. Ist das nicht der Fall, sollte darauf zugunsten der Fokussierung konsequent verzichtet werden.

Die Grundfrage lautet: Ist dieses Seitenelement dem Inhalt zuträglich oder nicht? Nur wenn die Frage eindeutig bejaht werden kann, darf es hinzugefügt werden oder bleiben.

3. Above the Fold fokussieren

Der erste Eindruck entscheidet – auch bei Webseiten. Der Bereich einer Webseite, den ein Besucher sofort sieht, ohne dafür scrollen zu müssen, ist somit entscheidend. Er wird als Above the Fold bezeichnet. Webdesigner stehen vor der Herausforderung, hier gleichzeitig für das Branding zu sorgen (Logo, Name der Webseite, etc.), Navigation und Suche unterzubringen sowie so viel Aufmerksamkeit für den Content zu wecken, damit der Besucher auf der Seite bleibt und nach unten scrollt.

Die Tatsache, dass Webseiten heute auf den verschiedensten Endgeräten und damit auch auf den verschiedensten Bildschirmen – von winzig bis riesig – angezeigt werden, hat dabei Vor- und Nachteile. Einerseits gibt es keine mehr oder weniger feste Grenze mehr für den sichtbaren Bereich, weil auf einem Smartphone natürlich deutlich weniger zu sehen ist als auf einem Fernseher. Andererseits haben aber gerade die mobilen Endgeräte dafür gesorgt, dass die Nutzer gelernt haben zu scrollen.

War es früher wichtig so viele Infos wie möglich im sichtbaren Bereich unterzubringen, muss hier heute vor allem das Interesse für den Rest der Seite geweckt werden. Mithilfe einiger Tricks lässt sich die Scrollfreudigkeit der Besucher steigern. Versetzte Spalten sorgen zum Beispiel dafür, dass Bilder oder Textblöcke zum Teil abgeschnitten sind, so dass der Nutzer zum Scrollen gezwungen ist, wenn er sie komplett sehen will. Aber auch ein aufblinkender Pfeil kann darauf hinweisen, dass es noch mehr zu entdecken gibt und macht viele Besucher neugierig.

Kann der Above the Fold nicht auf Anhieb überzeugen, klickt ein Großteil der Besucher im Browser auf den Pfeil nicht links, um zurück zu den Suchergebnissen zu gelangen. Google registriert eine hohe Absprungrate sowie eine geringe Verweildauer und zieht aus diesen negativen Nutzersignalen den Schluss, dass die Webseite für den verwendeten Suchbegriff offensichtlich wenig Relevanz besitzt. Das Ranking verschlechtert sich, obwohl nach dem Scrollen vielleicht der perfekte Content sichtbar geworden wäre.

Tipp!

Um herauszufinden, welcher Bereich der Webseite auf den diversen Endgeräten zum Above the Fold gehört, muss man sich nicht jedes Gerät anschaffen. Das Plugin Window Resizer für Google Chrome zeigt den sichtbaren Bereich für verschiedene Bildschirmauflösungen auf Knopfdruck an.

4. Klare Navigation und Linkstruktur

Die Navigation ist das wichtigste Element einer Webseite und gleichzeitig oftmals das schwierigste. Denn je komplexer und verschachtelter eine Webseite, desto komplizierter die Menüführung. Schon allein deshalb ist eine durchdachte Webseitenarchitektur das A und O.

Der Google Crawler muss von der Navigation aus jeder Unterseite erreichen können. Nur Seiten, die durch Links aufrufbar sind, können von Google selbstständig indexiert werden. Gleichzeitig muss die Navigation in der Lage sein, die Besucher intuitiv durch die Webseite zu geleiten.

Statt für die Navigation auf JavaScript zu setzen, sollte man sich auch hier der vielfältigen Möglichkeiten von HTML und CSS bedienen. Auch ohne die von Google ungeliebte Skriptsprache, die genauso wie Flash tunlichst vermieden werden sollte, sind heute sowohl optisch ansprechende als auch benutzerfreundliche Menüs möglich, denen sogar die Suchmaschinen problemlos folgen können.

Um es dem Crawler noch einfach zu machen von Seite zu Seite zu hüpfen und den Besuchern die Orientierung zu erleichtern, ist eine zusätzliche Brotkrümelnavigation empfehlenswert (Wo bin ich?). Die Breadcrumbs können in den Google-Suchergebnissen sogar in den Rich Snippets angezeigt werden, auf die Webdesigner ebenfalls ein Auge haben sollten.

Sprechende URLs statt kryptischer Zeichenfolgen sind genauso ein Basic der OnPage-Optimierung wie eine gewissenhafte Linkhygiene. Dazu gehört zum Beispiel, dass der Ankertext treffend gewählt wird und Links auf ihre Funktionalität geprüft werden. Tote Links müssen ausgetauscht oder entfernt werden.

Bei einem Webseiten-Relaunch wird der internen Verlinkung noch mal eine ganz andere Bedeutung zuteil. Denn häufig ändert sich mit einem Relaunch auch die Linkstruktur, was zwangsläufig zu funktionsunfähigen oder fehlgeleiteten Links führt. Hier gilt es Weiterleitungen sinnvoll und korrekt einzusetzen.

5. Alle Endgeräte berücksichtigen

Anders als im Print-Bereich kann sich ein Webdesigner nicht auf ein einziges Medium konzentrieren. Stattdessen kann eine Webseite auf dem Widescreen-Monitor oder dem Laptop angezeigt sowie mit dem Smartphone oder Tablet aufgerufen werden. Und wie bereits angedeutet, muss sie auf jedem Endgerät gut aussehen und Lust auf mehr wecken.

Angesichts der schon jetzt beachtlichen Zugriffszahlen von mobilen Endgeräten sowie der unaufhörlich nach oben zeigenden Prognose, ist responsives Webdesign längst unverzichtbar. Google hat das mit seiner Mobile-First-Strategie deutlich unterstrichen.

Responsive Webdesign hat den Vorteil, dass es von Haus aus sehr schlank gemacht ist. Das ist nicht nur deshalb notwendig, weil die Webseite auf jedem Endgerät ein hübsches Bild abgeben soll, sondern auch weil die ohnehin schon wichtige Ladezeit-Performance bei mobilen Endgeräten noch mal bedeutender ist. Wer unterwegs mit dem Smartphone surft, ist ungeduldiger als derjenige, der im Büro vor dem Computer sitzt. Gleichzeitig sorgt das schlechte Mobilfunknetz zusätzlich für Verzögerungen.

Mobiloptimiertes Webdesign kann aber auch bedeuten, dass Inhalte und Elemente, die auf einem großen Bildschirm sinnvoll, weil bereichernd sind, auf einem kleinen Display ganz wegfallen. Letztlich hat ein responsives Webdesign die Aufgabe für geräteunabhängig zufriedene Besucher und somit für stabile Nutzersignale zu sorgen.

Tipp!

Wie eine Webseite auf unterschiedlichen Geräten aussieht, aber auch wie dort ihre Usability ist, kann im kostenlosen Responsive Check Center getestet werden. Einfach URL eingeben, die gewünschten Geräte und das Format (hoch und/oder quer) auswählen – schon geht's los.

Mario Jung

Mario Jung ist Gründer und Geschäftsführer der Online-Marketing-Agentur ReachX. Er hat sich auf die Themen Suchmaschinenoptimierung, alternative Trafficquellen und Linkabbau spezialisiert, zu denen er als Speaker regelmäßig Vorträge gibt und auch als Autor in Erscheinung tritt.

Darüber hinaus ist er Veranstalter des OMT in Wiesbaden, auf dessen Webseite neben den Informationen zur jährlich stattfindenden Konferenz auch eine Vielzahl von Weiterbildungsangebote für Unternehmen und Einzelpersonen rund um das Thema Online Marketing zu finden sind.

Hilfe & Support

  • Fragen & Antworten
  • Checklisten
  • Ticket System
  • Live Chat

Kontaktieren Sie uns

3QMEDIA - The Quality Web

Äppelallee 27
D - 65203 Wiesbaden 

Telefon: +49 (0)611 / 945 800 38-0
Telefax: +49 (0)611 / 945 800 38-9
Email: mail@3QMEDIA.de

Log in or Sign up