SEO Relaunch-Leitfaden: So wird eure Website wettbewerbsfähig
27. Mai 2016, Online Marketing, SEO
Bei einem Website-Relaunch ist in erster Linie das Konzept von Bedeutung. Dieses sollte feststehen, bevor auch nur eine Zeile Code programmiert wird. Welche Ziele sollen mit der neuen Website erreicht werden? Was funktionierte bisher gut, welche Elemente benötigen eine Optimierung?
#1 Seitennavigation: Abgrenzung ist das A und O
Einige Grundregeln erleichtern die Planung der Seitenstruktur: So sollte die Website eine möglichst flache Seitenhierarchie haben und zentrale Inhalte nicht weiter als 2-3 Klicks von der Startseite entfernt sein. Idealerweise führen mindestens zwei Wege zur gesuchten Information: zum einen der direkte Weg über eine Suchfunktion, zum anderen ein intuitiver Weg über die Seitennavigation.
Stichwort Seitennavigation: Beim sogenannten „Siloing“-Ansatz werden die Themenbereiche einer Seite möglichst klar voneinander abgegrenzt, sodass daraus sinnvolle und logische Themenkanäle und –kategorien geschaffen werden können, die mittels interner Verlinkung miteinander vernetzt werden. Komplexe Netze von Navigationslinks (jede einzelne Seite verlinkt auf jede andere interne Seite) sollten jedoch vermieden werden; die Hauptnavigation der Seite sowie die darunter verlinkten Kategorien sollten klar und einfach strukturiert sein. Zudem darf es keine „verwaiste“ Seite ohne crawlbare Verlinkung geben. Als Crawling bezeichnet man das Auslesen einer Website durch Google und die Indexierung dieser.
Neben der Seitennavigation wird dem User einer Website mit der Breadcrumb-Navigation eine weitere Orientierungshilfe geboten: Die Breadcrumb-Navigation wird meist am Kopf der Website angezeigt und entspricht dem geklickten Navigationspfad von der Hauptseite über Unterseiten bis hin zur aktuellen Ansicht. Alle Breadcrumb-Elemente sind klickbar mit Ausnahme des letzten, aktiven Punkts.
Auch URLs brauchen ein System
Möglichst strukturiert sollte auch die URL gestaltet sein: Ein logischer, semantischer und hierarchischer Aufbau der Linkstruktur ist hier von Vorteil. Dabei gilt es zu beachten, dass eine HTML-Seite nur im kanonischen URL-Format bestehen darf, d.h. jede HTML-Seite darf nur eine URL besitzen. Diese sollte möglichst „sprechend“ sein und den Seiteninhalt wiedergeben. Hier ein Beispiel für eine sprechende und eine nicht-sprechende URL:
Bei der Struktur von URLs ist es wichtig, auch auf die Details Acht zu geben: Übersichtsseiten enden auf „/“, während Content-Seiten die Endung „.html“ vorweisen. In URLs sollten außerdem weder Sonderzeichen, noch Umlaute, Leerzeichen oder Großbuchstaben auftauchen; einzelne Wörter in der URL werden durch Bindestriche miteinander verbunden. Die maximale Länge einer URL darf 115 Zeichen betragen.
#2 So meistert ihr die Programmierung der Website
Die eigene Website gilt im digitalen Zeitalter als Visitenkarte eines Unternehmens – umso wichtiger ist es, dass diese den aktuellen Spielregeln, die durch Suchmaschinen und Nutzerbedürfnisse vorgegeben werden, entspricht. Wenn die Vorprogrammierung geschafft ist, geht’s ans Eingemachte: Die Hauptprogrammierung ist komplex, aber zu schaffen.
Zu den notwendigen Grundvoraussetzungen für eine reibungslos funktionierende Website gehört in erster Linie die Verwendung eines dezidierten Servers, der den zu erwartenden Traffic der Seite stemmen kann – denn nichts ist schlimmer als eine Seite, die ständig aufgrund von Überlastung zusammenbricht. Um dies zu verhindern, sollten die einzelnen Seiten und ihre Elemente wie z.B. Texte und Bilder weitestgehend komprimiert und die Seitenstruktur so unkompliziert wie möglich gehalten werden. Ein möglichst geringes Nachladen von Webinhalten dank serverseitigem Caching, Verwendung möglichst weniger DNS-Lookups und Reduzierung von 301-Weiterleitungen sind an dieser Stelle hilfreich. Dasselbe Prinzip gilt bei Dateien von Java Script und CSS, die als Skript- bzw. Stylesheet-Sprachen für die Darstellung, das Nachladen von Inhalten und Bildern und für das Auswerten derer Benutzerinteraktionen zuständig sind. Nicht verwendete Klassen sollten gelöscht; alle anderen zu einer einzigen Datei komprimiert und wenn möglich ausgelagert werden. Test my site von Google hilft dabei Schwachstellen zu finden.
Crawlbarkeit sicherstellen
Im nächsten Schritt gilt es, die Crawlbarkeit der Website sicherzustellen. Das bedeutet festzulegen, welche Seiteninhalte von Google gefunden werden sollen und welche nicht. Dazu zählt die korrekte semantische Auszeichnung von Textinhalten im HTML, das Einfügen von alternativen Verlinkungen bei Verwendung von Dropdown-Menüs und das Ausschließen von iFrames, AJAX oder Flash für zentrale Inhalte. Genannte Formate sind eher für die Anzeige von Fremdinhalten (z.B. Werbeanzeigen), Rastergrafiken, Videoinhalte oder ähnlich dynamische Inhalte geeignet. Mehrfachverlinkungen auf das gleiche Ziel wirken sich ebenso wie die Maskierung von Links negativ auf die Crawlbarkeit der Seite aus. Stattdessen setzt man Navigationen und Linkgruppen am besten in Listen ein und verwendet möglichst sinnvolle, deskriptive Linkbeschreibungen: Wichtigster Aspekt: Jede HTML-Seite zeigt standardmäßig per Canonical-Tag auf sich selbst, was bei Websites mit ähnlichem Inhalt zur Indexierung der eigenen Seite und zur Vermeidung von doppelten Inhalten führt. Zusätzlich sollte die Seite auch mit dem Tag robots=“index,follow“ versehen werden, sodass Suchroboter der Suchmaschine den Befehl erhält, die Website ausdrücklich in den Index aufzunehmen und den Hyperlinks der Seite zu folgen. Mit sogenannten XML Sitemaps kann das Crawling für die Suchmaschine erleichtert werden: XML ist eine Auszeichnungssprache ähnlich HTML; mit Sitemaps erstellt man in diesem Format eine Liste aller URLs der Website. Nutz die Search Console von Google, um mögliche Crawlprobleme ausfindig zu machen.
Fehlermeldungen und Weiterleitungen
Fehler können passieren – doch man sollte damit umzugehen wissen. Die Fehlermeldung „404: Page not found“ ist wohl allen bekannt und sollte immer angezeigt werden, wenn eine fehlerhafte oder nicht existierende URL aufgerufen wird. Idealerweise werden der Fehlerinformation noch einige nützliche Links hinzugefügt, die den Nutzer auf der Seite halten.Damit so eine Fehlermeldung gar nicht erst auftaucht, lassen sich Umleitungen einrichten. Sie helfen dann, wenn eine alte in eine neue URL umgewandelt werden soll oder eine Adresse aufgerufen wird, die es schon einmal gab, nun aber nicht mehr existiert. Die Umleitungen werden im HTTP-Header mit verschiedenen Statusmeldungen ausgeliefert, optimalerweise mit dem „Status 301: Moved Permanently“. Überprüft den Status Code eurer Website mit den Http Status Code Checker.
Duplicate Content und Verlinkungen
Grundsätzlich gilt: Jede HTML-Seite ist nur unter einer einzigen URL erreichbar. Gibt es Inhalte, die an mehreren Stellen auf der Website ausgespielt werden, sollten diese konsistent mit ein und derselben URL verlinkt sein. Mögliche Dopplungen (z.B. durch Druckansichten) sind zu vermeiden und im Notfall per Tag robots=“noindex,follow“ zu sperren. Eine direkte Verlinkung der Zielseite wirkt sich positiv aus; ebenso wie die Verwendung absoluter, also ungekürzter, URLs.
Insgesamt kann man sagen: Je strukturierter, aufgeräumter und „nachvollziehbarer“ eine Website aufgebaut ist, umso vorteilhafter ist dies für ein gutes SEO-Signal an Google. Doch wie versteht eine Suchmaschine den Aufbau einer Seite und wie erkennt sie die Relevanz und den Sinn von Inhalten?
Datenstruktur der Website
Schema.org ist eine festgelegte Datenstruktur, mit der die Suchmaschine die Website inhaltlich verstehen kann. Hintergrund ist die Zuordnung einer Information zu einem Textelement, die die Suchmaschine benötigt, um einen Zusammenhang zwischen den Inhalten und deren Relevanz herstellen zu können. Das Schema kann im Prozess der Programmierung für die neue Website ausgezeichnet werdet, wenn ein inhaltliches Konzept feststeht. So wird beispielsweise bestimmt, dass die Angebotsseite für den Nutzer wichtiger sein soll als das Impressum. Im Falle von Google resultiert aus einer solchen, festgelegten Datenstruktur die Hervorhebung von besonders wichtigen Inhalten mit Rich Snippets, welche sowohl optisch als auch inhaltlich das Suchergebnis aufwerten.
#3 Funktionen im CMS und Social Media
Mit der Hauptprogrammierung der Website, ist das Ende der Fahnenstange noch nicht erreicht: Jetzt geht's an die Handhabung der Website im Content Management System (CMS) und die Verknüpfungen zu Facebook & Co.
„Eine Website ist nur so gut wie das CMS, in dem sie gepflegt wird“ – diesen Spruch gibt es nicht wirklich, aber ein Fünkchen Wahrheit steckt doch darin. Das Content Management System einer Website erfüllt den Zweck der Contentpflege und sollte dementsprechend auch so genutzt werden. Ein bekantes CMS ist TYPO3. TYPO3 ist ein Content-Management-System (CMS) das zum Erstellen und Pflegen von Webseiten dient. Die Inhalte einer Website oder eines mobilen Endgerätes können durch das TYPO3 CMS optimal bearbeitet und gepflegt werden. Wir empfehlen die Verwendung dieses Programms, da es einfach zu bedienen ist und aus SEO Sicht ausgesprochene Funktionalität vorweist.
SEO Funktionen im CMS
Als Voraussetzung gilt hierbei, dass möglichst viele individuelle Funktionen vorhanden sind und die Einstellungen der Seite flexibel vorgenommen werden können – so sollten Title Tag, Meta-Description, Navigations-Title und Canonical-Tag für jede HTML-Seite separat und manuell pflegbar sein. Ein häufiger Fehler entsteht in der Überschriftenstruktur einer Seite: Es darf nur eine einzige H1-Überschrift ausgegeben werden; dies passiert idealerweise automatisch. Darauf aufbauend entsteht die weitere Struktur der Überschriften mit der Kennzeichnung H2-H6, welche ebenfalls individuell gepflegt werden sollten. Die sogenannten H-Tags sind für den fehlerfreien Aufbau einer Website und für eure Auffindbarkeit aus SEO-Sicht von hoher Bedeutung: Auf der Startseite trägt die Überschrift möglichst den Markennamen als erstes Wort, auf Kategorie-Seiten eine spezifische Kategorie-Bezeichnung. Generell ist es wichtig, nur Informationen mit H-Überschriften auszuzeichnen, die essentiell für die Seite sind. Randspalteninhalte oder Infoboxen sind an dieser Stelle irrelevant.
Über das Menü im CMS erfolgt die Einstellung des Website-Status. Als Standard empfiehlt sich eine Voreinstellung für alle HTML-Seiten auf „index, follow“; einzelne Unterseiten können separat mit „noindex/index“ und „follow/nofollow“ versehen werden. Eine Option zur Aktivierung/Deaktivierung der Seite muss ebenso im CMS vorhanden sein wie die Möglichkeit, den URL-Pfad vollumfänglich zu bearbeiten. Paginierte Seiten sind jeweils mit einer einzigartigen Meta Description und Title Tag zu versehen; sie besitzen außerdem standardmäßig den Tag „index,follow“ und werden mit den HTML. Auszeichnungen rel=“next“ und rel=“prev“ gekennzeichnet, um die Abfolge der Seiten zu bestimmen.
Für die Pflege von Bildern im CMS gilt es folgende Dinge zu beachten: Alt-Tag und Title-Tag sollten bei Bildupload gepflegt und im Falle von mehreren Einbindungen immer beibehalten werden. Idealerweise wird dabei der Aspekt der Mehrsprachigkeit berücksichtigt und Versionen der Tags in verschiedenen Sprachen mitgepflegt, sodass das Bild bei Einbindung auf eine anderssprachige Unterseite die entsprechende Version übernimmt. Apropos Mehrsprachigkeit: Eine Unterseite sollte immer auf dieselbe Unterseite der anderen Sprache verlinken, nicht auf die Hauptseite (d.h. www.hotelxy.de/zimmer wird zu www.hotelxy.de/en/rooms). Jede HTML-Seite, die ein Pendant in einer oder mehreren Sprachen besitzt, sollte im HTML-Head das Attribut hreflang tragen, um die Beziehung aller Sprachversionen zueinander zu verdeutlichen. Per x-default-Tag kann eine Standrad-Sprachversion festgelegt werden, wenn nicht klar ist, von welchem Standort aus der Nutzer auf die Website zugreift oder wenn es für diesen Nutzer keine passende Sprachversion gibt. Die Sprache wird im ISO-Format festgelegt – eine Kategorisierung von Sprachen und den dazugehörigen Ländern/Regionen.
Einbindung von Social Media
Wer gute Inhalte auf seiner Website bereitstellt, sollte seinen Nutzern die Gelegenheit geben, diese in den sozialen Netzwerken zu teilen und zu verbreiten. Mithilfe von Open Graph Tags kann bestimmt werden, welche Inhalte geteilt werden sollen und wie diese dargestellt werden (Überschrift, Beschreibung, Bild, etc.) Obligatorisch sind dabei die Tags og:title, og:type, og:url und og:image. Um das Teilen für die Nutzer möglichst einfach zu machen, sollte jede Inhaltsseite sichtbar Social-Media-Buttons zum Teilen bereithalten, z.B. Facebook, Twitter, Instagram, Pinterest und ggf. XING oder Linked-In. Auch die eigenen Profile sollten an sinnvoller Stelle auf der eigenen Website verlinkt sein – hier jedoch darauf achten, dass eine eigene Lösung programmiert wird, da „Onesizefitsall“-Plug-Ins von Fremdanbietern oft negative Auswirkungen auf die Website-Performance mit sich bringen.
Video-Inhalte werden besonders oft geteilt – bei der Einbindung auf die Website hinterlegt man für diese am besten einen „sprechenden Namen“ und fügt eine aussagekräftige Beschreibung ein. Videos sollten außerdem unter der eigenen Domain gehostet werden, da die Suchmaschine sie andernfalls nicht als eigene Inhalte erkennt.
#4 Websitepflege und Mobile Optimierung
Damit eure Website gut performt und aus Googles Sicht „wertvoll“ wird, ist die fortlaufende Pflege der Inhalte ebenso wichtig wie in der Programmierung. Relevant sind dabei vor allem vier große Punkte: Meta Tags, Inhalt, Bilder und Links. Auch wenn insbesondere das Einpflegen von Meta Descriptions und Title Tags sehr kleinteilig sein kann, sollte man hier keine Bequemlichkeit walten lassen! Der Title Tag fasst den Seiteninhalt idealerweise prägnant in wenigen Worten zusammen und überschreitet nicht die Breite von 55 Zeichen bzw. 512 Pixeln. Google testet seit einiger Zeit zwar eine breitere Version der Title Tags, hat aber dazu noch kein umfassendes Update ausgerollt. Wer sicher sein möchte, dass der Title in den Suchergebnissen vollständig angezeigt wird, sollte sich also an die angegebene Breite halten. Der Title Tag muss individuell für jede Seite erstellt werden und sollte einen einzigartigen Charakter besitzen. Werden Markennamen eingebaut, finden diese bevorzugt am Ende des Title Tags Platz, während das wichtigste Keyword direkt zu Anfang vorkommt. Für einen klickattraktiven Snippet ist die Meta Description ebenso wichtig, auch wenn diese nicht als entscheidender Rankingfaktor für Google gewertet wird. Ähnlich wie beim Title Tag experimentiert Google aktuell mit der Breite, auf Nummer sicher geht man aber mit einer Zeichenanzahl von 150 Zeichen, welche möglichst komplett genutzt werden sollten. Icons heben die Meta Description visuell von den Snippets der Konkurrenz ab und fallen stärker auf. Außerdem sollte die Beschreibung den Inhalt der Seite möglichst zusammenfassen und einen Call-to-Action (CTA) beinhalten, der den Nutzer zum Klick auf die Seite animiert.
Pflege von Website-Inhalten
Weiter geht es auf der Seite selbst – aus Sicht des Nutzers sollte der dargestellte Inhalt einen Mehrwert erzeugen, dem einzigartige Informationen zugrunde liegen, die im Idealfall noch kein anderer Konkurrent so aufbereitet hat. Das weiß übrigens auch Google zu schätzen! Aus SEO-Sicht gilt es weiterhin, relevante Keywords einzubauen. Dabei ist das richtige Maß entscheidend: Die empfohlene Keyword-Dichte liegt zurzeit zwischen 0,5 und 2 Prozent. Das Verwenden semantisch verwandter Begriffe sowie von Synonymen kann ebenfalls hilfreich sein; vermeiden sollte man hingegen Duplicate Content, Phrasen, Abbinder und Textblöcke, die keine Nutzerorientierung besitzen (z.B. „Häufige Tippfehler, die auf unsere Seite führten...“). Beim Einbau von Links ist darauf zu achten, dass der Linktext „sprechend“ für den verlinkten Inhalt gewählt ist und seitenübergreifend einheitlich verwendet wird. Verlinkt man beispielsweise von verschiedenen Unterseiten auf die Zimmer-Seite eines Hotels mit dem Linktext „Zimmer“, sollte der Linktext auch auf allen Seiten „Zimmer“ und nicht etwa „Räumlichkeiten“ lauten. Bilder sind im Sinne der SEO-Optimierung einer Website eine besonders häufige Fehlerquelle, da sie gern übersehen werden. Dabei ist auch hier eine Grundpflege notwendig; dazu gehören das Komprimieren der Bilddatei, ein sprechender Dateiname („Tagungsraum_01“ statt IMG_2362.jpg) sowie das Versehen mit Alt- und Title Tag. Der Alt-Tag (Alternative Tag) muss dabei bezeichnend für den Bildinhalt stehen – Google nimmt diese Information zum Auslesen des Bildinhalts und zeigt diese an, wenn aus unterschiedlichen Gründen das Bild nicht dargestellt werden kann.
Mobile Optimierung der Website
Apropos Darstellung: Der Anteil mobiler Suchanfragen bei Google liegt mittlerweile bei mehr als 50 Prozent. Die Frage über den Sinn von mobiler Optimierung der Website stellt sich daher gar nicht erst – stattdessen sollte der Aufwand lieber in die Details der mobilen Optimierung gesteckt werden. Das Anlegen einer separaten XML Sitemap und einer eigenen robots.txt Datei ist ebenso Pflicht wie der Verzicht auf Flash-Inhalte. Vorhandene Assets wie Java, CSS oder Bildelemente dürfen nicht vom Crawling ausgeschlossen werden. Um eine klare Verbindung zwischen mobiler Website und der zugehörigen Desktop-Version herzustellen, richtet man sogenannte Annotationen ein. Mit den Tags rel=“canonical“ und rel=„alternate“ werden beide Versionen zueinander in Beziehung gesetzt. Diese Vernetzung ist deshalb erforderlich, damit User Agent Strings richtig identifiziert und weitergeleitet werden können, d.h. dass Nutzer eines Mobilgeräts bei einem Zugriff auf die Website auch als solche erkannt und auf die mobile Version der Website weitergeleitet werden. Die Vernetzung der einzelnen Seiten muss außerdem immer zu ihrem inhaltlichen Pendant, nicht zur Startseite, erfolgen. Zur mobilen Optimierung gehört auch ein responsives Webdesign: Mit dem Tag Meta Name „viewport“ sollten 5 bis 6 Größen für die aktuellsten mobilen Endgeräte (Tablets, Smartphones, ggf. Smartwatches) festgelegt und getestet werden. Damit auch die Bilder responsiv erscheinen, werden sie mit der Kennzeichnung <picture> getagged.
Testversionen, Tools und Backlinks
Damit sind wir schon fast am Ende unsere SEO Relaunch Leitfadens angelangt. Ein paar Kleinigkeiten stehen jedoch noch auf der Liste: Zum Einen müssen bei Launch der „echten“ optimierten Website bisherige Testversionen per robots.txt oder „noindex“ geblockt werden, damit diese nicht von Google in den Index aufgenommen werden. Sie sollte aber noch circa sechs Monate erhalten bleiben und per Weiterleitung auf die neue Website verweisen. Zum Anderen sollten alle benötigten Tools mit der neuen Website verknüpft werden, darunter Google Analytics, Trackingcodes und System sowie interne Mailkonten und -footer. Bei der Einrichtung des Google Webmaster wird für jede Subdomain ein eigener Account eingerichtet und der Domainumzug gemeldet. Schließlich sollten auch alle Backlinks aus Social Media, Wikis und von Partner-Websites umgestellt werde – eine gute Gelegenheit, um Broken Links zu überprüfen und zu fixen. Für den Fall, dass neue Inhalte an Partner, Blogger o.ä. weitergegeben werden, ist es ratsam diese ein wenig abzuändern, um externen Duplicate Content zu vermeiden.
Das war’s! Wir wünschen viel Erfolg beim Website-Relaunch. Und wer doch noch Fragen hat oder Hilfe braucht, ruft uns einfach an.