Mobile SEO – Tipps für erfolgreiche mobile Webseiten
Für viele Unternehmer und Marketingverantwortliche war die Optimierung von Webseiten für mobile Endgeräte oft nur ein „Nice-to-Have“. Es fehlte vielfach die tiefere Einsicht in die Notwendigkeit der mobilen Optimierung von Webseiten. Doch spätestens mit Googles Mobile Update im April 2015 hat sich das gewandelt. Seither ist „Mobile Friendliness“ ein offizieller Rankingfaktor für die mobilen Google-Suchergebnisse. Zugleich wurde jedem Webmaster weltweit verdeutlicht, dass die Zukunft des Webs mobile ist. In diesem Artikel zeigen wir nicht nur, wie es dazu gekommen ist, sondern geben außerdem 5 handfeste Tipps für erfolgreiche mobile Webseiten.
Was bedeutet "mobile friendly"?
Als „mobile friendly“ können Webseiten bezeichnet werden, deren Bedienung auch mit dem Smartphone ohne Einschränkungen möglich ist. Allgemein könnte man „Mobile Friendliness“ frei mit „Eignung für mobile Endgeräte“ übersetzen.
Anhand folgender Aspekte lässt sich bestimmen, ob eine Website mobilgerätfreundlich ist:
- Texte lassen sich ohne Zoomen lesen.
- Der Content ist so an den Bildschirm angepasst, dass User nicht horizontal scrollen oder zoomen müssen.
- Klickbare Elemente sind so platziert, dass sie leicht gedrückt werden können.
- Der Einsatz von Software, die nur mit wenigen Smartphones kompatibel ist, wird vermieden (wie z. B. Adobe Flash).
Zusammengefasst bietet eine als „mobile friendly“ klassifizierte Webseite eine erwartbar hohe Usability für Smartphones oder Tablets.
Warum ist mobile SEO wichtig?
Weltweit gehen immer mehr Menschen mit dem Smartphone online. Laut einer Erhebung sind mehr als 31 Prozent des gesamten Web-Traffics weltweit mobil. Allein in Deutschland verwendeten 2014 knapp 70 Prozent der User ihr Smartphone, um damit im Internet zu surfen. Je nach Suchintention liegen die Prozentzahlen der mobilen Nutzung teilweise sogar über 50 Prozent. Googles Aussagen zufolge werden in 10 Ländern weltweit inkl. der USA und Japan mehr Suchanfragen mobil gestellt als mit dem Desktop.
Das Google Mobile Update
Google hat Webmaster seit 2012 konsequent auf den Bedarf an mobil optimierten Webseiten hingewiesen und sukzessive auf die Optimierung vorbereitet. So gab es in der Google Search Console eine neue Rubrik, welche die Eignung für Mobilgeräte analysiert. Außerdem können Webseiten direkt an den mobilen Google-Index geschickt werden. In den mobilen Suchergebnissen erhalten User schon seit 2014 den Hinweis „für Mobilgeräte“, der zeigt, ob die Zielseite des Search-Snippets für Smartphones geeignet ist. Schließlich hat Google am 21. April 2015 ein Update im Suchalgorithmus eingeführt, das die Eignung einer Webseite für Mobilgeräte fortan zum Rankingfaktor macht. Das Besondere an diesem Update war, dass Google der Webgemeinde, anders als bei Penguin oder Panda, etwas konkretere Handlungsempfehlungen für die Verbesserung der eigenen Webseite gegeben hat und immer noch gibt. So können Webmaster unter folgendem Link kostenlos testen, ob die Seite ausreichend für Mobilgeräte optimiert ist: https://www.google.de/webmasters/tools/mobile-friendly/
Erste Auswirkungen des Google Mobile Updates
Sicherlich gehörte Googles Mobile Update zu den am medienwirksamsten Algorithmus-Änderungen des Suchmaschinenkonzerns. Sogar Leitmedien wie die Tagesschau oder Spiegel Online berichteten darüber. Innerhalb der SEO-Branche wurde dem Mobile Update sogar vielfach eine größere Wirkung zugesprochen als den einschneidenden Updates Penguin und Panda. Tatsächlich scheinen insgesamt die Auswirkungen in den mobilen SERPs nach dem 21. April 2015 kaum spürbar gewesen zu sein. Barry Schwartz von searchengineland.com fragte sich sogar in einem Beitrag „Was it really Mobilegeddon?“ Allerdings hatten andere Medien wie die Internet World Business über höhere Sichtbarkeitsverluste von beliebten Lebensmittel-Onlineshops wie Edeka oder Gourmondo berichtet. Die doch eher moderaten Auswirkungen des Mobile Updates beruhen vermutlich auf folgenden Tatsachen:
- Auch wenn „mobile friendly“ nun seit dem 21. April 2015 ein Rankingkriterium ist, bezieht es sich lt. Google vorrangig auf den mobilen Suchindex von Google und es sind lediglich Suchanfragen mit dem Smartphone betroffen. Dadurch unterscheidet sich das Mobile Update fundamental von Penguin und Panda, die sich global auf alle Suchanfragen ausgewirkt hatten.
- Viele Webseiten sind schon vor dem Update für Mobilgeräte optimiert worden. Deshalb sind die Schwankungen in den SERPs geringer als erwartet.
- Das Google Update wirkt sich nicht auf die gesamte Webseite aus, sondern betrifft jede einzelne Unterseite separat. So können auch Webseiten gute Rankings erzielen, die nur teilweise für Mobilgeräte optimiert sind.
- Bis auf Weiteres können laut Googles Aussagen auch Webseiten gut in den mobilen SERPs ranken, die nicht mobil optimiert wurden, wenn deren Relevanz zur Suchanfrage sehr hoch ist und es keine besseren Konkurrenzseiten gibt, die für Mobilgeräte geeignet sind.
- Google hatte schon vor dem Update genügend Daten zu Nutzersignalen wie Bounce Rate oder CTR gesammelt, um die Relevanz und die Eignung einer Website zu einer mobilen Suchanfrage zu bewerten, sodass der Rankingfaktor „mobile friendly“ oftmals eine geringere Rolle spielt als erwartet.
Noch wichtiger als die Auswirkung auf die Rankings war die Wirkung des Updates auf Webmaster in der ganzen Welt. Google hat mit dem Update beabsichtigt, dass mehr Seiten mobil optimiert werden. Dieses Ziel hat Google bis dato deutlich erreicht. Wer bis jetzt noch nicht gehandelt hat, kann seine Webseite mit den folgenden Tipps für die mobile Nutzung optimieren.
Tipps für die mobile Optimierung
Die Optimierung für mobile Ausgabegeräte setzt an verschiedenen Bereichen der Website an. Hier folgen fünf Empfehlungen für die mobile Optimierung, die sich sowohl auf die technischen Voraussetzungen, als auch auf die Inhalte, sowie die spätere Kontrolle der Webseite beziehen.
1. Gewünschte Seitenversion optimieren
Wer seine Webinhalte leichter für mobile Endgeräte zugänglich machen möchte, hat grundsätzlich die Wahl, nur eine URL oder zusätzlich eine separate, mobile URL für den Abruf des mobil optimierten Contents bereitzustellen. Auf dieser Basis können drei verschiedene Konfigurationen für mobil optimierte Webseiten ausgewählt werden.
- Responsive Webdesign: In diesem Fall sind die mobile als auch die Desktopversion unter einer URL erreichbar. Im Quellcode steuert die entsprechende CSS-Datei die Darstellung für unterschiedliche Displaygrößen der Ausgabegeräte.
- Dynamic Serving: Hier wird ebenfalls nur eine URL für zwei Versionen verwendet. Allerdings richtet der Server den HTML-Code auf den jeweiligen User-Agent aus, der auf die Webseite zugreift.
- Separate mobile URL: Die mobil optimierte Webseite ist über eigene URLs erreichbar. Häufig entspricht dabei eine Desktopunterseite genau einer mobilen URL. Beispiel: Desktopversion meineseite.de, mobile Version: mobil. meineseite.de
2. Alle Inhalte für den Googlebot zugänglich machen
Die wichtigste Voraussetzung für gute Rankings besteht darin, dass die mobile Webseite vom Googlebot auch vollständig gecrawlt und indiziert werden kann. Webmaster können dem Googlebot mit Hilfe der robots.txt-Datei Anweisungen zum Crawlen der Seite geben. Diese Hinweise dürfen nicht dazu führen, dass wichtige Inhalte blockiert werden. Denn in Folge von blockierten Inhalten können CSS- und JavaScript-Dateien häufig nicht korrekt interpretiert werden. Ebenso sollten alle Bilder crawlbar und somit indizierbar sein. Durch ein umfassendes Crawling erhält der Googlebot schon Hinweise darauf, ob die Webseite für Mobilgeräte geeignet sein könnte.
3. Metadaten und Header mobil ausrichten
Je nachdem, für welche mobile Grundausrichtung sich ein Webmaster entscheidet, müssen bestimmte Anpassungen der Metadaten und/oder http-Header vorgenommen werden.
- Viewport-Metatag bei Responsive Design:
Websites, die im Responsive Webdesign für Mobilgeräte optimiert werden, sollten das Viewport-Meta-Tag enthalten. Darüber erhält der Browser einen Hinweis dazu, wie der Inhalt der Website angepasst werden kann. Folgender Tag wird bei Webseiten mit Responsive Webdesign in der Regel verwendet:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Über den Parameter width=device-width wird definiert, dass sich der Inhalt an die Display-Breite des Ausgabegeräts anpasst. Der Parameter initial-scale=1.0 sorgt dafür, dass die Pixelgrößen unabhängig vom Ausgabebildschirm im Verhältnis 1 zu 1 übernommen werden. So wird eine Grafik mit 500 Pixeln auch auf einem kleinen Smartphonebildschirm mit 500 Pixeln dargestellt.
- Vary Response Header bei Dynamic Serving
Um sicherzustellen, dass ein Smartphoneuser auch eine für Mobilgeräte optimierte Version der Webseite angezeigt bekommt, wird bei Dynamic Serving der Vary Response Header verwendet. Durch einen Zusatz im http-Header wird verhindert, dass der Browser die Seite aus dem Service-Cash des Servers lädt und stattdessen die für den User-Agent optimierte Version verwendet.
Content-Type: text/html
Vary: User-Agent
- rel=alternate für separate mobile Webseiten
Wer sich für eine separate mobile URL entscheidet, muss dem Googlebot im Quellcode der Desktopversion einen Hinweis darauf geben. Mit Hilfe des Meta-Elements rel=alternate wird dieser Hinweis mitgeteilt. Um Duplicate Content zu vermeiden, sollte auf der mobilen Version ein Canonical-Tag auf die Desktop-URL verweisen. In der Praxis kann das so aussehen:
Wichtig wäre hier auch, dass auf die separate, mobile URL in der XML-Sitemap verwiesen wird. Ein Eintrag für die o.g. Seite in der Sitemap würde dann so aussehen:
4. Formulare, Bilder und Texte anpassen Die Tatsache, dass bei Smartphones nur ein kleineres Display zur Verfügung steht, müssen Webdesigner und Programmierer berücksichtigen, wenn Formulare, Bilder oder Texte für mobile Endgeräte optimiert werden. Da die Eingaben bei Smartphones über den Touchscreen erfolgen, müssen Webdesigner bei der Konzeption mobiler Webseiten darauf achten, dass z. B. die Touchelemente nicht zu dicht zusammen liegen. Um eine möglichst gute Bedienung zu garantieren, sollte der Abstand zwischen den Elementen groß genug sein, damit der User einwandfrei die entsprechenden Flächen anklicken kann. Auch die Höhe soll dabei berücksichtigt werden. Beim Erstellen von Formularen sollten Webmaster darauf achten, dass diese problemlos mit dem Smartphone bedient werden können. Hier empfiehlt es sich, ähnlich wie bei Grafiken oder Texten, die Größen relativ anzugeben, damit sich die Eingabefelder direkt an die Displaygröße anpassen können und der User nicht scrollen muss. Bei der Auswahl der Schriftgröße empfiehlt Google eine gut lesbare Größe zu wählen. Darüber hinaus sollten so wenig unterschiedliche Schriftarten wie möglich verwendet werden, damit für den User ein einheitlicher und dadurch gut lesbarer Content entsteht. Ist die Basisschriftgröße über eine CSS-Klasse definiert, wie z. B.
können weitere Schriftgrößen in Relation zur Basis über CSS definiert werden.
5. Testen, prüfen und regelmäßig kontrollieren
Wenn die vorausgegangen Tipps befolgt wurden, sollten Webseitenbetreiber ihre Seite und die getroffenen Maßnahmen regelmäßig kontrollieren. Wichtige Kennzahlen wie die Bounce Rate, die Verweildauer sowie die CTR sollten dabei stets im Auge behalten werden. Treten hier deutliche Schwankungen oder Verschlechterungen auf, kann der Grund u. a. im Webdesign, in fehlerhaften Weiterleitungen oder auch in der Ladegeschwindigkeit der Seite liegen. Eine Verschlechterung von Nutzersignalen und der Seitengeschwindigkeit kann rankingrelevante Auswirkungen haben.
Wichtige Daten zur Leistung der Webseite liefert die kostenlose Google Search Console sowie Google Analytics. Darüber hinaus kann das ebenfalls kostenlose Google-Tool PageSpeed bei der Optimierung der Ladegeschwindigkeit weiterhelfen.
Fazit
Mobile Optimierung ist heute keine Kür mehr, sondern Pflicht für jeden Webseitenbetreiber. Wer jedoch die Standards berücksichtigt, hat die besten Grundlagen dafür geschaffen, dass seine Webseite auch in Zukunft die Erwartungen der mobilen User optimal erfüllt. Denn für den Erfolg einer mobil optimierten Webseite spielt letztendlich auch das User-Verhalten eine wichtige Rolle.
Autorin
Eva Wagner ist Teil des Onlinemarketing Teams von Onpage.org, dem Softwareanbieter von innovativen Tools für bessere Webseiten. Nach ihrem Studium der Literatur-, Kunst- und Medienwissenschaften an der Universität Konstanz arbeitete sie bereits zwei Jahre im Onlinemarketing bei der getmobile GmbH.
![eStrategy Magazin letzte Ausgabe](/fileadmin/_processed_/3/0/csm_Cover-eStrategy-03-2023_b018c0dffb.jpg")
