aktualisiert-am
Zuletzt aktualisiert am: 29. Januar 2021
lesezeit
Lesezeit: ca. 15 Minuten

Webdesign und SEO: Welche Punkte sollte man auf keinen Fall vergessen?

lukas-obkircher
Verfasst von:
Lukas Obkircher
Geschäftsführer von Ramoser Webdesign & erfahrener Website-Experte

Die Website ist heute das digitale Aushängeschild eines Unternehmens und meist der erste Kontaktpunkt mit neuen Kunden, Mitarbeitern und Partnern. Doch was bringt eine hübsche Website, wenn sie niemand findet? Auf der Webseite werden alle relevanten Informationen zum Unternehmen und dessen Angebote veröffentlicht und in den meisten Fällen möchte man damit auch neue Kunden gewinnen. Doch auch die beste Website bringt keine neuen Kunden, wenn sie nicht gefunden wird, das gilt speziell für die Google-Suche.

Worauf sollte man aber mehr achten? Suchmaschinenoptimierung oder Webdesign? Im folgenden Artikel gehen wir genauer auf den Zusammenhang zwischen SEO und Webdesign ein und geben im Anschluss Tipps, die auf jeden Fall berücksichtigt werden sollten.

seo-web-design

Eine neue, schöne Website ohne Besucher bringt gleich viel, wie eine Website mit tausenden Aufrufen pro Monat, die aber ein schreckliches Design hat und alle Besucher wieder ganz schnell verschwinden. Deshalb muss man sich nicht zwischen Suchmaschinenoptimierung und Webdesign entscheiden, sondern beide Themen müssen gut umgesetzt werden und eine Einheit bilden, um das gewünschte Ergebnis zu erhalten.

google-suche
Google Suche auf dem Smartphone

Werden bestimmte Punkte bereits bei der Erstellung der Website berücksichtigt, dann werden bereits dadurch erste Effekte sichtbar und die Arbeit des SEOs im Anschluss sehr erleichtert.

Dieser Artikel dreht sich nur um die SEO Grundlagen, die bei der Erstellung einer Website beachtet werden sollten.

Suchmaschinenoptimierung ist ein sehr umfangreiches Thema, das dieser Artikel alleine niemals abdecken könnte. Schauen Sie daher regelmäßig auf unserem Blog- und Ratgeber-Bereich vorbei, wo wir laufend neue Artikel zu den Themen Webdesign und SEO veröffentlichen.

SEO und Webdesign sind unzertrennlich

Der Zusammenhang zwischen SEO und Webdesign lässt sich in einem Satz wiedergeben: Durch wichtige SEO-Maßnahmen finden Besucher Ihre Website über die Google Suche und durch gutes Webdesign bleiben sie auch darauf. Gutes Webdesign hat wiederum positive Auswirkungen auf SEO und so schließt sich der Kreis.

Ist das Design schlecht oder veraltet, verlieren Besucher schnell das Vertrauen in Website und verlassen diese wieder, um auf einer anderen Internetseite die gesuchten Informationen zu erhalten.

website-besucher-statistik
Beispielhafte Statistik wichtiger Daten von Website-Besuchen

In den ersten Sekunden auf der Homepage macht sich der Besucher ein Bild und beurteilt die Website zu Relevanz der Suche, Vertrauen, Seriosität und weiteren Aspekten. Wie bei vielen Dingen im Leben zählt der erste Eindruck.

Suchmaschinen beobachten das Verhalten ihrer Website-Besucher und wenn sich diese nur kurz auf der Website aufhalten und sofort wieder verlassen, ist das beispielsweise ein schlechtes Signal für Google. Das hat auch negative Auswirkungen auf die Platzierung der Website in den Suchergebnissen. Werden die gesuchten Informationen ohne lange Umwege auf der Website direkt gefunden und sind gut lesbar und schlüssig aufbereitet, ist das ein positives Signal. 

SEO und Webdesign gehen also Hand in Hand und haben ein gemeinsames Ziel: Dem Besucher die gesuchten Inhalte zu liefern und diese eindrucksvoll und möglichst überzeugend zu präsentieren. Damit dürfen die beiden Themen nicht separat betrachtet werden. Wer bei der Erstellung der Website die grundlegenden SEO-Faktoren nicht beachtet, muss mit Folgekosten für die Korrektur der gemachten Fehler rechnen.

9 essentielle Tipps, um Webdesign und SEO in Einklang zu bringen

Um zu verhindern, dass Sie unnötige Geld verbrennen, finden Sie in den folgenden Abschnitten die wichtigsten SEO-Grundlagen, die bei der Erstellung der Homepage beachtet werden müssen. Dazu muss gesagt werden, dass noch viele weitere Dinge für eine gute OnPage-Optimierung beachtet werden müssen. Hier finden Sie weiterführenden Quellen und Informationen zu OnPage-Optimierung und Suchmaschinenoptimierung. 

Usability

Besonders kreatives, außergewöhnliches Design und aufwändige Animationen sind in den Augen vieler Kunden (und auch in den Augen vieler Webdesigner ohne SEO-Kenntnisse) in erster Linie ausschlaggebend für eine gute Website. Doch sollte das Hauptaugenmerk zuerst auf der Usability der Website für die Besucher liegen und erst im zweiten Moment der Kreativität freien Lauf gelassen werden. Usability beschreibt die Benutzerfreundlichkeit der Website im praktischen Gebrauch.

usability
Usability spielt bei Webdesign eine sehr große Rolle und ist entscheidend für gute Google-Rankings

Bei der Entwicklung der Website sollte auf eine klare und übersichtliche Struktur geachtet werden. Dabei sollten auch auf Gewohnheiten der Internet-Nutzer Rücksicht genommen werden, die sich über die Jahre etabliert haben. Dazu zählen beispielsweise das Logo des Unternehmens oben links und die Website-Navigation rechts daneben.

Der Besucher Ihrer Homepage verbringt viel Zeit auf anderen Websites mit vertrautem Design. Deshalb sollten Sie sich auch an diesen Websites orientieren und nicht versuchen den Markt mit verrückten Designs und komplexen Strukturen zu revolutionieren. 

Außerdem sollte auch auf eine gute Lesbarkeit der Inhalte geachtet werden. Sorgen Sie vor allem für:

  • ausreichend Kontrast von Schriftfarbe und Hintergrund
  • genug Abstand zwischen den Buchstaben und zu anderen Elementen der Website
  • eine Schriftgröße und Schriftart, die leicht lesbar ist
  • keine riesigen, monotonen Textblöcke

Der Sinn einer guten Usability ist es, dem Nutzer eine einfache Bedienung der Website zu ermöglichen. Er soll schnell und einfach die gewünschten Inhalte finden. Landen User auf Ihrer Website sollten sie sofort verstehen, ob sie auf der Seite richtig sind und die gewünschten Informationen finden werden und wie sie zu den gesuchten Inhalten kommen.

Deshalb sollte im “Above the Fold”-Bereich (Oberster Website-Bereich, der auf Ihrem Bildschirm erscheint, ohne zu scrollen) klar kommuniziert werden, was das Thema der Seite ist und welchen Nutzen der Besucher daraus zieht. Weitere Faktoren, um mehr Klarheit zu schaffen, sind folgende:

  • Einfache und eindeutige Navigation, Buttons und Call-to-Actions (Handlungsaufforderungen)
  • Wenig Fachsprache verwenden und leicht verständliche Inhalte verfassen
  • Einheitliche Struktur, Wortwahl und Design einhalten, um den Besucher nicht zu verwirren
  • Inhaltsverzeichnis bei langen Texten bereitstellen, um schnell zu erkennen welche Themen behandelt werden und wo man sich gerade befindet

Der Nutzen von Usability für eine Website liegt auf der Hand. Durch die einfache Bedienbarkeit der Website bleiben Besucher länger auf der Seite und finden die gesuchten Informationen schnell. Google erhält dadurch positive Nutzersignale und stuft die Website höher in den Suchergebnissen ein.

Die Website ist oft der erste Kontakt zu neuen Kunden, Partnern und Mitarbeitern und eine benutzerfreundliche Website wirkt sich positiv auf den ersten Eindruck aus. Außerdem erhöht sich durch eine gute Usability auch die Conversion der Website und verwandelt mehr User zu Kunden.

Metadaten

Mit Hilfe der Metadaten helfen Sie der Suchmaschine Ihre Website besser zu verstehen und auch wie die Homepage in den Suchergebnissen erscheint lässt sich dadurch bestimmen. Vor Allem der Title-Tag und die Meta-Description sind wichtige Faktoren für die Suchmaschinenoptimierung.

Der Title-Tag erscheint als Hauptüberschrift der Website in den Suchergebnissen. Die kurze Beschreibung unterhalb des Title-Tags ist die Meta-Description. Die Meta-Description beschreibt kurz den Inhalt Website. Beides sollte den User zum Klicken anregen.

aufbau-google-suchergebnis
Typischer Aufbau eines Suchergebnisses bei Google

Beide Elemente beeinflussen, wie Ihre Webseite in den Suchergebnissen präsentiert wird und damit auch direkt die Klickrate (CTR). Es sollte klar beschrieben werden, was der Besucher auf der Website finden wird. Der Title-Tag umfasst im Idealfall 50-60 Zeichen und beginnt mit dem Hauptkeyword. Die Meta-Description darf nicht länger als 160 Zeichen sein und sollte auch Keywords für die Unterseite enthalten. 

Dabei ist es wichtig, dass der Title Tag und die Meta-Description nicht mit Keywords vollgepackt werden und dadurch unnatürlich wirken, sondern den User ansprechen und zum Klicken anregen.

Des weiteren sollten die Metadaten keine falschen Versprechungen beinhalten, die die Website anschließend nicht halten kann. Finden Besucher nicht die gewünschten Informationen, verlassen sie die Webseite sofort wieder, was Google als negatives Signal interpretiert. 

Sie möchten wissen wie der Title-Tag und die Meta-Description in den Suchergebnissen dargestellt werden? Mit diesem Tool können Sie sich das Ergebnis anzeigen lassen und eventuell anpassen.

Schnelle Ladezeit

Wer kennt es nicht: Nachdem man auf den Link geklickt hat, wartet man eine gefühlte Ewigkeit bis sich die Website öffnet. Mit der Ladezeit steigt auch die Ungeduld des Users, was eine schlechte Nutzererfahrung zur Folge hat und im schlimmsten Fall dafür sorgt, dass der Besucher die Website verlässt, bevor diese überhaupt vollständigen geladen ist.

In einer Umfrage gaben 40% der Befragten an, dass sie bei einer Ladezeit von über 3 Sekunden den Zurück-Button drücken.

Außerdem senkt eine Verzögerung von einer Sekunde die Nutzerzufriedenheit der Befragten um 16%. Und wir wissen: Eine schlechte Nutzererfahrung bewirkt ein schlechtes Signal für Suchmaschinen.

website-ladegeschwindigkeit-statistik
Messung der Ladezeit einer Website

In der Befragung von kissmetrics  kam ebenfalls zum Vorschein, dass eine Verzögerung der Ladezeit von einer Sekunde die Conversion um bis zu 7% senken kann. Eine schlechte Ladezeit hat also direkte Auswirkungen auf die Platzierung in den Suchergebnissen und auch potentielle Kunden werden dadurch abgeschreckt.

Das Hauptproblem bei einer schlechten Ladezeit sind sehr oft Bilder mit einer viel zu hohen Dateigröße. Auf einer Firmenwebsite gehören Bilder und andere belastende Dateien dazu und sind unentbehrlich. Aber auch mit vielen Bildern kann durch Caching, gutes Hosting und einer komprimierten Dateigröße eine schnelle Ladezeit erreicht werden. 

Hier einige kostenlose Online-Tools, die hilfreich bei der Optimierung der Ladezeit Ihrer Website sind:

  • Tinypng: Tool zur Verringerung der Dateigröße von Bildern
  • Page Speed Insights: Ein Tool von Google, welches die Website analysiert und Optimierungspotentiale auflistet.
  • Pingdom: Testet die Ladezeit der Website und zeigt die größten Zeitfresser auf.

Mobile Friendlyness bzw. Responsive Design

Die Optimierung der Website für mobile Endgeräte, wie Smartphone oder Tablet, ist bereits seit einigen Jahren ein fixer Bestandteil im Webdesign und der Suchmaschinenoptimierung. In den vergangenen Jahren ist der Anteil der Webseitenaufrufe durch mobile Endgeräte ständig gestiegen und betrug im Jahr 2019  54% im weltweiten Durchschnitt. Und auch für Google ist “mobile friendlyness” seit 2015 ein wichtiger Rankingfaktore für Websites.

responsive-vs-statisches-design
Gegenüberstellung von responsive Design und statischem Design

Suchmaschinen möchten ihren User die beste Nutzererfahrung bieten. Deshalb ist es wichtig, dass Ihre Website für Smartphones und Tablets optimiert ist und so ein positives Signal an Google sendet.

Die Internetseite muss responsive sein, sprich sie muss sich unterschiedlichen Bildschirmgrößen automatisch anpassen, um sicherzustellen, dass Besucher die gesuchten Informationen auf jedem Gerät problemlos finden. Häufige Probleme, die bei nicht-optimierten Websites auftreten:

  • Der Text ist zu klein und Besucher müssen die für sie interessanten Ausschnitte umständlich mit zwei Fingern vergrößern
  • Klickbare Elemente (z.B. Links oder Buttons) sind zu dicht nebeneinander und erschweren die Bedienbarkeit
  • Die kleineren Bildschirme sind überladen mit Texten und Bildern
  • Man muss horizontal scrollen, um alle Inhalte zu sehen
  • Die Ladezeit der Website auf mobilen Geräten ist sehr hoch

All diese Dinge verschlechtern die Nutzererfahrung und somit auch das Bild der Website in den Augen von Google. Google wird die Webseite als weniger relevant einstufen, was mit Rankingverlusten einhergeht. Stellen Sie also sicher, dass sich Ihre Website an die unterschiedlichen Bildschirmgrößen anpasst und die Bedienbarkeit der Website auf jedem Geräte einfach ist.

SSL-Zertifikat

Das SSL-Zertifikat verschlüsselt die Daten, die zwischen dem Webserver und dem User ausgetauscht werden und hilft so, die Daten sicher zu übertragen. SSL steht für “Secure Socket Layer” und ist eigentlich spätestens seit der Einführung der DSGVO für viele Websites Pflicht. Auch Google möchte, dass die Daten der Nutzer geschützt sind. Deshalb ist ein SSL-Zertifikat auch ein Faktor, der die Platzierung in den Suchergebnissen beeinflusst. 

Es lässt sich leicht herausfinden, ob einen Website SSL-verschlüsselt ist oder nicht. Ist die Website mit einem SSL-Zertifikat gesichert, sehen Sie in der Browserleiste meistens ein Schloss und die Adresse der Website beginnt mit “https://” und nicht mit "http://"

websites-mit-und-ohne-ssl-zertifikat
Websites mit und ohne SSL Zertifikat

Auch neben dem Datenschutz-Aspekt hat ein SSL-Zertifikat viele Vorteile:

  • Ranking: Eine SSL-Verschlüsselung wirkt sich positiv auf das Ranking in den Suchergebnissen aus und wird von Suchmaschinen höher eingestuft.
  • Sicherheit: Durch die Verschlüsselung der Daten sind sie vor Dritten geschützt. Vor allem personenbezogene Daten, wie Kontakt- oder Zahlungsdaten, können dadurch geschützt werden. Also müssen Websites mit Kontaktformularen, Login-Bereichen oder Shops ein SSL-Zertifikat besitzen.
  • Vertrauen: Besucher der Website erkennen schnell, ob die Seite geschützt ist oder nicht. Dadurch erhöht sich das Vertrauen in die Website und das Unternehmen. Bei Webseiten ohne SSL-Zertifikat zeigen gängige Browser oft Warnungen wie "nicht sicher" oder rote Symbole an, die Website-Besucher vor oder beim betreten der Website abschrecken.

Hierarchie der Überschriften

In HTML gibt es standardmäßig 6 verschiedene Arten von Überschriften: H1 bis H6 mit abnehmender Hierarchie. Ähnlich wie in einem Word-Dokument helfen diese Überschriften dabei, den Inhalt der Website zu strukturieren. Dabei ist die H1 die Hauptüberschrift und sollte nur einmal pro Seite verwendet werden.

Alle anderen Überschriften ordnen sich der überstehenden Überschrift logisch unter und die Struktur sollte auch mit freiem Auge erkennbar sein. So ist die H1-Überschrift die größte und auffälligste Überschrift auf der Seite, gefolgt von H2 usw.

Doch warum ist die Überschriften-Struktur wichtig? Sie hilft den Suchmaschinen besser zu verstehen, wie der Inhalt einer Website logisch gegliedert ist und welche Informationen relevanter sind als andere. So ist der Content unter einer H1 in der Regel wichtiger als der unter einer H5-Überschrift.

Google wertet die Überschriften klassisch nach dem HTML-Schema aus und deshalb sollte eine Unterseite auch nur eine H1-Überschrift besitzen, damit die Suchmaschine das primäre Thema der Unterseite sofort erkennt. Um zu verhindern, dass die Überschriften-Struktur chaotisch wird, sollten im Footer, der Navigation und der Sidebar keine H-Überschriften verwendet werden. 

Es macht deshalb auch Sinn, die Überschriften mit Keywords zu füllen und so die Relevanz für das Keyword bei Suchmaschinen zu erhöhen. Doch in erster Linie sollen die Überschriften dem Leser helfen, sich besser auf der Seite zu orientieren und erst im zweiten Moment die Suchmaschine zufriedenstellen. Lässt sich das Keyword logisch in die Überschrift einfügen? Dann kein Problem. Aber quetschen Sie das Keyword nicht mit Gewalt in eine Überschrift, wo es garnicht hineinpasst. 


Beispiel einer guten Überschriften-Struktur

H1 - Hauptüberschrift

     H2 - 1. Unterüberschrift

     H2 - 2. Unterüberschrift

           H3 - 2.1 Teilgebiet der Unterüberschrift

           H3 - 2.2 Teilgebiet der Unterüberschrift

     H2 - 3. Unterüberschrift

           H3 - 3.1 Teilgebiet der Unterüberschrift

                 H4 - 3.1.1 Unterpunkt des Teilgebiets

     H2 - 4. Unterüberschrift

Sprechende URLs

Sprechende URLs sind kurz, aussagekräftig und es ist klar verständlich, was auf der Seite erwartet werden kann. Zwar haben sprechende URLs nicht mehr einen so hohen Stellenwert für SEO wie früher, aber sie helfen Suchmaschinen und Nutzern, besser zu verstehen was das Thema der Unterseite ist die Sie über den Link aufrufen möchten.

User schöpfen auch mehr Vertrauen in lesbare URLs und klicken wahrscheinlicher auf den Link, als bei einer URL mit kryptischen Zeichen, wo nicht klar ist, was auf der Website zu finden ist.

sprechende-url
Beispiel sprechende URLs

Es ist auf jeden Fall sinnvoll, Keywords in der URL einzubinden. Zum einen ist es positiv für die Suchmaschine und zum anderen ist das Keyword bei einer Verlinkung automatisch im Linktext. Aber wie immer gilt: Lieber sinnvoll und mit Hausverstand, als Keywords auf Biegen und Brechen einzubinden. Außerdem wirkt es ziemlich unseriös, wenn in der URL zu viele Keywords auftauchen.

Tipps für gut strukturierte URLs:

  • machen Sie  sie leicht verständlich für Nutzer und Suchmaschine
  • Keine Sonderzeichen verwenden
  • Halten Sie die URL kurz und knackig
  • Nutzen Sie Bindestriche, um Wörter zu trennen

Verwendung von Bildern

Bilder sagen mehr als 1000 Worte, dementsprechend wichtig sind sie auch für die meisten Websites. Allerdings reicht es nicht aus, ein Bild unverändert auf die Website hochzuladen und kann dieser sogar schaden. Wie schon weiter oben erklärt, müssen große Bild-Dateien komprimiert werden, um eine schnelle Ladezeit zu erzielen. Aber es gibt noch weitere Dinge zu beachten.

optimiertes-vs-nicht-optimiertes-bild
Optimiertes vs. nicht optimiertes Bild

Google kann keine Texte auf Bildern lesen und erkennt auch nicht ohne weiteres, was auf dem Bild zu sehen ist. Werden Inhalte auf PNG- oder JPG-Dateien geschrieben, so können sie von Suchmaschinen nicht richtig interpretiert werden.

Deshalb sollte auf jeden Fall vermieden werden, Überschriften und wichtige Inhalte auf Bildern zu platzieren. Wo aber auf jeden Fall Text da sein sollte, ist im ALT-Tag bzw. ALT-Attribut eines Bildes. Der ALT-Tag wir bei den Bildern auf der Website hinterlegt und hilft Google, das Bild zu verstehen.

Suchmaschinen können Bilder nicht eigenständig erkennen, sondern lesen im ALT-Attribut nach. Deshalb ist es wichtig einen aussagekräftigen ALT-Tag zu hinterlegen, damit Suchmaschinen wissen, was auf dem Bild abgebildet ist. Dadurch ergibt sich auch die Möglichkeit, für Bilder bei der Bilder-Suche zu ranken und dadurch mehr Besucher auf die Website zu locken.

Sitemap erstellen

Eine XML-Sitemap ist eine Übersicht der Struktur und aller Unterseiten einer Website, also eine Art Inhaltsverzeichnis. Mit Hilfe von unzähligen Bots durchforstet Google die Websites im Internet, damit die besten Ergebnisse für Suchanfragen bereitgestellt werden können. Durch das Bereitstellen einer Sitemap erleichtert man Google das Crawlen der Website und stellt sicher, dass auch alle Unterseiten indexiert werden.

sitemap
Eine Sitemap hilft Google dabei, die Struktur Ihrer Website besser zu verstehen

In der Regel ist bei kleineren Websites mit guter interner Verlinkung eine Sitemap nicht zwingend notwendig, da Google diese sehr gut crawlen kann. Um sicherzugehen, dass es keine Probleme gibt, sollte trotzdem eine Sitemap erstellt werden. Eine Sitemap sollte auf jeden Fall erstellt werden, wenn:

  • die Website neu ist und wenig Besucher hat
  • die Website sehr umfangreich ist (z.B. Online-Shops)
  • die Website keine gute interne Verlinkung besitzt

Eine Sitemap lässt sich unkompliziert mit Hilfe von Sitemap-Generatoren im Internet erstellen. Nachdem die XML-Datei erstellt wurde, kann sie in der Google Search Console eingereicht werden. Dadurch wird die neue Website schneller indexiert und Google übersieht bei der Indexierung keine Unterseite.

Fazit und weiterführende Quellen

Das waren einige der wichtigsten Maßnahmen, die bei der Erstellung einer Website im Hinblick auf Webdesign und SEO beachtet werden müssen. Natürlich muss für eine gute OnPage-Optimierung noch einiges mehr getan werden und diese Tipps bilden nur die Spitze des Eisbergs. Aber werden die oben genannten Punkte bereits zu Beginn sorgfältig umgesetzt wurden, ist bereits eine gute Basis geschaffen und erleichtert zum Beispiel die weiterführende Arbeit einer SEO-Agentur ungemein. 

Wenn Sie sich ausführlicher mit dem Thema befassen möchten, können wir Ihnen folgende kostenlose Quellen sehr ans Herz legen:

Interesse an einer Zusammenarbeit? Sichern Sie sich jetzt einen kostenlosen Entwurf Ihrer neuen Website.
ablauf-bild