Webdesign und SEO: 9 essentielle Tipps um beides in Einklang zu bringen

Eine neue, "schöne" Website ohne Besucher bringt gleich wenig, wie eine Website mit tausenden Aufrufen pro Monat, die ein schreckliches Design hat, welches die Besucher hassen und deshalb gleich wieder 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 und das volle Potential aus der Website zu schöpfen.

‍Werden bestimmte Dinge 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, unabhängig vom grafischen Design.

Suchmaschinenoptimierung ist ein sehr umfangreiches Thema, das dieser Artikel alleine niemals abdecken könnte. Die wichtigsten Grundlagen haben wir hier aber für Sie festgehalten.

Warum SEO und Webdesign unzertrennlich sind

Der Zusammenhang zwischen SEO und Webdesign lässt sich in einem Satz wiedergeben: Durch SEO-Maßnahmen finden Besucher Ihre Website von ganz alleine ü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 eine Website und verlassen diese wieder, um auf einer anderen Internetseite die gesuchten Informationen zu erhalten, die überzeugender wirkt.

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

Suchmaschinen beobachten das Verhalten ihrer Website-Besucher und wenn sich diese nur kurz auf der Website aufhalten und diese 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 Website-Besucher die gesuchten Inhalte zu liefern und diese übersichtlich, verständlich, 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-Maßnahmen nicht beachtet, darf sich nicht wundern wenn die Website bei Google nicht gefunden wird.

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

In diesem Kapitel finden Sie die wichtigsten SEO-Grundlagen, die bei der Erstellung einer Website beachtet werden müssen. Wer über die Grundlagen hinaus noch mehr wissen möchte: 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 freier Lauf gelassen werden.

Usability beschreibt die Benutzerfreundlichkeit der Website im praktischen Gebrauch.

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, das stiftet bei Website Besuchern meist nichts weiter als Verwirrung. 

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 in winziger Schrift
  

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 es sollte klar sein, wie sie zu den gesuchten Inhalten am schnellsten kommen.

Deshalb sollte im “Above the Fold” - Bereich (Oberster Website-Bereich, der als erstes 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 Handlungsaufforderungen (Call To Action)
• 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 Suchmaschinen und Menschen dabei, in den Suchergebnissen besser zu verstehen, was es auf Ihrer Website bzw. auf der angezeignet Unterseite zu finden gibt.

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.

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 relevante Keywords enthalten. 

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

Des weiteren sollten die Metadaten keine falschen Versprechungen beinhalten, welche 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 der Ladezeit um eine Sekunde die Nutzerzufriedenheit der Befragten um 16%. Und wir wissen: Eine schlechte Nutzererfahrung bewirkt ein schlechtes Signal für Suchmaschinen. Längere Ladezeiten die nicht umgangen werden können lassen sich mit Ladeanimationen oder Preloadern etwas anschaulicher gestalten.

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 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 Smartphones oder Tablets 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 Rankingfaktor für Websites. ‍

Suchmaschinen möchten ihren Usern 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 sicher, dass sich Ihre Website an die unterschiedlichen Bildschirmgrößen anpasst und die Bedienbarkeit der Website auf jedem Gerät so einfach wie möglich 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. Wichtig ist das vor allem, wenn auf der Website Zahlungsdaten oder andere persönliche Daten gespeichert werden (wie z.B. bei einem Onlineshop.

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://"

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, um sicher zu sein.
• 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 in der Regel die größte und auffälligste Überschrift auf der Seite, gefolgt von H2 usw. Allerdings ist es bei bestimmten Layouts auch kein Problem, wenn die H1 nicht die höchste Textgröße aufweist, sofern das für das Design besser ist.

Warum ist die HTML Überschriften-Struktur wichtig? Sie hilft den Suchmaschinen dabei, besser zu verstehen wie der Inhalt einer Website logisch gegliedert ist und welche Informationen relevanter sind als andere. So ist der Content direkt 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, wenn es nicht sein muss. 

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 werden, wenn sie darauf klicken.

User vertrauen sprechenden URLs mehr und klicken wahrscheinlicher auf den Link, als bei einer URL mit kryptischen Zeichen, wo nicht klar ist, was auf der Website dahinter zu finden ist. Logisch, oder?‍

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 etwas 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 Suchmaschinen
• 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.

Große Bild-Dateien müssen komprimiert werden, um eine schnelle Ladezeit der Website zu erzielen. Aber keine Angst: Die Bildqualität wird dabei für das menschliche Auge nicht oder nicht bedeutend schlechter.

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. Das kann man durchaus machen, der Textinhalt auf dem Bild sollte dann aber trotzdem nochmals auch als normaler Fließtext auf der Seite vorkommen. 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 und Menschen ohne Sehkraft dabei, das Bild zu verstehen. Außerdem wird dieser Text angezeigt, wenn ein Bild nicht geladen werden kann.

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 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.

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.

Kurze Antworten auf häufige Fragen