Mobile SEO: Die 5 häufigsten Fehlerquellen
(Grafik: Shutterstock)
Es ist eine Tatsache, dass immer mehr Nutzer über mobile Endgeräte im Internet surfen. Nur wer seine Website optimiert, stellt die Zufriedenheit seiner Besucher langfristig sicher. Mit dem weltweiten Rollout des groß angekündigten „Mobile Updates“ am 21. April hat Google dafür gesorgt, dass Webmaster das Thema „Mobile SEO“ auf der Agenda haben.
In diesem Artikel zeigen wir die fünf häufigsten Fehlerquellen bei der mobilen Optimierung.
1. Benutzerfreundlichkeit
Wer gut in den mobilen Suchergebnissen gefunden werden möchte, muss sich den Unterschied zwischen Smartphone und Desktop-PC bewusst machen. Dies sind in erster Linie unterschiedliche Displaygrößen sowie Bedienelemente. Elementare Unterschiede, die für zahlreiche Fehler sorgen können:
| Fehler | Tipp |
|---|---|
| Zu kleiner Text, dadurch schlechte Lesbarkeit auf Mobilgeräten. | Verwende relative Schriftgrößen, die sich an die Bildschirmgröße des Ausgabegeräts anpassen. Für die Skalierung verwendest du am besten CSS. |
| Der mobile Darstellungsbereich ist nicht festgelegt. | Verwende den viewport-Tag, damit die Pixel Deiner Website unabhängig von Ausgabegeräte dargestellt werden. Die Angabe im <head>-Bereich Deiner Seite lautet dann so: <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| Der Inhalt ist breiter als der Bildschirm, Nutzer müssen horizontal scrollen. | Durch die Angabe „device-width“ im viewport-Tag stellst Du sicher, dass Deine Website genau an den Bildschirm des Smartphones angepasst wird. <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| Links oder Icons liegen zu dicht nebeneinander, sie lassen sich deshalb schlecht anklicken. | Damit Besucher eine Schaltfläche mit ihrem Smartphone nutzen können, sollten die Flächen mindestens 7 Millimeter hoch und mindestens 5 Millimeter voneinander entfernt sein. Diese Vorgaben sollte Dein Template berücksichtigen. |
2. Nicht kompatible Inhalte
Es ist frustrierend, wenn Besucher mit ihrem Smartphone erfolglos Videos oder andere Medien starten wollen. Vor allem bei Flash-Inhalten gibt es Wiedergabeprobleme. Google empfiehlt deshalb, Flash auf mobilen Websites zu vermeiden und stattdessen auf HTML5 zu setzen. Wer Videos von YouTube oder anderen Plattformen einbindet, sollte hierfür iFrames nutzen.
3. Fehlerhafte Weiterleitungen
Wichtig ist, dass jede Desktop-URL auf die entsprechende Mobile-URL weiterleitet, wenn ein Nutzer deine Website mit dem Smartphone aufruft. Fehlerhafte Weiterleitungen treten häufig auf, wenn du verschiedene URLs für die Desktop- und Mobile-Version deiner Website verwendest.
Fehlerhafte Weiterleitungen sind einer der häufigsten Fehler bei der mobilen Optimierung. (Grafik: Shutterstock)
Es gibt mehrere Möglichkeiten, die Weiterleitungen deiner Website zu prüfen. Das geht per Smartphone oder über die Entwicklerkonsole deines Browsers. Alternativ liefern dir auch die Google Webmaster Tools auftretende Weiterleitungsfehler.
Im Quellcode solltest du bei einer separaten URL immer anzeigen, dass es auch eine mobile URL gibt. Hierfür verwendest du das „rel=alternate“-Tag. Jede Seite mit mobilem Pendant, muss damit ausgestattet sein. Um Duplicate Content zu vermeiden, solltest du außerdem per Canonical auf die Desktop-Version verweisen.
| Desktop-Seite | Mobile Website (eigene URL) | |
|---|---|---|
| URL | meineseite.de/unterkategorie | mobile.meineseite.de/unterkategorie |
| Im Quellcode | <link rel="alternate" href="http://mobile. meineseite.de/unterkategorie"> | <link rel="canonical" href="http://www. example.com/unterkategorie" > |
Wer falsche Weiterleitungen im Vorfeld vermeiden möchte, kann auf Responsive Webdesign oder Dynamic Serving setzen. In beiden Fällen wird die gleiche URL ausgegeben – unabhängig davon, mit welchem Gerät der Nutzer auf die Website zugreift.
4. Lange Ladezeiten
Trotz LTE steht über mobile Geräte in vielen Gebieten eine geringere Bandbreite zur Verfügung, als beim Surfen mit dem Desktop. Bei der mobilen Optimierung solltest du deshalb auch die Datenmenge deiner Website beachten.
Der erste Schritt zur Optimierung der Ladezeiten ist das Unterbinden unnötiger Downloads. Um zu ermitteln, welche Downloads viel Ladezeit benötigen, kannst du die Entwicklerkonsole deines Browsers oder Tools wie Pingdom nutzen.„Die Datenmenge deiner Website ist ein wichtiger Faktor bei der mobilen Optimierung.“
Im nächsten Schritt kannst du den Quellcode und die Textressourcen komprimieren, beispielsweise, indem du Kommentare im Quellcode löscht. Verwende für die Komprimierung von CSS oder HTML-Code am besten ein entsprechendes Programm, etwa CSS Drive und Clean CSS. Die komprimierte Textbasis lässt sich anschließend mit GZIP verkleinern.
Bilder sind zur Darstellung von Produkten oder zur Veranschaulichung von Artikeln wichtig, lassen sich aber verlustfrei komprimieren. Dies reduziert das notwendige Datenvolumen und die Ladezeit deiner Website. Bei Schriftarten kannst du mithilfe der „@font-face“-Deklaration überflüssige Datenmengen einsparen. Der mobile Browser lädt dann nur die Schriftarten, die tatsächlich benötigt werden.
Eine weitere Möglichkeit bietet das http-Caching, das unnötige Abfragen zwischen Client und Server vermeidet. Eine genaue Beschreibung dieser und weiterer Methoden liefert Google auf developers.google.com.
5. Blockierte Inhalte
Wenn Google auf deine Website zugreift, werden die Inhalte nicht nur indexiert, sondern auch gerendert. Das kann aber nur gelingen, wenn der Bot Zugriff auf alle Ressourcen hat, insbesondere JavaScript, CSS und Bilder. Seitenbetreiber sollten in der robots.txt deshalb keine Einschränkungen hinterlegen, die das Rendering wichtiger Inhalte blockieren.
Um zu testen, wie Google Deine Seite sieht, kannst Du in den Google Webmaster Tools die Funktion „Abruf wie durch Google“ verwenden. Außerdem hast Du die Möglichkeit, mit dem gleichen Tool deine robots.txt-Datei zu überprüfen.
Bleib dran, auch wenn du „fertig“ bist
Suchmaschinenoptimierung ist ein stetiger Prozess. Du solltest deine Website deshalb regelmäßig auf gängige Fehler prüfen, zum Beispiel mit dem kostenlosen Google-Tool.
Hast du Deine Website noch nicht in den Google Webmaster Tools angemeldet, ist es jetzt an der Zeit. Spätestens bei der mobilen Optimierung ist ein dauerhaftes Monitoring wichtig.
Denke daran, dass deine Website letztlich nicht Google, sondern deinen Besuchern gefallen soll. Und die kommen immer häufiger mit dem Smartphone!
Eva Wagner ist Superhero im Online-Marketing-Team von OnPage.org, dem Softwareanbieter von innovativen Tools für bessere Webseiten. Nach Ihrem Studium an der Universität Konstanz arbeitete Sie bereits zwei Jahre im Online-Marketing bei getmobile.
Die schönste Website nützt nichts, wenn sie nicht mobile friendly ist und Kunden sie von unterwegs einfach mit dem Smartphone aufrufen können.
Der vorliegende Artikel beinhaltet ein paar sehr hilfreiche Hinweise, die man beim Aufbau der mobilen Ansicht beherzigen sollte. Auch wenn die eigene Seite für den Moment perfekt erscheint, so sollte bei neuen Inhalten auf die dargelegte Problematik geachtet werden. Denn SEO ist ein kontinuierlicher Prozess, dem tagtäglich Aufmerksamkeit geschenkt werden muss.
In der Tabelle hat sich irgendwie ein Fehler eingeschlichen, weil derselbe Tipp bei mehreren Fehlern angegeben ist. (und für zu nahe stehende Links hilft ja die Viewport-Angabe nicht, sondern man muss mehr Abstände definieren)
Und manche Dinge sind ein bisschen zu unklar/schwammig.
Bei der Schriftgröße heißt es „Für die Skalierung verwendest du am besten CSS.“. Das klingt so, als gäbe es eine Alternative dazu, aber die gibt es ja heute nicht …
Und was bedeutet: „Bei Schriftarten kannst du mithilfe der „@font-face“-Deklaration überflüssige Datenmengen einsparen. Der mobile Browser lädt dann nur die Schriftarten, die tatsächlich benötigt werden.“
@font-face erlaubt die Definition von herunterladbaren Schriften. Wie ist das gemeint, dass man damit überflüssige Datenmengen einsparen soll?
Laut einer aktuellen Studie, besitzen mehr als die hälfte aller Deutschen ein mobiles Endgerät und benutzen es auch fleißig. Siehe hier -> https://www.acid21.com/Blog/Mobile-Commerce-in-Europa-2014-2015-INFOGRAFIK/
Wer es bis jetzt nicht geschafft hat seine Seite zu optimieren, hat das 21. Jahrhundert verschlafen.
Ein schlechter Artikel, weil keine Details enthalten sind.
Uiii!! Links dürfen nicht zu klein sein. Na das ist ja wohl klar. Das weiß jeder, sogar der Nutzer selber.
Über das „WIE“ steht im Artikel kein Satz. Außer die Angabe zum viewport.
„Nur wer seine Website optimiert, stellt die Zufriedenheit seiner Besucher langfristig sicher.“ Faszinierend.
Habe mir auch etwas mehr Mehrwert im Artikel erhofft, aber der Punkt „Schriftgröße nicht zu klein“ ist für mich recht interessant. Denn in der Desktopversion präferiere ich eher kleine Schriftgrößen, dies verträg sich aber nicht mit der mobilen Anzeige, hier ist die Schrift dann zu kein. Gibt es für dieses Problem eine praktikable Lösung?
@Johannes: Das Problem mit den Schriftgrößen kann man gut über Media Queries lösen.
1. Alle Schriften in em angeben.
2. Innerhalb von Media Queries die Schriftgröße von body bei den unterschiedlichen Viewports ändern … damit passt sich automatisch die vorher definierte Schriftgröße an, aber das Verhältnis der Schriften untereinander bleibt gleich.
/* Hier mit irgendwelchen fiktiven Werten */
@media screen and (min-width: 400px) {
body { font-size: 100%;}
}
@media screen and (min-width: 800px) {
body { font-size: 120%;}
}
Noch besser funktioniert rem als Einheit anstelle von em, weil man dann keine Probleme bei Verschachtelungen hat — dann muss man die Bezugsgröße aber bei html setzen. Nachteil von rem: funktioniert erst ab IE9.
Wow, die Frau ist Superhero… hat sie denn auch so ein knackiges Kostüm wie Batgirl oder Wonderwoman?
„Und ob es wirklich richtig geht, siehst du wo du auf Google stehst.“
Sehr guter Leitfaden, gerade mit berücksichtugung auf das Mobile Update von Google.