SEO Sunday: Behandlung von Smartphone Content

Vor etwa zwei Jahren haben wir uns bei rankingCHECK bereits mit Googles Handlungsempfehlungen für eine optimale Auszeichnung von mobilen Webseiten auseinandergesetzt. Rückblickend lässt sich sagen, dass das Thema zur damaligen Zeit kaum präsent war und erst durch das kürzliche Algorithmus-Update vom 21. April auch in den Köpfen der Webseiten-Betreiber angekommen ist. Dabei ist der Weg schon lange vorgegeben und grundsätzlich hat sich an den technisch notwendigen Maßnahmen für eine fehlerfreie Performance in den mobilen organischen Suchergebnissen nicht viel geändert. Nichtsdestotrotz möchten wir die Aktualität des Themas dazu nutzen, die korrekte Vorgehensweise zur Behandlung von mobilen Website-Instanzen noch einmal zu erläutern.

Bereits im Sommer 2012 hat Google ein wenig Licht in die seit langem diskutierte Fragestellung nach einer SEO-freundlichen Struktur für mobilen Webseitencontent gebracht. Was zuvor unter der Headline Standarddomain vs. mobile Subdomain im Raum stand, wird von Google mittlerweile klar kommuniziert. So unterscheidet Googles Webmaster Trends Analyst Pierre Far vor allem zwischen drei verschiedenen Methoden für Smartphone Mobile Site Design, für eine optimale Performance in den SERPs, die sich mittlerweile auch in den offiziellen Hilfe-Dokumenten wiederfinden:

Responsive Web Design

Googles Empfehlung für eine optimale mobile Konfiguration geht klar in Richtung responsive Webdesign, wenngleich auch kommuniziert wird, dass eine responsive Lösung keinen Ranking-Vorteil mit sich bringt, mitunter jedoch für eine fehlerfreiere Indexierung sorgen kann.

Bei dieser Variante liegt der Seiteninhalt zwischen der Mobile- und Desktop-Website auf ein und derselben Domain vor und liefert den identischen HTML Code aus. Gerätespezifisch sorgen zum Beispiel CSS3 Media Queries dafür, dass das Design je nach Ausgabegerät optisch angepasst wird. Eine Möglichkeit besteht hierzu in der Verwendung des max-width Attributs für eine maximale Display-Breite des Anzeigegeräts (so kann zum Beispiel auf dem Desktop PC mittels Verkleinerung des Browser-Fensters die Darstellung geprüft werden):

<link rel=“stylesheet“ media=“(max-width: 640px)“ href=“max-640px.css“>

<link rel=“stylesheet“ media=“(min-width: 640px)“ href=“min-640px.css“>

<meta name=“viewport“ content=“width=device-width, initial-scale=1.0″>

Die Breite von 640px ist in diesem Beispiel natürlich nur ein Richtwert und kann entsprechend aktueller Gerätespezifikationen stark variieren. Besonders wichtig ist, dass über das so genannte Viewport Meta-Tag die Abmessungen und Skalierung der Seite auf die Breite des Geräts angepasst werden, da ansonsten mobile Browser die Seite standardmäßig in der Desktop-Bildschirmbreite anzeigen.

Weitere, zu berücksichtigende Aspekte hinsichtlich der mobilen Darstellung (Stichwort: mobile friendly Label) lassen sich in meinem Artikel zum mobilen Webdesign nachlesen. Informationen und Beispiele zur Implementierung von flexiblem Design via media Queries finden sich in den offiziellen Hilfe-Dokumenten von Google.

Sobald Googles Algorithmus diese Konfiguration erkennt und der Smartphone Googlebot User-Agent vom Crawling nicht ausgeschlossen wird, sorgt der responsive Ansatz für eine korrekte Indizierung der Inhalte in den mobilen Index. Extrem wichtig an dieser Stelle ist, dass Ressourcen wie etwa CSS Dateien oder JavaScript nicht über die robots.txt vom Crawling ausgesperrt werden, da der Googlebot das responsive Verhalten sonst möglicherweise nicht erkennen kann.

Ein großer Vorteil dieser Methode ist die einheitliche Domain und URL-Struktur beider Website-Varianten. Gerade aus SEO-Sicht spielt eine konsequente Konsolidierung von Inhalten eine große Rolle. Google selbst begründet seine Empfehlung für responsive Webdesign unter anderem wie folgt:

Die Algorithmen von Google können einer Seite mit Responsive Webdesign präzise Indexierungseigenschaften zuordnen. Somit ist es nicht mehr erforderlich, das Vorhandensein entsprechender Desktop- bzw. mobiler Seiten zu signalisieren.

Responsive Webdesign spart Ressourcen beim Crawlen Ihrer Website durch Googlebot. Ein einzelner Googlebot-User-Agent muss Seiten, die mithilfe von Responsive Webdesign erstellt wurden, nur einmal crawlen. Mehrfaches Crawlen mit verschiedenen Googlebot-User-Agents, um alle Versionen der Inhalte zu erfassen, ist nicht erforderlich. Diese Effizienzsteigerung beim Crawling kann Google indirekt auch dabei unterstützen, mehr Inhalte Ihrer Website zu indexieren und die Inhalte entsprechend aktuell zu halten.

Außerdem entfällt die konsequente Verwendung von Weiterleitungsregeln zwischen mobile und Desktop-Variante, was zum einen die Performance erhöht und zum anderen weitere Fehlerquellen minimiert. Auch profitiert die mobile Seite bei der responsiven Lösung von der gesamten Reputation der ursprünglichen Desktop-Seite.

Dynamische Bereitstellung

Die zweite Variante beschreibt die gerätebasierte Auslieferung von Inhalt + Layout mittels User-Agent Request. Auch bei dieser Vorgehensweise existiert die Möglichkeit, eine einheitliche Standard-Domain für Desktop- und mobile Variante zu verwenden, mit dem Unterschied, dass CSS+HTML verschieden sind. Um dem Googlebot das Erkennen und Crawlen des mobilen Inhalts zu erleichtern, empfiehlt Google die Verwendung des so genannten Vary-HTTP-Headers. Dieser sorgt dafür, Google einen Hinweis zu geben, dass der Inhalt der Website abhängig von dem zugreifenden User Agent variieren könnte:

HTTP/1.1 200 OK

Content-Type: text/html

Vary: User-Agent

So verhindert das Vary: User-Agent im http response auch die Auslieferung von gecachten Seiteninhalten, abhängig vom zugreifenden User-Agent. Die vermeintliche Auslieferung von Desktop-Inhalten aus dem Cache an mobile Browser wird damit unterbunden. Zudem unterstützt der Vary-HTTP-Header den Googlebot bei der schnelleren Erkennung der für Mobilgeräte optimierten Inhalte.

Aus verschiedenen Gründen sieht Google (und auch wir) diese Variante jedoch als sekundär an: Neben der Notwendigkeit, eine ständig aktualisierte Liste an User-Agent-Strings implementieren zu müssen, lässt sich vor allem die hohe Fehleranfälligkeit und die Gefahr von Cloaking als Hauptproblem herauskristallisieren.

Unterschiedliche Domains via rel=alternate

Die dritte, von Google unterstützte Möglichkeit, mobile Webseiten zu behandeln, bezieht sich auf die Verwendung von unterschiedlichen Domains je Gerätetyp. Das Ausgeben von Mobile-Content zum Beispiel auf Subdomains, wie etwa m.domain.de gehört schon lange zur gängigen Praxis, muss jedoch gesondert behandelt werden. Die Gefahr von Duplicate Content und der fehlenden Zuordnung beider Instanzen macht sich hierbei besonders bemerkbar. Aus dem Grund rät Google zunächst zur Verwendung von „bidirectionalen Annotationen“, die dem Algorithmus die Äquivalenz und Beziehung beider Websitetypen kommunizieren.

Um dies zu gewährleisten, sollte jeder URL der Desktop-Seite ein rel=alternate Attribut implementiert werden, welches die mobile Seite referenziert. So wird die separate mobile Seite als Alternative der Desktop-Seite deklariert und via media-query (siehe oben) für die Anzeige auf Mobilgeräte definiert (explizit: wann Google die alternative URL verwenden soll). Umgekehrt erhält jede URL der mobilen Seite ein rel=canonical zurück zur Desktop-Seite. Beide „Annotationen“ müssen natürlich konsequent auf jeder Unterseite immer 1:1 zwischen Mobile- und Desktop-URL eingefügt werden. Auch sollten nicht mehrere Desktop-Seiten annotiert werden, sodass sie auf eine einzelne mobile URL verweisen oder umgekehrt. Zumindest für das rel=alternate Tag bietet Google hierzu eine Implementierung in die XML-Sitemap an.

Die korrekte Verwendung der bidirektionalen Annotationen signalisiert Google, dass beide Website-Instanzen als ein und dieselbe Entität behandelt werden und konsequent in den mobilen bzw. Desktop-SERPs mit ihrer entsprechenden Domain erscheinen. Dazu muss außerdem gewährleistet sein, dass beide Domains für die Googlebot-UserAgents erreichbar sind.

Ein fester Bestandteil der mobilen Lösung über separate Domains ist die Verwendung von Weiterleitungen für mobile User sowie dem Googlebot-User-Agent. Zudem ist für die technische Umsetzung der Weiterleitungen der Statuscode 302 empfohlen, da es sich ganz offensichtlich um keine permanenten Weiterleitungsvorschriften handelt. Äquivalent akzeptiert Google aber auch 301 oder Javascript Weiterleitungen. Als viel wichtiger sieht Google hier ein konsequentes Mapping an, dass sich strikt an den rel=alternate Annotationen orientiert. Ob hierbei eine unidirektionale Weiterleitungsregel (nur von Desktop-Variante zur Mobile-Variante) oder eine bidirektionale Weiterleitungsregel (sowohl von Desktop zu Mobile, als auch von Mobile zu Desktop) umgesetzt wird, ist von Google nicht priorisiert. Relevant ist hierbei nur die konsistente 1:1 Zuordnung der einzelnen URL-Varianten. Genaue Vorgaben hierzu gibt Google in dem folgenden Hilfe-Dokument aus.

Fazit:

Die Ankündigung des 21. Aprils als größeres Algorithmus-Update gegenüber dem verheerenden Panda-Update hat Webseiten-Betreiber wach gerüttelt. Wenn auch die ersten Auswertungen im Nachgang gezeigt haben, dass die Effekte noch nicht so gravierend ausfielen wie erwartet, wird schnell klar, wo der Zug mittlerweile angekommen ist.

Die Optimierung der mobilen Webseite ist längst aus dem Status eines „Features“ herausgewachsen und kann als absolut obligatorisch betrachtet werden. Wer kurzfristig keine angepasste mobile Darstellung & Usability aufweist, wird mittel- bis langfristig von den noch immer rapiden wachsenden mobilen Suchvolumina überrollt. Wer zukunftssicher handeln will, macht sich schon jetzt mit den Themen App-Indexierung und App-Deep-Linking vertraut.

Geschrieben von

Jasper Thibaut

Twitter LinkedIn Xing

Jasper Thibaut ist Head of SEO bei morefire und mobile SEO Spezialist. Beruflich wie auch privat setzt er sich verstärkt mit dem mobilen Web und Disziplinen des mobile Marketings auseinander. Mehr von ihm gibt es auf jasper-thibaut.de