Logo-KOMMA99

SEO Webdesign: Schritte und Beispiele für eine optimierte Website

gut investierte Minuten

SEO-Webdesign-KOMMA99

Inhaltsverzeichnis

Webdesign braucht SEO und umgekehrt – So einfach wird mehr Sichtbarkeit und Traffic erreicht

Eine Website kann noch so aufwendig und ansprechend gestaltet sein – ohne eine SEO Strategie (Suchmaschinenoptimierung) dahinter ist es jedoch sehr unwahrscheinlich, dass sie auch gesehen wird. Andersrum kann eine Website auch einer ausgeklügelten SEO Strategie folgen, wenn das Webdesign und die Usability nicht stimmen, wird der Besucher die Seite aber schnell wieder verlassen und die Inhalte nicht wahrnehmen. 

In diesem Blogbeitrag zeigen wir dir, als Online Marketing Agentur, wie du Webdesign und SEO (Suchmaschinenoptimierung) gekonnt kombinieren kannst – Für mehr Sichtbarkeit und Benutzerfreundlichkeit.

 

Was versteht man unter SEO Webdesign?

Wenn man von SEO (Suchmaschinenoptimierung) Webdesign spricht, dann ist ein grafisch ansprechendes Webdesign der Webseite gemeint, das  SEO relevante Faktoren miteinbezieht. Das bedeutet, dass die grafischen Elemente im Webdesign der Webseite mit SEO Kriterien, also Kriterien, die ein gutes Ranking bei Suchmaschinen wie Google ermöglichen, kombiniert werden. 

Webdesign und SEO sind zwar sehr unterschiedliche Bereiche, verfolgen aber beide dasselbe Ziel: Die Erwartungshaltung der  Nutzer (User) erfüllen, alle Informationen in Form von Content liefern und der Website und dem Unternehmen zu mehr Sichtbarkeit verhelfen. Grob zusammengefasst: Die Benutzerfreundlichkeit oder auch Usability der Webseite zu steigern ist das Ziel.

 

Die Benutzerfreundlichkeit an erster Stelle

Für ein Unternehmen ist es von großem Wert, eine Webseite mit ansprechendem Webdesign und Suchmaschinenoptimierung (SEO) zu besitzen, um Sichtbarkeit in Suchmaschinen zu erwirken. Das Unternehmen will gefunden werden und Inhalte preisgeben, sodass Besucher der Website zu Kunden werden. Oftmals erwartet sich ein Unternehmen von einem Webdesigner eine besonders pompöse, aufregende Seite, die im Gedächtnis bleibt. Der Part des “gefunden werdens” durch die Suchmaschinenoptimierung wird gerne vergessen. Und selbst wenn die Website gefunden wird – Man wünscht sich als Inhaber, dass der Besucher längere Zeit darauf verbringt, die Inhalte wahrnimmt und es im besten Fall zu einer Conversion, also einem Kauf oder der Inanspruchnahme einer Dienstleistung kommt. 

Zur Benutzerfreundlichkeit gehört also nicht nur eine schön gestaltete Website mit professionellem Webdesign, sondern auch die Ladezeit, die Navigation auf der Webseite, ein ansprechender Header und Footer Bereich, und noch viel mehr. Mit der Benutzerfreundlichkeit im Hinterkopf erwarten dich im folgenden 5 goldene Schritte, die einen Überblick über ein optimiertes SEO Webdesign geben und dir somit den Weg zu einer Website ebnen, die visuell ansprechend ist und auch gefunden wird. 

 

5 Schritte auf dem Weg zur optimierten Website

Schritt #1 – Das SERP Snippet 

Beginnen wir am Anfang der Reise unseres Besuchers – Alles beginnt mit einem Keyword, also einer Phrase, die der Benutzer in die Suchmaschine eingibt, um überhaupt auf eine Website zu kommen. Die Suchergebnisseite auf Google zeigt verschiedene Suchergebnisse an – jedes Suchergebnis wird als  SERP Snippet dargestellt.  Ein SERP Snippet ist eine kurze Übersicht dessen, was User nach einem Klick auf das Suchergebnis erwarten können:

SEO-Webdesign_Komma99_9

Im SERP Snippet findet man ganz oben die URL, darunter den Title und als letztes die Meta-Description der Seiten. Schon hier wird bewusst, oder auch unbewusst, entschieden, welche Website für den User am ansprechendsten ist. Ist der Title oder die Meta-Description zu lang, so wird diese mit einem “…” abgekürzt. Title und Meta-Description sollten die Länge einhalten, die von Suchmaschinen (wie Google) vorgegeben wird, um vollständig angezeigt zu werden. Hierfür kann unser hauseigener SERP Snippet Generator genutzt werden, mit dessen Hilfe du das SERP Snippet erstellen und optimieren kannst – Nicht nur auf den Keyword Fokus bezogen, sondern eben auch auf die Länge.

Zusätzlich macht es selbstverständlich Sinn, Title und Meta-Description kurz und prägnant zu erstellen. Mit Symbolen und aussagekräftigen Worten hebt man sich von der grauen Masse der anderen SERP Snippets im Design ab und macht seine Website somit attraktiver für den Suchenden auf Google. Hierfür gelten zusammengefasst folgende Regeln aus der Sicht der Suchmaschine:

  • Der Title soll höchstens 70 Zeichen oder 500 Pixel umfassen.
  • Die Meta-Description soll höchstens 170 Zeichen umfassen.
  • Der Title Tag der URLs der Website sollte sich unterscheiden.
  • Symbole und aussagekräftige Schlagworte animieren User eher die Website zu besuchen.

Das Optimieren des Titles und der Meta-Beschreibung hat aber noch einen Vorteil – Je öfter Nutzer auf deine URL klicken, desto höher ist deine CTR (Click through Rate) und desto eher wirst du in Suchmaschinen, wie Google, nicht nur aufgrund deiner Inhalte und dem Design ganz oben gefunden werden. 

In unserer Online Marketing Agentur KOMMA99 bauen wir Webseiten ausschließlich mit WordPress. Hier kreieren wir als Online Marketing Agentur ein wunderbares Webdesign, Inhalte und nutzen die Scuhmaschinenoptimierung (SEO). Ein sehr gutes Plugin für die WordPress Oberfläche und die online Optimierung von Title und Meta-Description ist dabei Yoast SEO – Das Plugin macht die Optimierung ganz einfach und ist sehr benutzerfreundlich aufgebaut.  

 

Schritt #2 – Der Header, Above the Fold & Footer

Wir haben es geschafft, und die Nutzer mit unserer Title und Meta-Description davon überzeugt, unsere Website und das Webdesign zu besuchen und den Content zu begutachten. Das Erste, was der Besucher auf unserer Webseite sieht, sind der Header und der Above the Fold Bereich, die wir im Webdesign erstellen. 

SEO-Webdesign_Komma99_6

Im Header, in unserem Beispiel der schmale weiße Streifen ganz oben, befindet sich standardmäßig das Logo links und das Menü rechts oder mittig. Diese Struktur wird auf fast allen Webseiten mit einem guten Design oder Webdesign umgesetzt, womit sich Besucher (User) schon daran gewöhnt haben und somit die Navigation erleichtert wird. 

Unter dem Header befindet sich der Above the Fold Bereich – Genau wie für Title und Meta-Description gilt hier: Kurz, knackig und ansprechend. Aus Design Sicht sollte der Bereich einladend sein und gut übersichtlich, für den Nutzer  sollten hier folgende Fragen gleich geklärt werden:

  • Finde ich auf dieser Seite wonach ich suche?
  • Was sind meine Vorteile?
  • Was ist der nächste Schritt?

Idealerweise scrollt der Besucher dann weiter, navigiert im übersichtlichen Menü zu einer anderen Leistungsseite, oder nimmt gleich Kontakt auf. Egal wie der Besucher weiter verfährt – Er sollte von der Website überzeugt werden, und nicht zurück zur Suchergebnisseite navigieren, sodass du ein gutes Ranking erzielen kannst. Im Above the Fold Bereich kann dafür mit Stichworten gearbeitet und auch gerne ein CTA (Call to Action) Button für die Optimierung aus SEO Sicht eingebaut werden.

Im Footer hingegen, also der Bereich, der ganz unten gefunden wird, sollten standardmäßig alle Kontaktdaten und Informationen zum Unternehmen für den User auffindbar sein. 

SEO-Webdesign_Komma99_5

Header und Footer sind dabei bei jeder Leistungsseite gleichbleibend, um eine gewisse Konsistenz auf der ganzen Website zu schaffen und den Nutzer nicht zu verwirren – Sie bilden vom Design Aspekt her den Rahmen der Website. 

 

Schritt #3 – Die Struktur der Website

Webdesign dreht sich, wie schon mehrmals erwähnt, nicht nur um die Ästhetik, sondern auch um Struktur. Und auf einer Website gibt es eine Vielzahl verschiedener Strukturen, die beachtet werden sollten, damit die Website auch auf der Suchmaschine rankt. 

Es ist wichtig eine Struktur zu verfolgen, weil der Besucher höchstwahrscheinlich das erste Mal auf deiner Website landet – eine neue Umgebung, in der er sich zurechtfinden muss. Findet der Besucher sich nicht zurecht, wird er die Website schnell wieder verlassen und deinen Content und das Design nicht wahrnehmen – Wir wollen aber doch das Gegenteil erreichen. Die Devise lautet also: Je logischer und übersichtlicher die Seite strukturiert ist, desto besser gelingt die Suchmaschinenoptimierung. Dabei kann man verschiedene Strukturen auf der Website unterscheiden, die jeweils verschiedenen Regeln folgen:

Menüstruktur

Die Menüstruktur beschreibt die Struktur der verschiedensten Leistungsseiten der Webseite untereinander. Um die Menüstruktur anschaulicher zu erklären, halten wir uns hier wieder an unser Beispiel.

SEO-Webdesign_Komma99_4

Hier gilt eine Regel besonders: Jede Seite sollte mit maximal 3 Klicks (Klicktiefe 3) erreicht werden. Eine höhere Klicktiefe macht die Website unübersichtlich und verwirrend, sodass der Besucher nicht zurückfindet, wodurch automatisch die Suchmaschinenoptimierung leidet. Ein weiterer Vorteil: Suchmaschinen ranken Seiten mit einer geringen Klicktiefe höher, weil auch Suchmaschinen dann leichter durch die Seite crawlen können – Eine Win-Win Situation. 

Für Onlineshops gilt das Prinzip auch und ist auch umsetzbar, wenn man sich Webseiten wie Amazon genauer anschaut. Die optimale Klicktiefe ist einzig und alleine eine Sache der Planung und Struktur im Design. 

Inhaltsverzeichnis

Ein Inhaltsverzeichnis ist nicht auf jeder Unterseite relevant, aber vor allem bei langen Texten, wie Blogartikeln, unbedingt notwendig. Besucher werden gerne und oft von langen Texten (Content) abgeschreckt. Für die SEO Onpage Optimierung sind diese oft notwendig, aber können auch überfordern, wenn sie nicht gut strukturiert und übersichtlich gestaltet sind. 

SEO-Webdesign_Komma99_3

An unserem Beispiel der Website unserer Online Marketing Agentur – einer unserer Blogartikel über die Customer Journey – kann man im Inhaltsverzeichnis auf einen Blick sehen, was einen erwartet. Das Inhaltsverzeichnis ist zusätzlich klickbar, wodurch eine Navigation auf der Unterseite noch leichter fällt. 

Überschriftenstruktur

Mit dem Inhaltsverzeichnis hängt die Überschriftenstruktur eng zusammen. Sie ist nicht nur relevant für die Suchmaschine, um die Hierarchie des Textes zu begreifen, sie hilft auch dem Leser einen Überblick zu behalten und den roten Faden durch den Text zu finden. 

Am Beispiel unseres Inhaltsverzeichnisses würden die H-Tags online (Überschriften, H für Headlines) im technischen Bereich von SEO so aussehen: 

[H1] Customer Journey

[H2] So hast du die Customer-Journey in der Hand und generierst neue Kunden

[H3] Wie wird die Customer-Journey eigentlich definiert?

[H3] Modelle der Customer Journey

[H4] Das AIDA Modell

[H4] Die 5 Phasen der Customer Journey

usw. 

Beim Verfassen von SEO Texten spielt diese H-Tag Struktur zusätzlich eine große Rolle bezüglich Keywords und Hierarchie. Mehr dazu findest du in dem Blogartikel unserer Online Marketing Agentur über Keywords. Willst du deine Inhalte nicht selbst erstellen? Dann nimm Kontakt mit uns auf – als Online Marketing Agentur schreiben wir deine Texte gerne!

 

Schritt #4 – Die Usability & mobile Ansicht

Unsere Website ist jetzt also gut strukturiert, stellt dem Besucher einen roten Faden durch die Website bereit und ist ästhetisch gestaltet. Ein überaus wichtiger Punkt für Webdesign und SEO fehlt aber noch, der jeden Tag mehr ein relevantes Kriterium für das Ranking darstellt – die mobile Ansicht. 

Nutzer greifen immer häufiger per Handy auf eine Website zu, egal ob unterwegs oder auch zu Hause – Die mobile Suche ist einfach und unkompliziert. Auch Suchmaschinen wie Google merken das und ranken Websites höher, deren mobile Ansicht optimiert ist. Laut den neuesten Algorithmus-Updates sollen  Websites ohne mobile Ansicht sogar gar nicht mehr auf Google gefunden werden. Das gibt uns aber keinen Grund zur Sorge, denn die mobile Ansicht erstellen wir mit WordPress und Plugins wie Elementor automatisch und diese müssen nur noch angepasst werden, sodass alles klickbar bleibt und weiterhin funktioniert. 

SEO-Webdesign_Komma99_2

Zu bedenken ist, dass das Scrollen und Klicken auf einem Handy anders abläuft, als auf dem Desktop oder am Tablet – genauso, wie wir ein Taschenbuch anders durchblättern als eine Enzyklopädie. Benutzerfreundlichkeit & Usability sind die Schlagworte – dann gilt es die mobile Ansicht einfach selbst auszutesten. 

 

Schritt #5 – Die technischen Faktoren

Im bisherigen Blogbeitrag sind wir alle Punkte durchgegangen, die der Besucher aktiv sehen und anklicken kann. Dabei waren Themen aus dem SEO Bereich genauso vertreten, wie aus dem Webdesign Bereich. Die technischen Faktoren sind genau der springende Punkt, der das Webdesign von SEO unterscheidet, aber gleichzeitig auch zusammen führt. Folgende Punkte solltest Du unbedingt beachten, wenn du deine Seite technisch für eine höhere Benutzerfreundlichkeit optimierst:

Ladezeit

Die Ladezeit deiner Website kann deine Conversions minimieren – Hierbei geht es tatsächlich nur um Sekunden. Lädt eine Website länger als 5 Sekunden, kann es sein, dass der Besucher abspringt und zurück auf die Suchergebnissseite navigiert. Wenn ein Besucher von der Seite schnell wieder abspringt, erkennt das die Suchmaschine und wertet dies als negativen Rankingfaktor – Eine schnelle Ladezeit ist also oftmals der Schlüssel, um den Besucher gleich zu behalten. 

Um die Ladezeit der Website positiv zu beeinflussen, bieten sich WordPress Plugins wie WP-Rocket an. Sie verbessert die Performance der Website nachhaltig und ist leicht einzustellen. Gleichzeitig kannst du die Ladezeit deiner Website mit Tools wie “Google Pagespeed Insights” oder GTmetrix regelmäßig überprüfen. Schon große Bilder oder aufwendige Effekte können eine Rolle bei der Ladezeit spielen und deine Conversions langfristig minimieren. 

SEO-Webdesign_Komma99_1

 

robots.txt

Die robots.txt Datei ist eine Textdatei, die im Root-Verzeichnis der Domain hinterlegt wird – Sie ist besonders wichtig, um deine Website von unnötigen Suchmaschinen Crawlern zu bewahren. Das bedeutet, du setzt sie dort ein, wo der Crawler nichts verloren hat – ein Beispiel dafür ist die Anmelde-Maske. 

Der Hauptgrund nicht indexierbare Seiten in der  robots.txt festzulegen ist es, das Crawling-Budget sinngemäß zu nutzen, und die Suchmaschinen nicht Bereiche deiner Website durchsuchen zu lassen, die unnötig für das Ranking sind, oder dieses sogar durch ein Crawling verschlechtern. Wichtiger Begleiter für das Installieren der robots.txt und der Crawlingbereiche ist die Google Search Console.

HTTPS und SSL Zertifikat

Ein HTTPS- oder SSL-Zertifikat bedeutet, dass deine Website sicher ist – Das macht deine Website für den Besucher jedenfalls attraktiver. Aber auch Google wertet die Zertifikate, denn mit HTTPS und SSL rankst du eher, als ohne. 

Sitemap

Die Sitemap deiner Website ist für den Besucher nicht sichtbar – Für Suchmaschinen, wie Google, schon. Sie wird als Landkarte deiner Website definiert – Dort wird Suchmaschinen gezeigt, welche Seiten verfügbar sind und von den Crawlern durchsucht und gelistet werden können . Anhand der Einträge in deiner Sitemap erkennt der Crawler-Bot schnell, welche Seiten neu oder aktualisiert sind und beschränkt seine Crawling-Aktivitäten nur auf diese. 

Die Sitemap kannst du zusätzlich in der Google Search Console verzeichnen, um immer ein Auge darauf zu haben.

Strukturierte Daten

Auch strukturierte Daten können vom Besucher nicht gesehen werden, spielen aber für Google eine entscheidende Rolle. Diese Informationen und Inhalte werden für Suchmaschinen gekennzeichnet – Die Einordnung der Daten und die Kategorisierung der Unterseiten funktioniert schneller und einfacher für die Suchmaschine. 

Wenn du den Suchmaschinen strukturierte Daten hinterlegst, so hast du einen Vorteil bei den SERPs – Rich Snippets werten dein SERP auf und deine CTR erhöht sich. 

 

Die technischen Aspekte können wir Laien ganz schön überfordernd sein – als Online Marketing Agentur helfen wir dir gerne – nimm einfach Kontakt auf.

 

Fazit – Die Kombination aus SEO und Webdesign bringt dich zum Ziel

SEO und Webdesign sind zwei verschiedene Bereiche, aber gehören zusammen. Fakt ist: Wer eine erfolgreiche Website betreiben will, braucht beides – SEO und Webdesign. Von den SERPs angefangen, über die Informationsarchitektur der Website, bis zu den technischen Faktoren im Backend sollte, für ein gutes Ranking und eine hohe Conversion Rate, vieles beachtet werden – kleine Optimierungen machen meist schon einen riesen Unterschied und erhöhen das Ranking sichtbar. 

Wir hoffen, wir konnten dir mit diesem Blogartikel weiterhelfen und dir die Verbindung zwischen SEO und Webdesign verständlich erklären!

Solltest du noch Fragen im Bereich Online Marketing haben, dann nimm einfach Kontakt auf!

Logo-rund-KOMMA99
Menü
SEO - Suchmaschinenoptimierung
Wissen
Tools