OnpageDoc Mobile-Friendly-Chech

Google Update "mobile friendly"

Erst Panda und Penguin dann noch das Mobile-Friendly-Update - mit Google wird es nie langweilig. Aber die echten SEO-Profis überrascht dieses Update nicht wirklich, denn die Suchmaschine mit den bunten Buchstaben setzt schon länger immer stärker auf einen neuen Ranking-Faktor: den echten Nutzer. Rein technische Suchmaschinenoptimierung nur für den Crawler ist spätestens seit dem Panda-Update Geschichte. Und auch künstliches Linkbuilding ist schon für viele Webseitenbetreiber zum Problem geworden. Der Grund dafür ist sehr einfach: beide SEO-Maßnahmen waren rein für den Googlebot gedacht - der echte Nutzer spielte hierbei keine Rolle. Aber gerade auf diese kommt es doch an, denn Websites werden nicht für die Maschine, sondern den Menschen gemacht. Mit dem ATF (above the fold) Update hatte Google bereits vor Jahren einen ersten Schritt zu besseren, nutzerorientieren Websites gemacht. Das Mobile-Friendly-Update ist da eigentlich nur die konsequente Fortsetzung. Laut einer Studie vom BVDW (Bundesverband Digitale Wirtschaft) sind über 50 Prozent der Nutzer durch das Smartphone deutlich häufiger im Internet unterwegs und laut Statista nutzen fast 70 Prozent der Deutschen das mobile Internet - Tendenz steigend. Häufig beginnt eine Customer Journey bereits unterwegs mit dem Handy - schnell mal mit dem iPhone im Stau, in der U-Bahn oder in der Wartschlange an der Kasse etwas gegoogelt und dann Zuhause am Rechner intensiver weitergesurft. Was aber, wenn bereits auf dem Smartphone die Website kaum lesbar oder bedienbar ist? Richtig: die Wahrscheinlichkeit, dass ich sie erneut ansteuere, sinkt rapide. Daher sagt sich auch Google: eine Website sollte heute möglichst auch auf mobilen Endgeräten schnell geladen und ordentlich angezeigt werden. Ist das nicht der Fall, dann kann und wird eine gute Platzierung in den Suchergebnissen kaum noch möglich sein.

Ist deine Website für Mobilgeräte optimiert? Mit diesen Tipps bist du perfekt vorbereitet.

Download Checklist

Checkliste Google Mobile-Friendly Update

Checkliste von OnpageDoc zum Mobile-Friendly-Update

Die Checkliste erklärt dir kurz und kompakt alle Tipps und Hinweise zum Mobile-Friendly-Update und gibt dir einen guten Leitfaden zur Optimierung deiner Website ist. Sie enthält dabei noch weitere Tipps und Tricks, die du unbedingt beachten solltest, um nicht von Google abgestraft zu werden, sondern sogar durch das neue Update an Sichtbarkeit und damit auch Traffic auf deiner Seite gewinnen kannst.

Download Checklist

Responsive-Viewer: Teste deine Website auf mobilen Devices

OnpageDoc Responsive Viewer

Du willst schnell und einfach testen, wie deine Website auf verschiedenen Smartphones und Tablets aussieht? Dann ist der Response-Viewer von OnpageDoc genau das richtige Tool für dich. Einfach deine URL eingeben und Endgeräte auswählen. Schon wird simuliert, wie sie die Elemente auf deiner Website auf einem mobilen Endgeräte anordnen.

Responsive Viewer

User Experience als wichtig(st)er Ranking-Faktor

Seitens Google hört man auf Kritik von Webseitenbetreibern immer wieder ein Statement:

"Wir machen keine Suchmaschine für Websites, sondern für Nutzer."

Und dieses Zitat ist schon einige Monate her - also einige Zeit vor der offiziellen Ankündigung des Mobile-Friendly-Updates. Damit wird eines ziemlich deutlich: Google setzt den Fokus weiter auf die Nutzererfahrung und Usability als Ranking-Faktor. Dinge wie die Klickrate (CTR, Click Through Rate) oder Verweildauer sind schon länger ein fester Bestandteil des Algorithmus und haben einen immer größeren Einfluss auf das Google-Ranking. Aber zur User Experience zählt eben auch der visuelle Part - sprich das Design einer Website. Passt sich das Layout nicht an, wenn man beispielsweise mit einem iPhone auf eine bestimmte Website aus den Suchergebnissen klickt, so ist eine erhöhte Abbruchrate und damit eine schlechte User Experience sehr wahrscheinlich. Das Google dies als wichtigen Onpage-SEO-Faktor betrachtet, ist nur zu verständlich und zeitgemäß. Ob ein dargestelltes Foto nun optisch ansprechend, Textinformationen visuell schön dargestellt oder die Farbauswahl an die Zielgruppe der Website angepasst wurde, spielt für Google nur eine indirekte Rolle. Denn wenn der Webdesigner seinen Job nicht gut macht, dann führt das höchstens zu schlechten Klickraten auf der Seite und kann sich damit negativ auf das Google-Ranking auswirken. Vielmehr geht es den Betreibern der Suchmaschine darum, dass das Layout und die Elemente der Website sich an das mobile Endgerät anpassen und damit besser zu betrachten, lesen und klicken/tippen sind.

Neuer Mobile-Index bei Google

Auch Google hat sich seit einiger Zeit auf die Fahnen geschrieben, für Nutzer mobiler Endgeräte besser zu werden. So wird in den Suchergebnissen bereits ein Hinweis direkt unter dem Titel und vor der Meta-Description angezeigt, ob eine Website für mobile Endgeräte optimiert ist oder nicht. Hier geht Google rein von der Art der Darstellung aus, sprich ob die Element auf kleineren Displays optimiert angezeigt werden. Ein erstes Indiz für den Crawler ist dabei der Viewport im HTML-Header, der bereits einen Hinweis auf eine mobile-optimierte Website ist. Noch nicht erfasst ist dabei die Ladezeit, die aber gerade auf Smartphones eine wesentliche Rolle spielt. Laut einem Artikel auf moz.com soll aber bereits ein rein mobiler Index mit einer optischen Markierung "Slow" geplant sein - rein optisch die Seite anzupassen, wird demnach auch in Zukunft nicht mehr reichen. Eine gute Performance und noch schnellere Ladezeiten sind daher gerade für den Mobile-Index von Google von entscheidender Bedeutung. Schon seit langem gibt es bei Google-Pagespeed die Möglichkeit, die Performance von Websites zu testen und auch die Optimierung für mobile Endgeräte zu überprüfen. Eine entscheidende Frage drängt sich bei diesem Thema allerdings auf.

Beeinflusst Googles Mobile-Friendly-Update auch die "normale" Search?

Vielleicht, aber wahrscheinlich. Google lässt sich hier (mal wieder) nicht in die Karten schauen. Wie moz.com berichtet, soll es mittelfristig einen separaten Mobile-Search-Index geben. Das bedeutet, wenn man mit einem Smartphone oder Tablet einen Suchbegriff eingibt, wird ein anderer Index zur Auswertung der Anfrage genommen, als bei einer Desktop-Suchanfrage. Andere Quellen wiederum behaupten, dass das Mobile-Friendly-Update sehr wohl Auswirkungen auf den „normalen“ Suchindex hat und unlogisch ist das nicht. Der Grund: Zwar sind immer mehr Nutzer mit mobilen Endgeräten im Internet und nutzen logischerweise auch die Suchmaschine unterwegs, jedoch sind die gleichen Nutzer auch parallel im Büro oder zu Hause mit ihren stationären Computern oder Notebooks online. Nicht selten setzt man seine Suche am Rechner fort, die man unterwegs begonnen hat oder andersherum. Was sich hier ändert, ist die Customer Journey, also der Weg des Nutzers durch das Netz. Eine Website, die sowohl für große, als auch kleine Bildschirme optimiert ist, dürfte also auch bei Google höher im Kurs stehen. Sich nur darauf zu verlassen, dass man eventuell in einem zukünftigen mobilen Index von Google schlechter dasteht aber seine Rankings in den „normalen“ Suchergebnissen behält, wäre ein zu hohes Wagnis. Vorsorgen statt Nachsehen sollte hier das Motto lauten.

Portrait vs. Landscape - eine echte Herausforderung

Website-Optimierung Mobile Design

Es gibt verschiedene Strategien und Herangehensweisen, um ein Layout für eine Website für alle Endgeräte zu optimieren. Während früher meist ein oder zwei Standard-Bildschirmgrößen und nur wenige mögliche Auflösungen zu beachten waren, ist es heute ein echtes Mammut-Projekt, ein komplexes Webdesign auf allen Bildschirmen schön und nutzerfreundlich darzustellen. Allein die Anzahl an verschiedenen Bildschirmauflösungen ist regelrecht explodiert, da neben den verschiedenen Desktop-Computern auch eine wahre Vielfalt von Notebooks, Netbooks und Ultra-Books entstanden ist. Dann kommen noch die Tablets mit 7, 9, 10, 11 und 12 Zoll (manche sind sogar noch größer) und diverse Smartphones mit Windows Phone, iOS und Android-Betriebssystemen. Während die Desktop-Computer, Notebooks und Tablets eher im 4:3 oder 16:9 Verhältnis - also im Landscape-Modus betrieben werden, so ist der Usecase für Smartphones eher um 45 Grad gedreht - sprich hochkant im Portrait-Modus. Ob eine Website für mobile Endgeräte optimiert wurde, entscheidet sich dann spätestens, wenn man das Handy zur Hand nimmt und darüber eine Seite ansteuert. Komplexe Menüs werden meist zusammengeklappt und komprimiert dargestellt, Bilder und Inhaltselemente skaliert, zusammengeschoben und neu angeordnet sowie "überflüssige" Web-Element gänzlich ausgeblendet. Die Anforderungen an einen Webdesigner, dies alles ansprechend und nutzergerecht umzusetzen, damit man auch unter der Mobile-Friendly Brille von Google gut aussieht, sind enorm gestiegen. Es ist hier ratsam, sich unbedingt professionelle Hilfe / Beratung einzuholen, wenn die eigene Website noch nicht für Smartphones und Tablets optimiert wurde.

Design-Tipps für eine bessere Mobile-Website

Es gibt noch eine Vielzahl weitere layout-technische Dinge zu beachten, aber hier sind schon einmal 5 Top-Tipps für ein optimiertes Webdesign für Smartphones & Co:

  • 1
    Nur Elemente anzeigen, die wirklich essentiell sind (z.B. Hauptmenü-Icon, Produktbilder, Text usw.). Sekundäre Elemente (z.B. komplexer sitewide Footer) sollte man weglassen, bzw. ausblenden.
  • 2
    Mehr Platz lassen: bei mobilen Endgeräte navigiert man mit Fingern und Daumen und braucht daher eine größere Trefferfläche bei Interaktionselementen.
  • 3
    Nicht jedes Bild ist skalierbar - soll heißen: wenn ein Teaser mit Text kleiner skaliert wird (z.B. im Landscape-Modus beim iPhone oder Android Handy), dann sind enthalte Schrift, Icons oder Logos eventuell schwer oder gar nicht mehr lesbar.
  • 4
    Ladezeit beachten! Trotz UMTS und HSDPA dauert das laden von Websites auf Smartphones deutlich länger als auf Desktop-Rechnern. Jede eingesparte Millisekunden kann ein paar Prozent Klickrate mehr bringen, was wiederum zu besseren Platzierungen und den Google Suchergebnissen führen kann.
  • 5
    Mobile-First: bei neuen Websites sollte man von Anfang an das mobile Webdesign denken und zuerst das Layout für Smartphones und Tablets definieren. Was in klein schon gut aussieht, lässt sich auch in groß gut darstellen. Hier ist ein Umdenken auch bei Webdesignern gefragt.

Responsive Design, Fluid Design, Adaptive Design, Mobile Web App - was ist das Beste?

Wenn man es noch komplizierter machen wollte, dann könnte man noch Fixed und Elastic Design mit in die Möglichkeitenliste aufnehmen. Neben der Wep-App gibt es dann noch die nativen Apps und wenn wir schon dabei sind, kann man noch HTML-Scraper und mobile Templates erwähnen. Als Seitenbetreiber hat man dabei die Qual der Wahl und viele stellen sich die Frage: welche Variante ist die Beste, um meine Website "mobile friendly" zu optimieren. Leider gibt es hier keinen Pauschalweg und DIE "optimale" Lösung - es kommt ganz darauf an, worauf man Wert legt und wie das Nutzerverhalten und das Content der Website aussieht. Grundsätzlich aber kann man sagen, dass im Fall der mobilen Endgeräte die Losung lauten sollte: weniger ist mehr! Soll heißen: Nutzer, die mit Smartphones eine Website anschauen, sind noch ungeduldiger als die, die am Rechner sitzen. Warum? Ganz einfach: mit dem Smartphone ist man meist unterwegs im Internet und wird noch leichter und schneller abgelenkt. Lange Ladezeiten (auch wenn es manchmal nur Millisekunden sind) oder schlecht bedienbare Element können schnell die Abbruchrate erhöhen und damit per se zu einem schlechten Ranking führen. Wenn man also über eine Mobile-Optimierung nachdenkt, dann sollte das Reduzieren ganz oben auf der ToDo-Liste stehen. Denn für ein optimales, mobiles Layout braucht man Platz. Während man am Computer mit der Maus präzise navigieren und damit auch kleine Element gut klicken kann, so werden die meisten Websites mit Smartphones eher im Einhand-Modus und mit dem Daumen bedient. Klickbare Flächen sollten also deutlich größer sein und wesentlich mehr Abstand zueinander haben. Apple empfiehlt hier übrigens eine Mindestgröße von 50x50px für Icons, Symbole oder Buttons, hinter denen sich eine Aktion beim Drauftippen verbirgt. Auch Text und Bilder brauchen mehr Abstand und Platz, damit sie leichter auf einem kleinen Display wahrgenommen werden können.Google ist sich hier allerdings noch nicht ganz einig, welche Variante bevorzugt behandelt wird. Fakt ist, dass ein Responsive-Design die beste Möglichkeit ist, um die Inhalte zu crawlen. Fakt ist aber auch, dass mit einer Webapp oder einer separaten mDot (z.B. m.beispiel.de) und mit einem separaten Template eine bessere Performance erreicht werden kann, da hier nicht per se alle Elemente einer Seite mitgeladen und durch Stylesheet-Befehle ausgeblendet werden müssen. Aber egal wie - Fakt bleibt, dass man um eine Mobile-Optimierung nicht mehr herumkommt.

Crawler unterstützt Web-Technologie JS (jQuery) und CSS

HTML5 CSS3 und JavaScript

Immer wieder ein großes Thema in Bezug auf Google und das Crawling der Website sind Technologien, die eine Website dynamisch machen und ein modernes Webdesign ermöglichen. Eine oft verbreitete und beliebte Technologie für die Dynamisierung von Content auf der Website ist AJAX (Asynchronous JavaScript and XML), bei der HTTP(S)-Anfragen verschickt und z.B. Inhalte nachgeladen werden. Was für den Web-Entwickler eine tolle Möglichkeit ist, macht dem Googlebot jedoch Probleme, denn dieser kann derzeit mit AJAX (noch) nicht viel anfangen und das wird sich voraussichtlich auch mit dem Mobile-Friendly-Update nicht viel ändern. Das bedeutet: wenn man über eine Optimierung der Seite für mobile Endgeräte nachdenkt, dann sollte man tunlichst auch den Einsatz von AJAX verzichten, um sich nicht selbst Stolpersteine in den Weg zu legen.

JavaScript und CSS kann eingesetzt werden - Flash aber bitte nicht

AJAX Flash und blockierte Skripte

Aber nicht nur mit AJAX ist es möglich, einen Website dynamisch und schick zu realisieren. Auch wenn kleinere Animationen zum Einsatz kommen sollen, dann sollte man ebenfalls auf Flash verzichten, da dies von den meisten Smartphones und Tablets nicht verarbeitet werden kann und meist auch alles andere als performant ist. Gerade mit CSS3 und HTML5 sind viele Möglichkeiten gegeben, eine Website "in Bewegung" zu versetzen und dabei den Crawler nicht zu behindern. Gerade letzterer Punkt ist und bleibt auch hinsichtlich des Mobile-Friendly-Updates ein wichtiger Aspekt, denn auch wenn der Crawler Skripte und Stylesheets immer besser "lesen" und interpretieren kann, so sollte man unbedingt darauf achten, dass JS und CSS nicht vom Crawling ausgeschlossen und somit als Cloaking gewertet werden kann.

Ist deine Website für Mobilegeräte optimiert? Jetzt testen:

In den Google Webmaster Tools wird seit einiger Zeit ein Hinweis angezeigt, wenn eine dort aufgelistete Website nicht oder nur unzureichend für Mobilgeräte optimiert wurde. Einen Test kann man schon seit einiger Zeit bei Google PageSpeed durchführen, wo auch Tipps hinsichtlich konkreter Optimierungen auf der Seite gegeben werden. Nun hat Google in seinen Developer Tools ein weiteres Feature veröffentlicht, mit dem man einen Testlauf für mobile Endgeräte durchführen kann. Wir haben diese Mobile-Test hier direkt integriert. Gib dazu einfach deine URL ein klicke auf "analysieren" und schon überprüft das Google Tool, ob deine Website ausreichend für Smartphones und Tablets optimiert wurde.