Es wird endlich Zeit eine mobile Website zu haben – aber warum gerade jetzt? Diese Woche hat Google Ernst gemacht mit seiner Ankündigung, in das Ranking von Websites die Tauglichkeit für mobile User einfließen zu lassen.

Was bedeutet das aber nun für den Betreiber einer Website. Muss man sich überraschen lassen oder kann man schon vorher feststellen, wie es um das künftige Ranking aussieht? Die gute Nachricht, man muss nicht warten. Google bietet eine Menge Unterstützung an, um die Betreiber einer Website beim Künftigen mobile Ranking zu unterstützen.

Ich möchte in diesem Artikel kurz beschreiben wie man dabei am besten vorgehen und wie man eventuelle Probleme beheben kann.

Was hat Google geändert?

Bevor ich das mache, möchte ich noch kurz auf die Änderungen und die Auswirkungen eingehen. So wie es derzeit aussieht, werden nur Suchanfragen, die von mobilen Geräten aufgerufen werden davon berührt sein. Gibt man einen Suchbegriff auf der Google Website auf einem Smartphone ein, dann erscheint beim Suchergebnisse (hoffentlich) der Zusatz „Für Mobilgeräte“, wie in unten stehenden Bild zu sehen ist.

Im Gegensatz zur mobilen Abfrage sieht man diesen Zusatz „Für Mobilgeräte“ bei der Desktop Abfrage nicht. Probiert man die selbe Suchanfrage auf einem Desktop Browser aus, dann sieht man eben keinen Zusatz. Es ist daher auch anzunehmen, dass es auch keine Auswirkungen auf das Ranking bei Desktop Suchen gibt.

Bedeutet das nun, dass man seine Website damit nicht mobile tauglich machen muss? Nun meiner Meinung nach keineswegs, denn erstens kann sich das bei Google natürlich auch schnell ändern und in Zukunft auch die Desktop Variante betreffen. Zweitens sollte man heute auch aus anderen Gründen schon dafür sorgen, dass seine Website für mobile Geräte verwendbar ist. Alleine wenn man sich die Statistiken für die mobile Internet Nutzung ansieht, dann erkennt man, dass der Trend eindeutig zur Mobilität geht. Ob es den eigenen Webauftritt betrifft, muss jeder für sich selbst entscheiden, aber eine Hilfe dafür können Analyse Tools, wie etwa auch Google Analytics sein, die einem Auskunft darüber geben, welche Geräte die User einer Website zum Browsen benutzen.

Da ich einmal davon ausgehe, dass wir dem aktuellen Trend folgen und für mobile Nutzer gerüstet sein wollen, möchte ich jetzt im folgenden einige Ratschläge dazu geben.

Die 3 Schritte zur mobile Website

Schritt 1: Testen der Website

Zuerst einmal sollte man sich die Frage stellen, wie sieht ein mobiler User bzw. Im speziellen der mobile „Google User“ unsere Website. Um hier keine Überraschungen zu erleben, hat Google bereits vor einiger Zeit einen Test für Mobile Friendly Websites ins Netz gestellt. Aufrufen kann man diesen unter:

https://www.google.com/webmasters/tools/mobile-friendly/

Gibt man hier die eigene URL ein, dann bekommt man im besten Fall die Rückmeldung, dass die Website Mobile tauglich ist.

Man muss hier dann keine weiteren Schritte durchführen. Kann sich allerdings noch das Bild ansehen, wie die Seite auf einem Handy aussehen würde.

Erhält man allerdings eine Meldung die lautet „Nicht für Mobilgeräte optimiert“ dann besteht Handlungsbedarf. Netterweise teilt Google auch gleich mit, was es an der Seite zu kritisieren gibt. Ein Beispiel ist im folgenden Bild zu sehen.

Weitere Informationen, was man tun kann um SEO für Mobilgeräte zu verbessern erhält man auch direkt von Google unter:

https://developers.google.com/webmasters/mobile-sites/mobile-seo/

Sehen wir uns jetzt einmal die Schritte an, die zu unternehmen sind, wenn der erste Schritt negativ ausfällt.

Schritt 2: Entscheidung für eine mobile Technologie

Responsive Website

Dies ist die üblichste und meist einfachste Form der mobilen Darstellung einer Website. Hier wird die Darstellung mit unterschiedlichen CSS Regeln angepasst. Die Inhalte sind in allen Varianten gleich. Das heisst es wird die selbe HTML Datei ausgeliefert. Inhalte können jedoch über CSS ausgeblendet oder geändert (z.B. bei Bildern) werden.

Dynamische Bereitstellung

Bei dieser Variante wird vor der Auslieferung der Seite das Gerät abgefragt und dann ein entsprechender Inhalt (HTML und CSS) ausgeliefert. Diese Variante stellt allerdings einen höheren Aufwand dar, da unterschiedliche Versionen für verschiedene Endgeräte erstellt werden müssen. Mit einem CMS kann dies mitunter vereinfacht werden.

Ein typischer Vertreter einer solchen Website Erstellung ist das Tool Adobe Muse. Hier wird für verschiedene Geräte Arten (Desktop, Tablet und Mobile) eine eigene Website erstellt. Verknüpfte Textfelder und Bilder machen zumindest die Wartung etwas einfacher.

Eigene Mobile URL

Im Gegensatz zu der dynamischen Bereitstellung wird hier der mobile Inhalt nicht automatisch auf Grund des Gerätes ausgeliefert sondern durch Aufruf einer eigenen URL. Diese könnte zum Beispiel mobile.domainname.com lauten. Die Vor- und Nachteile entsprechen allerdings der Variante der dynamischen Bereitstellung.

Schritt 3: Beheben der Fehler

Erhält man beim Test einen Fehler, dann bekommt man von Google auch eine Auflistung, was nicht passt. Mit den folgenden Tipps sollte es nicht schwer sein diese auch beheben zu können.

Links liegen zu eng beieinander

Mobile Webseiten werden meistens mit den Fingern und nicht mit der Maus bedient. Daher kann es für den User problematisch sein, wenn die Links oder Buttons zu eng beieinander liegen.

Google empfiehlt, dass Elemente eine Mindestgröße von 48 CSS Pixel haben. Wenn diese kleiner sind, dann sollte der Abstand mindestens 32 CSS Pixel betragen.

Text zu klein

Wie groß Schriften wahrgenommen werden hängt von einigen Faktoren (z.B. auch der Schriftart) ab und kann nicht nur über die Pixelgröße angegeben werden. Generell wird von Google empfohlen eine Basis Font Größe von 16 CSS Pixel zu nehmen. Small Schriften werden mit 0,75% und große Schriften mit 125% dargestellt.

Mobiler Darstellungsbereich nicht festgelegt

Mit dem Darstellungsbereich wird angegeben, wie das mobile Gerät eine Seite rendert. Wird dieser nicht angegeben, so wird die Seite mit der Breite eines Desktop Devices behandelt. Es wird versucht die Seite am mobilen Gerät vollständig darzustellen, was dazu führt dass die Inhalte nur sehr klein wahrnehmbar sind. Der User muss in diesem Fall in die einzelne Bereiche hinein zoomen um mit den Inhalten arbeiten zu können.

Durch eine Viewport Angabe im head Bereich der HTML Datei lässt sich dieses Problem leicht lösen:

name=viewport content="width=device-width, initial-scale=1">

Inhalt weiter als Schirm

Wird wie oben beschrieben eine Viewport Angabe gemacht und die Inhalte passen in der Breite nicht auf den Screen, dann erhält man die Meldung, dass die Inhalte breiter sind als der Schirm. Passt man also den Viewport an, dann muss man natürlich auch dafür sorgen, dass die Inhalte auf dem Gerät genug Platz haben.

Mit diesen Tipps sollte es also gar nicht so schwer die richtigen Massnahmen zu ergreifen um eine Webseite mobile tauglich zu machen und das Google Label „Für Mobilgeräte“ zu erhalten.

[chimpy_form]