Anzeige
Anzeige
Ratgeber
Artikel merken

Relaunch geplant? Die besten Ressourcen zur Suchmaschinenoptimierung deiner Website

Hast du 2017 einen Website-Relaunch oder ein (Re-)Design geplant? Damit du auch aus SEO-Sicht möglichst erfolgreich damit wirst, gilt es ein paar Grundregeln zu berücksichtigen.

Von Severin Lucks
8 Min. Lesezeit
Anzeige
Anzeige

(Grafik: Shutterstock)

Stock Themes und Templates

Viele Webseiten basieren heutzutage auf vorgefertigten Themes oder Templates. Das hat den Vorteil, dass nicht jede Webseite von Null auf programmiert werden muss, sondern aus einem Set an vorgefertigten Elementen zusammen gestellt werden kann.

Anzeige
Anzeige

Themes und Templates haben aber auch Nachteile: Nutzer sehen schnell Ähnlichkeiten zwischen Webseiten mit gleichen Templates. Selbst wenn Farben, Typografie und Inhalte variieren, erkennen auch Laien schnell wiederkehrende Muster.

Das Enfold Theme für WordPress wurde bereits über 100.000 Mal gekauft – Kein Wunder, dass viele Seiten gleich aussehen. (Screenshot: kriesi.at)

So werden Webseiten, die auf fertigen Themes basieren, ohne Individualisierung austauschbar. Nutzer sehen keinen Grund mehr, auf der Seite zu bleiben, und wechseln viel schneller zu den direkten Wettbewerbern, die manchmal sogar das gleiche Theme einsetzen. Hinzu kommt, dass viele Templates nicht fehlerfrei sind und vor allem durch die Fülle an Funktionen die Webseite verlangsamen. So bleibt für eine Individualisierung der fertigen Themes meist zu wenig Zeit übrig.

Anzeige
Anzeige

Wenn du schon ein vorgefertigtes Theme oder Template einsetzt, solltest du demnach genug Zeit zur Fehlerbehebung, Performance-Optimierung und vor allem für die Individualisierung einplanen. Wenn du dich allerdings mit der Entwicklung von Themes auskennst oder kompetente Ansprechpartner dafür hast, entwickelst du lieber gleich was eigenes, denn das kostet oftmals sogar weniger Zeit als die Optimierung fertiger Themes.

Anzeige
Anzeige

Webfonts

Viele vorgefertigte Themes bieten Unmengen an Schriftarten, welche meist über Google Fonts eingebettet werden. Das Problem dabei ist allerdings, dass jede extern eingebettete Sonderschriftart extra Ladezeit benötigt.

Bei einer durchschnittlichen Aufmerksamkeit im Internet von acht Sekunden können wir uns wegen Sonderschriften kaum eine langsamere Ladezeit erlauben.

Anzeige
Anzeige

Du kannst die Ladezeit in den Griff bekommen, indem du Webfonts lokal auf deinem Server hostest und auf ein Minimum reduzierst. Schau dir beispielsweise mal den „Performance-König“ Amazon an: Der Marktplatz kommt durch völlige Vermeidung von Sonderschriftarten auf Ladezeiten von unter 0,5 Sekunden – Arial sei Dank. Da dies aber selten mit ästhetischem Anspruch vereinbar ist, empfehle ich dir folgende Faustregel: Setze nie mehr als zwei Webfonts ein oder arbeite für einzelne Highlights mit .svg Vektoren – dazu später mehr.

Slider und Animationen

Ein weiteres Problem vorgefertigter Themes oder unüberlegter Konzepte sind Slider und Animationen. Sie schauen auf den ersten Blick zwar toll aus und verlocken zum Einbau in der Webseite, allerdings bergen auch sie ein Risiko:

Slider und Animationen können deine Seite extrem stark verlangsamen und sogar dafür verantwortlich sein, dass Inhalte gar nicht von Suchmaschinen gelesen werden können.

Anzeige
Anzeige

Denn praktisch jeder Slider besteht aus versteckten Inhalten, die zum richtigen Zeitpunkt (automatisch oder nach Klick) eingeblendet werden sollen. Diese Inhalte werden allerdings auch dann geladen, wenn die Webseite nur aufgerufen wird, aber die Inhalte noch gar nicht sichtbar sind. Das bedeutet insbesondere für Slider mit großen Hintergrundbildern eine enorme Verschlechterung der Performance.

Slider lassen sich außerdem meist nicht unproblematisch auf mobilen Endgeräten darstellen: Sie brauchen oft dasselbe Höhen-Seitenverhältnis wie Desktops und werden dann – bedingt durch das andere (Hoch-)Format mobiler Geräte – sehr klein bis unlesbar. Da mittlerweile rund die Hälfte des Internet Traffics von mobilen Endgeräten stammt, sind solche unlesbaren Inhalte ein absolutes No Go.

Abgesehen davon werden versteckte Inhalte kaum von Suchmaschinen indexiert. Denn Google & Co. halten diese (zurecht) für irrelevant. Wären Inhalte wichtig, so denkt Google, würde man sie doch nicht ausblenden. Dies und weitere Animationen wie zum Beispiel der Parallax-Effekt – eine vom Mouse-Scrolling abhängige Animation – können dazu führen, dass deine Inhalte gar nicht mehr korrekt indexiert werden (Google hat nämlich gar keine Mouse). Und ohne Indexierung gibt es weniger Besucher.

Anzeige
Anzeige

Videounterschrift: Screencast aus der Google Search Console: Was unter dem Parallax von OSRAM verborgen ist, sieht die Suchmaschine einfach nicht – Wir bauen deswegen bei dem Lichthersteller ganze Teile der Seite um. Beim Blick auf die Seite würde das vielen nicht auffallen.

Hinterfrage also den Nutzen jedes Elements und setze wenige, aber gut animierte Module ein. Hierfür sprechen übrigens auch Design Trends wie Flat Design oder Modern Retro, die durch einen stark reduzierten aber ausdrucksstarken Stil glänzen. Teste deine Website Ladezeit mit Tools wie WebPagetest und prüfe die Indexierbarkeit deiner Inhalte – insbesondere der Animationen – über die Google Search Console.

Bildunterschrift: Screenshot aus Google Search Console: Mit der Funktion „Abruf wie durch Google“ lässt sich simulieren, wie Google Website-Inhalte liest. Außerdem kannst du dadurch die Indexierung neuer URLs in der Suchmaschine beschleunigen, indem du nach dem Rendering die Indexierung beantragst (Button rechts oben).

Anzeige
Anzeige

Stockfotos

Wenn wir schon über lizenzierte Themes und Slider sprechen, dürfen wir das Thema Bilder nicht vergessen. Hierbei wird gerne über Bilddatenbanken günstig Material lizenziert. Aber auch in Sachen Bildern gilt, dass nicht individualisiertes Material meist lieblos und unpersönlich aussieht.

Abgesehen davon stellen lizenzierte Bilder auch ein „Duplicate Content“ Risiko dar: Sie können nicht für dein Projekt in Google gefunden werden, weil sie meist schon auf anderen Seiten Verwendung finden. Nimm dir doch einfach mal ein Stockfoto und schiebe es in die Google Bildersuche: Du wirst schnell sehen, dass dein Bild in anderen Seiten bereits zu finden ist und es so unbrauchbar wird.

Wenn du also Bilder lizenzierst, solltest du sie so bearbeiten, dass sie nicht wie eine (billige) Kopie aussehen: Schneide sie beispielsweise mit anderen Bildern zu einer Collage zusammen, füge Skizzen oder Grafiken hinzu oder verwende einen Filter, um die Farben deutlich vom Original und anderen Kopien abzusetzen. Alternativ setzt du einfach auf eigenes Fotomaterial oder gar auf Grafiken und Zeichnungen. Eigenes Bildmaterial hebt dich nämlich viel stärker vom Wettbewerb ab als austauschbare Stock Bilder.

Anzeige
Anzeige

Insbesondere wenn du Facebook Instant Articles oder Google Accelerated Mobile Pages verwendest (das sind speziell mobil optimierte Templates, die Nutzern angezeigt werden, wenn sie von der jeweiligen Plattform auf deine Seite kommen), kannst du kaum mehr durch dein Corporate und Web Design auffallen, sondern nur noch durch Bilder. Spätestens dann brauchst du eine eigene Bildsprache (wenngleich ich von AMP und IA abrate).

Medienformate

Eigentlich ist die Forderung korrekter Dateiformate nichts Neues, aber ich sehe immer wieder kapitale Fehler beim Einbau von Bildern und Videos. Es ist immer ratsam, auf das richtige Format und eine anständige Einbettung zu achten, denn ansonsten wird deine Website unglaublich langsam.

So kann das falsche Format dafür sorgen, dass ein Bild fünf mal mehr Speicher braucht, als benötigt (zum Beispiel, wenn man PNG statt JPG für Fotos verwendet):

Anzeige
Anzeige

(Bild: OSRAM.com)

Achte also darauf, dass…

  • Fotos als JPG eingebaut werden und vor dem Upload mit ImageOptim oder tinypng komprimiert werden. Das neue Bildformat WebP wird noch nicht von allen Browsern fehlerfrei unterstützt und benötigt immer noch anfällige fall-back-Lösungen – deswegen rate ich davon ab.
  •  Grafiken als .svg-Vektoren eingebaut werden. Sie funktionieren auf allen gängigen Browsern (http://caniuse.com/#search=svg), skalieren verlustfrei und brauchen extrem wenig Speicher. Sie können dadurch auch gut animiert werden, bspw. per CSS3 und JQuery. Du kannst SVG Animationen übrigens mit dem Tool Elementor auch ohne Programmierkenntnisse gestalten.
  • Videos eingebettet verwendet werden, damit sie die Performance von deinem Webhosting oder Server nicht zu stark beeinträchtigen. Am einfachsten geht das über Youtube, alternativ aber auch über Vimeo. Bei der Einbettung von Videos sollten aber auch noch strukturierte Daten ergänzt werden. Das geht beispielsweise mit Hilfe von Sistrix.

Menüführung und Navigation

Grundsätzlich gilt: je einfacher die Navigation, desto besser. Eine Website sollte sofort verstanden werden und „navigierbar“ sein. Von Experimenten wie zum Beispiel versteckten Menüs rate ich immer ab – außer sie finden auf Webseiten von Kreativen statt, wo Nutzer sich bewusst damit auseinander setzen. Bei mobilen Seiten ist so ein verstecktes (Hamburger) Menü jedoch Pflicht, um den Nutzern zuerst die Inhalte zu zeigen und nicht das Menü.

Um das Surferlebnis optimal zu gestalten, solltest du weitestgehend auf Dropdown-Menüs verzichten. Denn sie erfordern meist zu viel Nachdenken und verkomplizieren vor allem die Bedienung auf mobilen Endgeräten, da diese ja keine Maus haben, um über einen Menüpunkt zu fahren. Es gibt zwar Lösungen, um die Bedienung von Dropdowns auf Smartphones zu ermöglichen, allerdings nehmen sich mobile Nutzer kaum die Zeit dafür, sich damit zu beschäftigen:

(Screenshot: t3n)

Zusätzlich kosten dich überflüssige Seiten und Menüpunkte nicht nur die Aufmerksamkeit deiner Besucher, sondern auch deine Zeit und sogenanntes Crawl Budget. Letzteres besagt die Frequenz, wie oft Suchmaschinen wie Google deine Seite besuchen (werden). Du verschenkst also Chancen, wenn du Nutzer wie Suchmaschinen mit „dünnen“ Inhalten langweilst. Frag dich also: Was interessiert meine Benutzer wirklich? Möchten sie die Vita jedes Teammitglieds lesen oder lieber umfangreiche Informationen zu meinen Angeboten erhalten? Was nicht erforderlich ist, sollte draußen bleiben.

Aber folge jetzt keinem Aktionismus und lösche überflüssige Seiten, denn das würde dich erstmal einen Teil deiner Website-Sichtbarkeit und -Rankings in den Suchmaschinen kosten. Von Zeit zu Zeit lohnt sich jedoch ein Blick in die eigene Website-Statistik, die Google Search Console und Bing Webmaster Tools. Fällt dir dann auf, dass innerhalb eines Monats die ein oder andere Seite deutlich weniger Zugriffe hat und eine deutlich höhere Absprungrate als andere Seiten aufweist, würde ich jene Seiten entweder entfernen oder weiterleiten. Sollten diese Seiten jedoch wichtig sein, würde ich sie stärker ausbauen. Das gilt übrigens auch für Blog Posts: Wenige richtig gute Inhalte sind oft besser als viele mittelmäßige.

Apropos Navigation: Ich empfehle zusätzlich auf jeder Seite einen Call-to-action-Button hervorzuheben, das kann zum Beispiel der Kontaktbutton sein. Ideal ist aber ein zum Inhalt passendes Angebot, um Nutzer zum Konvertieren zu bringen und sie kennenzulernen. Denn nur mit solchen (Micro) Conversions kannst du einen eigenen Datenstamm aufbauen und dich so unabhängig von Suchmaschinen, Social Media und anderen Quellen machen.

Fazit

Design heißt eigentlich „form follows function“, doch viele vergessen die Funktion zugunsten eines Schnellschusses in Sachen Design und lizenzieren Themes und Bilder. Dann werden viele austauschbare Inhalte entwickelt und du kannst kaum einen erfolgreichen Relaunch oder (Re-)Design entwickeln.

Setzt du jedoch auf Individualisierung, wenige richtig gute Inhalte sowie eine Top-Performance, kannst du deine Wettbewerber abhängen.

Natürlich gibt’s noch weitaus mehr Maßnahmen, um 2017 ein optimales Website-Erlebnis zu schaffen. Welche fallen dir spontan noch ein? Schreibt es uns in die Kommentare! 

Ebenfalls interessant: 

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
4 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Ralf Schambier

Zitat „wenngleich ich von AMP abrate“ – hier würde mich interessieren, warum?

Antworten
Frank Hübner

AMP geht schon in Ordnung.
Die Welt ist nunmal zweigeteilt in Desktop und Mobile und nur die wenigsten Designs funktionieren Hochkant und Quer.

Zwei verschiedene Versionen zu schaffen liegt also nahe. Ob es dabei unbedingt AMP sein muss oder auch nur Responsive-Design sei dahingestellt und ist wohl eher eine Glaubensfrage. Technisch gesehen funktioniert AMP ohnehin nur mit Google denn die Seiten werden nur dann wirklich schnell angezeigt wenn sie aus den SERPs aufgerufen werden. Nur dann werden sie nämlich im Hintergrund schonmal auf das Gerät transportiert und
sind beim Aufruf bereits im Browser-Cache vorhanden.

Spätestens aus Sicht der Suchmaschinenoptimierung jedoch macht AMP Sinn, weil Google es irgendwann adeln wird und es eine Möglichkeit darstellt sich in den Suchergebnissen von der Masse abzuheben.

Wenn Google den Blitz ein wenig prominenter gestalten würde (momentan: weisses Symbol auf hellgrauem Hintergrund) würde es AMP mit Sicherheit einen gehörigen Schub verleihen.

Im Übrigen blieb in dem Beitrag die beste Ressource zur Suchmaschinenoptimierung unerwähnt: the Brain.

Antworten
Severin Lucks

Stimmt, the Brain ist ultra wichtig. Bin halt selbst vorsichtig bei AMP Fragen, aber du hast auch damit Recht. Ist ne Glaubensfrage. Danke für dein Kommentar!

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige