Das Thema Mobile hat sich in den letzten Jahren dramatisch verändert. Sogar das Spezialgebiet „Mobile-SEO“ ist entstanden, um das sich auch viele Mythen ranken. Ein tieferer Blick ist notwendig, um zu verstehen, wie man die eigene Seite mobile-friendly macht, die Maßnahmen überprüfen kann und was langfristig in der Strategie zu beachten ist.
Das große Google-Update vom 21. April hat das Thema Mobile wieder ganz nach oben gespült. Mit der Ankündigung, Seiten besser in den Suchergebnissen zu platzieren, die auf mobile Geräte hin angepasst sind, wurden viele Webmaster verunsichert. Die bisherigen Auswirkungen sind moderat, aber das Thema ist zu wichtig, um sich nicht genauer damit zu befassen.
Um Seiten fit für Mobile zu machen, gibt es im Prinzip drei Möglichkeiten, die Google unter einfach.st/gmft erklärt. Neben einer responsiven Lösung sind alternative mobile Seiten auch ein Weg. Die dynamische Anpassung des Codes je nach Gerät durch Abfrage des sog. „User-Agents“ wird selten eingesetzt, beispielsweise von Yahoo. Diese Variante ist aber am wenigsten zu empfehlen, da sie sehr fehleranfällig ist.
Zunächst zeigt eine eigens durchgeführte Untersuchung der weltweiten Top-100-Websites von Alexa (www.alexa.com/topsites), dass Mobile-friendly noch nicht dominiert!
Bei der Analyse galten aber strengere Regeln. So hat beispielsweise yahoo.de eine mobile Ansicht der Website abhängig vom verwendeten Gerät, bietet aber in der Desktop-Ansicht keine responsive Ansicht. Links im Bild sieht man die Ansicht für iPhone 5 mit den Google-Developer-Tools (für Tests übrigens sehr zu empfehlen: einfach.st/chrometest). Dort ist auch ein Link, der nicht funktioniert (Pfeil).
In der Desktop-Ansicht rechts werden bei schmaleren Bildschirmen Bereiche einfach abgeschnitten und Menüelemente überlagern sich in der Navigation (Pfeil oben rechts). Hinzu kommt, dass Yahoo die von Google empfohlenen Vary-Header nicht einsetzt und somit diese Lösung nicht als mobile-friendly eingestuft wurde.
Nur eine weitgehend richtige Implementierung einer der drei Lösungen führte zu einer entsprechenden Einstufung. Die dynamische Anpassung der Inhalte je nach User-Agent konnte in keinem einzigen Fall als zumindest ansatzweise richtig implementiert eingestuft werden. Das zeigt, dass es heute massive Probleme in der Umsetzung selbst bei großen Websites gibt. Ganz auf responsive Lösungen zu verzichten, ist grundsätzlich problematisch, da die Nutzer immer mehr daran gewöhnt sind und Bildbereiche dann abgeschnitten werden.
Daher gehen viele Seiten auch einen Mittelweg und machen einen Teil der Elemente responsive. Unter tianya.cn bleibt das rechte Banner stets am rechten Bildschirmrand, überlagert aber gnadenlos andere Elemente.
Das ist natürlich keine richtige responsive Lösung und ist selbst auch als Notlösung nicht akzeptabel. Da eine vollständig responsive Lösung aufwendig ist, sieht man nicht selten solche Basteleien. Man kann aber davon ausgehen, dass der Anteil an responsiven Websites weiter wachsen wird.
Alle Details zu der Untersuchung sind übrigens zu finden unter http://einfach.st/cybd.
Die Suche auf mobilen Geräten hat in den letzten Jahren dramatisch zugenommen, was jeder, der ein Smartphone hat, auch leicht nachvollziehen kann. Manche Suchvorgänge haben sich von Desktop auf Mobile verschoben, einfach weil das Handy jederzeit griffbereit ist. Google hat erst Anfang Mai verkündet, dass nun mehr Suchanfragen auf mobilen Geräten als auf dem Desktop durchgeführt werden (http://einfach.st/sel4). Bevor man sich dem Thema nun technisch von der SEO-Seite nähert, muss man ein paar Fakten wissen.
Mobile Seiten werden also dann in den mobilen Ergebnissen bevorzugt angezeigt, wenn sie als mobile-friendly eingestuft werden. Die Suchergebnisse in der mobilen Suche werden also modifiziert und stammen nicht aus einem eigenen Index für mobile Seiten. Allerdings ist bestätigt, dass Google einen eigenen Index plant (http://einfach.st/thpos).
Es gab früher schon einen Index für Feature Phones (http://einfach.st/sel5), basierend auf der WAP-Technologie, die heute aber keine Rolle mehr spielt. Ob ein neuer Index kommt, ist unklar. Grundsätzlich arbeitet Google aber an seinen Algorithmen für die Erkennung mobiler Seiten.
„Mobile“ ist als Begriff leider ungenau, denn dass mehr als die Hälfte aller Suchanfragen von mobilen Geräten stammen, schließt auch Tablets mit ein. In Google Analytics haben Tablets eine eigene Gerätekategorie und zählen nicht zur Kategorie „Mobile“. Man muss also stets auf den Kontext achten! Grundsätzlich können Tablets Websites in der Regel ohne Einschränkung vollständig darstellen und die Funktionen der Website nutzen. In der Regel ist die Conversion-Rate der Tablet-Nutzer gleichauf oder sogar größer als die der Desktop-Nutzer. Daher sollte man Tablet-Nutzer gerade nicht auf optimierte mobile Seiten leiten, die meistens einen geringeren Funktionsumfang haben!
Mobile-SEO besteht heute also primär darin, nicht die mobilen Seiten (wenn vorhanden) zu optimieren, sondern für gute Platzierungen in der Desktop-Suche zu sorgen und dann sicherzustellen, dass alle Seiten „mobile-friendly“ sind. Unklar ist, ob der mobile Index definitiv kommen wird und ob man mobile Varianten zusätzlich optimieren muss. Im Folgenden sollen nun konkrete Maßnahmen bei einer korrekten Umsetzung und Überprüfung helfen.
Schon seit Jahren bittet Google darum, diese Grundregel zu beachten. Dennoch kommt es schon hier immer wieder zu Problemen. Dabei kann man selbst in der Google Search Console (vormals die Webmaster-Tools) diese Information erhalten. Kann eine Suchmaschine diese Daten nicht auslesen, kann eine Seite nicht als mobile-friendly eingestuft werden.
Es ist kein Geheimnis, dass Google responsive Varianten bevorzugt. Unter einfach.st/gared erklärt Google Weiterleitungen auf mobile Seiten als eine „akzeptable“ Lösung. Begeisterung klingt anders. Nur responsive Seiten bekommen eine Eins mit Stern. Allerdings wird weiterhin bestätigt, dass responsive Lösungen gleich bevorzugt werden wie spezielle mobile Seiten. Und man muss klar sagen, dass es mobile Seiten sicher auch noch lange geben wird, weil gerade Angebote speziell für mobile Geräte sich mit einer perfekten responsiven Lösung für alle Endgeräte schwertun.
Was ist also genau zu beachten, wenn man spezielle mobile Seiten einsetzt?
Natürlich sollten beide Seiten auch nicht durch die robots.txt oder das Meta-Tag robots von der Indexierung ausgeschlossen sein. Stand heute werden die mobilen Seiten dennoch in den Suchergebnissen angezeigt, da aber Google einen mobilen Index aufbaut, sollte man dies tunlichst unterlassen, weil man sonst in Zukunft in der mobilen Suche nicht mehr erscheint!
Man kann für eine Desktop-Variante mehrere mobile Varianten für verschiedene Bildschirmauflösungen angeben. Die Startseite von Twitter hat im Quellcode einen Link zur mobilen Variante unter mobile.twitter.com und 43 Alternate-Links für andere Sprachvarianten. Der Link im Header der Startseite zur mobilen Variante lautet:
<link rel="alternate" media="handheld, only screen and (max-width: 640px)" href="https://mobile.twitter.com/?locale=de">
Mit dem Attribut „media“ kann man also genau angeben, für welche Geräte diese alternative Seite gelten soll, in der Regel definiert durch eine Bildschirmauflösung.
Es gibt aber noch weitere wichtige Regeln:
3. Besucher sollen gemäß den Angaben im Alternate-Link mittels einer einzigen Weiterleitung auf die mobile Seite geleitet werden.
Diese Weiterleitungen sollen stets in einem Schritt erfolgen: einfach.st/gared). Der Alternate-Link selbst aber sollte nicht weiterleiten, sondern direkt auf die mobile Seite zeigen. Doch es gibt noch weitere Punkte, die sich aus den Regeln ergeben:
4. Die mobile Seite sollte dieselbe Sprache haben wie die Desktop-Variante.
5. Die mobile Seite sollte auch denselben Inhalt haben wie die Desktop-Variante.
In dem Beispiel von Twitter sieht man, dass dort in der URL zum Alternate-Link die Sprache mittels des Parameters locale=de gleich mitgegeben wird.
6. Die Zuordnung von Desktop und Mobile muss eindeutig sein. Zwei mobile Seiten mit verschiedenen Inhalten dürfen nicht denselben Canonical-Link haben.
7. Zwei verschiedene Desktop-Seiten dürfen nicht denselben Alternate-Link haben.
Beachten Sie, dass heute alle diese Regeln von Google nicht genau geprüft werden. Es wird aber daran gearbeitet, weil eine fehlerhafte Implementierung zu nicht korrekten Suchergebnissen führt.
Für folgende Schritte ist Voraussetzung, dass CSS- und JS-Dateien von Ihrer Website indexiert werden dürfen. Zunächst können Sie den einfachen Test von Google unter einfach.st/gwt34 machen. Erst wenn man dort das O. k. erhält, machen weitere Analysen Sinn. Mit dem Test unter Pagespeed Insights erhalten Sie deutlich mehr Informationen (http://einfach.st/gpsi1).
Mehr Details zur Benutzerfreundlichkeit erhalten Sie von Google in der Search Console. Dort genannte Probleme sollten Sie unbedingt beheben.
Einen neuen Tester hat die W3C unter einfach.st/valid1 online gestellt, der leider meistens überlastet ist
Im Folgenden werden typische Probleme anhand von Beispielen aufgezeigt. Für Seiten, die alternative mobile Seiten verwenden, gibt es in Forecheck drei Berichte.
Bei einer Analyse der ersten 10.000 Seiten von twitter.com haben sich folgende Probleme gezeigt:
Im folgenden Bild sind Beispiele solcher Probleme zu sehen.
In der ersten Zeile (Index 49) liefert der Alternate-Link den Status 302 (Weiterleitung). Grundsätzlich sollten Alternate-Links nicht weiterleiten.
In der dritten Zeile (Index 58) hat die mobile Seite keinen Canonical-Link, zudem stimmen die Title-Tags nicht überein (gelb hinterlegt). Man erkennt hier schon, dass es sich um verschiedene Sprachen handelt. Der Alternate-Link sollte aber nicht auf eine Seite mit einer anderen Sprache verweisen.
Letzte Zeile (Index 82): Hier gibt es einen Canonical-Link, der auf die Desktop-Seite zurückverweist (deswegen grün hinterlegt). Dennoch stimmen hier aber die Title-Tags nicht, es wird wieder auf eine Seite mit anderer Sprache verwiesen.
Ganz rechts im Bild erkennt man Spalten mit Regeln. Diese verlinken in die Hilfe von Forecheck und geben zu jedem Problem weitere Hilfestellung. Die Untersuchung der Alexa-Top-100-Websites zeigt zwar, dass keine Website eine fehlerfreie Implementierung hat, dies sollte aber kein Grund sein, die Hände in den Schoß zu legen.
display: none ist wie auch visibility:hidden eine CSS-Anweisung, die bestimmte Elemente ausblendet. Sie sind zwar im Quellcode vorhanden, werden aber nicht angezeigt. Vor vielen Jahren war das durchaus eine bekannte Methode, um Inhalte in den Quellcode zu packen, die nicht angezeigt werden sollten. Grundsätzlich hat Google bestätigt, dass Inhalte, die für den Nutzer erst durch eine Aktion sichtbar werden, als weniger wichtig erachtet werden (http://einfach.st/seopor4). Texte, die erst durch Ausklappen gelesen werden können, haben für Google eine geringere Bedeutung.
Typisches Beispiel sind Akkordeon-Texte (aufklappbare Boxen). Daher sollte man alle Vorkommen von display:none und visibility:hidden untersuchen.
Es gibt prinzipiell den Verdacht, dass bei responsiven Seiten das Problem auch besteht. Es ist üblich, die Menge an Informationen für kleinere Bildschirmgrößen zu reduzieren. Mittels CSS-Angaben können Elemente einfach ausgeblendet werden. Allerdings liegt es auch hier nahe, dass der Google-Algorithmus „denkt“: Wenn das ausgeblendet wird, kann es nicht so wichtig sein.
Man sollte daher jeden Einsatz von display:none und visibility:hidden untersuchen. Deren Einsatz kann natürlich über die Quellcodes und CSS-Dateien verstreut sein. Um alle Vorkommen in einer Website finden zu können, kann man beispielsweise die Volltextsuche in Forecheck verwenden, die auch alle Quellcodes durchsuchen kann.
Sie sollten beim Einsatz einer responsiven Website auch prüfen, welche Elemente bei einer Verkleinerung der Bildschirmgröße verschoben werden oder ganz verschwinden. Achten Sie hierbei auch auf die Navigation, denn auch hier werden manchmal Teile der Menüs ausgeblendet.
Das Thema Mobile-friendly steht erst am Anfang und wird in den nächsten Jahren wichtig bleiben. Die dynamische Anpassung des Quellcodes an die Geräte wie bei Yahoo.de dürfte langfristig kaum noch einsetzbar sein, weil die Zahl der Geräte weiter steigt und damit der Aufwand der Implementierung. Die gezeigten Probleme bei den alternativen mobilen Seiten machen nachvollziehbar, warum Google responsive Seiten bevorzugt. Hier sind alle Informationen in einer Seite enthalten.
Ob ein eigener mobiler Index kommen wird, ist unklar. Unabhängig davon ist klar, dass Google seine Algorithmen weiter verbessert und sich Fehler in der Implementierung von Websites zukünftig stärker auswirken werden. Selbst wenn Sie in der mobilen Suche heute gut sichtbar sind, muss das nicht so bleiben. Google lernt jeden Tag dazu, Sie müssen es auch!