Sie sind hier:

Websites für Mobilgeräte optimieren

Johannes Mehlem
Johannes Mehlem

Johannes Mehlem arbeitet seit 2012 im Search Quality Team bei Google und leitet den deutschen Webmaster-Blog. Zuvor sammelte er Studien- und Arbeitserfahrung im Marketing.

Mehr von diesem AutorArtikel als PDF laden
Sven Naumann
Sven Naumann

Sven Naumann arbeitet seit 2007 im Search Quality Team bei Google und ist im deutschsprachigen Google-Forum für Webmaster aktiv. Nach dem Studium der Medieninformatik arbeitete er zunächst einige Jahre als Flash-Entwickler.

Mehr von diesem AutorArtikel als PDF laden
Johannes Müller
Johannes Müller

Johannes Müller ist seit 2007 ein Webmaster Trends Analyst und Developer Advocate für Search bei Google in Zürich. Er und sein Team verbinden die Welten der Webmaster & Publisher mit den Welten der Entwickler & Produkt-Manager bei Google. Gemeinsam versuchen sie, die Suche für alle zu vereinfachen und zu verbessern.

Mehr von diesem AutorArtikel als PDF laden

Zunehmend werden Internetseiten von Usern mit Mobilgeräten besucht. Um hier mit dem Trend der Zeit zu gehen, sind Webmaster gut beraten, ihre Websites für Mobilgeräte zu optimieren. Google kennzeichnet Websites in den Suchergebnissen entsprechend und hat vor Kurzem einen Leitfaden für Mobilgeräte veröffentlicht. Der folgende Artikel von Johannes Mehlem, Sven Nauman und John Müller von Google erläutert, wo man am besten anfängt, welche Methoden es zur Optimierung für Mobilgeräte gibt, und adressiert häufige Fragen in diesem Zusammenhang.

Aus Sicht der User kann es sehr frustrierend sein, eine Website zu besuchen, welche nicht für Mobilgeräte optimiert ist. Dies kann zum Beispiel bedeuten, dass der Text auf der Seite zu klein ist, nicht alle wichtigen Inhalte gesehen werden können, ohne zu zoomen oder seitwärts zu scrollen. Um den Usern die Nutzung der Google-Suche etwas zu erleichtern, haben wir seit Anfang Dezember damit begonnen, das Label „Für Mobilgeräte” in den Suchergebnissen anzuzeigen.

Optimiert für Mobilgeräte bezieht sich in diesem Zusammenhang auf Smartphones. Im Regelfall ist die Bildschirmfläche von Tablets groß genug, sodass dort die Desktop-Versionen von Websites angezeigt werden.

Abbildung 1: Für Mobilgeräte optimierte Websites sind in den Suchergebnissen mit „Für Mobilgeräte” gekennzeichnet

Wo fange ich an?

Um nun herauszufinden, ob eine Seite für Mobilgeräte optimiert ist, empfiehlt sich der Test auf Optimierung für Mobilgeräte, welcher unter g.co/mobilefriendly zu erreichen ist. Dieser Test ist eine Weiterentwicklung des  „PageSpeed-Insights-Tools”. Je nach Seite lautet das Resultat: „Großartig! Diese Seite ist für Mobilgeräte optimiert” (Hurra!) oder „Nicht für Mobilgeräte optimiert”. Das Ergebnis bezieht sich auf die individuelle URL und ist eine Ja- oder Nein-Entscheidung. Eine Seite kann entweder als voll optimiert für Mobilgeräte anerkannt werden oder als nicht für Mobilgeräte optimiert. Das Test-Tool liefert keine „halbgaren” Ergebnisse wie beispielsweise eine teilweise optimierte Seite. Im Falle von Optimierungsbedarf werden die entsprechenden Gründe konkret benannt. Mögliche Gründe sind beispielsweise:

  • Text ist zu klein und daher schwer lesbar
  • Links liegen zu eng beieinander
  • Mobiler Darstellungsbereich nicht festgelegt
  • Inhalt breiter als Bildschirm

Tipp 1

„Um zu testen, ob eine Seite für Mobilgeräte optimiert ist, kann der Test auf Optimierung für Mobilgeräte als Teil unserer neuen Dokumentation verwendet werden. Der Test ist erreichbar unter g.co/mobilefriendly.“

Ausgehend von dem Testergebnis und den benannten Gründen kann für den Fall, dass die Website nicht für Mobilgeräte optimiert ist, mithilfe der Google-Webmaster-Tools für verifizierte Websites exakt überprüft werden, welche Fehler bezüglich der Benutzerfreundlichkeit auf welchen Seiten der Website vorliegen (siehe Abbildung 2).

Abbildung 2: Ansicht der verschiedenen Fehler bezüglich Benutzerfreundlichkeit in den Webmaster-Tools

Ebenso kann das Content-Management-System (z. B. WordPress) der Website durch den Test erkannt werden, wofür Google weiterführende Informationen anbietet (siehe Tipp 2).

Welche Methoden gibt es, um meine Website für Mobilgeräte zu optimieren?

Wenn der beschriebene Test auf Optimierung für Mobilgeräte negativ verlief bzw. wenn ohnehin geplant war, die Website für Mobilgeräte anzupassen, stellt sich als Nächstes natürlich die Frage der Umsetzung.

Welche Möglichkeiten gibt es? Im Wesentlichen haben sich drei Methoden zur Bereitstellung mobiltauglicher Websites etabliert: Responsive Webdesign, dynamische Bereitstellung und separate URLs.

Alle diese Konfigurationen werden gleichermaßen unterstützt, wobei sich für die meisten Fälle die Nutzung von Responsive Webdesign empfiehlt.

Die Methoden im Einzelnen:

Responsive Webdesign

Stellt unabhängig vom verwendeten Gerät den gleichen HTML-Code bereit und variiert mittels CSS die Darstellung der Inhalte in Abhängigkeit von der Bildschirmgröße. Ein wesentliches Element hierbei ist das Viewport-Meta-Tag, welches dem Browser mitteilt, wie die Abmessungen und Skalierungen entsprechend der Breite des Geräts angepasst werden sollen.

Der Vorteil hierbei: Nutzer erreichen die Desktop- sowie Mobil-Inhalte über die gleiche URL – für den Betreiber der Website reduziert sich der Wartungsaufwand, da die Pflege unterschiedlicher Seiten (Desktop & Mobil) entfällt, was sich insgesamt auch positiv auf das Crawling der Website auswirkt.

Dynamische Bereitstellung

Alle Geräte greifen bei dieser Lösung auf die gleichen URLs zu, bekommen jedoch unterschiedliche HTML-Versionen ausgeliefert – abhängig davon, was der Server über den Browser des Besuchers (User-Agent) herausfinden kann. Hierbei kommt der Vary-HTTP-Header zum Einsatz, um in Abhängigkeit vom User-Agent verschiedene Inhalte bereitzustellen.

Häufige Fallstricke hierbei: Die Erkennung der User-Agents macht den Abgleich mit einer Liste an User-Agent-spezifischen Zeichenfolgen erforderlich. Wenn diese Liste nicht gepflegt und laufend aktualisiert wird, werden z. B. neue User-Agents möglicherweise nicht korrekt erkannt.

Separate URLs

Hierbei werden unterschiedliche Versionen der Website auf verschiedenen URLs bereitgestellt. Es wird versucht, den User-Agent des Benutzers zu erkennen, um diesen dann auf die entsprechende Version weiterzuleiten. Mittels der Elemente rel=’canonical’ und rel=’alternate’ wird der Bezug zwischen Desktop-URLs und ihrem mobilen Gegenstück hergestellt.

Häufige Fallstricke hierbei: Bei der gegenseitigen Verlinkung kann es leicht zu Fehlern kommen, sodass z. B. auf Mobil-Seiten fälschlicherweise auf die Desktop-Versionen verwiesen wird. Ebenso bieten die automatische Erkennung des User-Agents und darauf basierende Weiterleitungen ein gewisses Fehlerpotenzial.

Abbildung 3: Übersicht typischer Methoden zur Erstellung mobiltauglicher Websites

Tipp 2

„Es empfiehlt sich, wenn möglich, die Nutzung von Responsive Design, was auch von den meisten populären CMS unterstützt wird und wofür wir im Leitfaden für Mobilgeräte unter Website Software eine Kurzübersicht für elf CMS mit Anleitungen und Tipps bereitstellen.”

Welche Faktoren können bei der Auswahl externer Entwickler behilflich sein?

Oft wird sich die Situation ergeben, dass für die Erstellung der mobilen Website Leistungen externer Entwickler angefordert werden. Welche Faktoren können bei der Auswahl externer Entwickler behilflich sein?

Referenzen

Lassen Sie sich Beispiele mobiler Websites zeigen und fragen Sie danach, ob bereits Erfahrung mit Responsive Webdesign besteht. Verwenden Sie Tools wie PageSpeed Insights oder den neuen Test auf Optimierung für Mobilgeräte, um einen Blick auf die Referenzseiten zu werfen und mögliche Probleme bezüglich der Geschwindigkeit oder Nutzererfahrung zu erkennen.

Verständnis der mobilen Nutzer

Versuchen Sie sicherzustellen, dass der Entwickler mit Ihrem Unternehmen vertraut ist und über die am häufigsten genutzten Funktionen der Website informiert ist. Die Funktionen, welche für mobile Nutzer am wichtigsten sind, sollten auf jeden Fall unterstützt werden.

Sinn für Geschwindigkeit

Achten Sie darauf, dass der Entwickler auf schnelle Ladezeiten bedacht ist und mit Tools wie z. B. PageSpeed Insights vertraut ist.

Häufig gestellte Fragen

Haben „responsive” Websites einen Rankingvorteil?
Nein. Es ist allerdings so, dass Websites mit responsiven Webdesign-Techniken in der Regel weniger Komplexität enthalten. Es sind beispielsweise keine Redirects nötig, man muss die User-Agents nicht serverseitig erkennen, und nicht mit den Elementen rel=alternate oder rel=canonical arbeiten. Es ist somit auch einfacher, alles korrekt und sauber zu implementieren.

Tipp 3

„Die Implementierungsmethode selbst hat keinen Einfluss auf das Ranking. Jedoch empfiehlt sich die Anwendung von Responsive Webdesign, was insgesamt weniger Komplexität mit sich bringt und den Wartungsaufwand deutlich reduzieren kann.”

Muss die mobile Version meiner Website genau gleich aussehen? Das geht doch gar nicht!
Nein. Wichtig ist, dass die Hauptinhalte der mobilen und der Desktop-Version der Website äquivalent sind. Zusätzliche Inhalte, wie etwa eine Sidebar, das Menü oder Fußzeilen, können durchaus entfernt oder vereinfacht werden. Der Benutzer soll am Mobilgerät das erhalten, was in den Suchergebnissen aufgrund der Hauptinhalte versprochen wurde.

Warum ist es so wichtig, auf meiner mobilen Website CSS und JavaScript nicht in der robots.txt zu sperren?
Ohne die CSS-Angaben (und oft auch den JavaScript-Code) wird eine Seite in der Regel nicht richtig dargestellt, und schon gar nicht so, dass sie auf einem Mobilgerät funktioniert. In solchen Fällen kann die Seite leider auch nicht als mobilfreundlich eingestuft werden. Ganz am Anfang konnten Suchmaschinen noch nicht so gut mit CSS- und JavaScript-Dateien umgehen und sie erschienen gelegentlich sogar in den Suchergebnissen. Seit einigen Jahren ist das aber kein Problem mehr und so macht es auch in der Regel keinen Sinn mehr, diese Dateien per robots.txt zu sperren.

Ich habe schon eine separate mobilfreundliche Website. Muss ich auf responsive Webdesign-Techniken umstellen?
Nein. Sofern die separate Website korrekt mit der Desktop-Version verknüpft ist, wird dies gleichermaßen funktionieren.

Ich habe gehört, dass eine App auch ganz gut sein kann. Ist da was dran?
Inzwischen kann man mittels App-Indexing auch Apps in die Suche integrieren, sodass diese auch in den Suchergebnissen erscheinen, wenn Benutzer die App installiert haben. Somit ist es kein Problem, App und Website gleichermaßen zu betreiben, da Inhalte von beiden in den Suchergebnissen erscheinen können.