Mobile SEO :10 wichtige Faktoren für bessere mobile Websites

Die Mobile SEO Optimierung von Websites bzw. die Nutzung mobiler Seiten überhaupt wird leider nach wie vor von vielen Seitenbetreibern vernachlässigt. Wirklich solide optimierte Seiten, wie sie z. B. im Bild links zu sehen sind, gibt es bislang nur wenige. Aber gerade für Onlineshops und lokal ausgerichtete Seiten sind gut optimierte mobile Seiten aufgrund der ständig steigenden Mobile-Nutzung elementar wichtig. Laut Untersuchungen werden in den USA 94 Prozent aller Suchanfragen mit lokalem Bezug per Smartphone getätigt. Ca. 77 Prozent der mobilen Suchanfragen werden von Orten ausgeführt, an denen auch ein Desktop-PC zur Verfügung steht. Dennoch wird mobil gesucht…

Zuletzt hat Google sogar eine Art “Prädikat” innerhalb der mobilen Suche eingeführt, mit Hilfe dessen die User erkennen können, ob eine Seite “für Mobilgeräte” geeignet ist oder nicht.

Mobile SEO: 10 wichtige Faktoren

Dabei wird vor der Description der Hinweis “Für Mobilgeräte” eingefügt. Auch in PageSpeed Insights, Googles hausgemachten Speed-Analyse Tool, wird ein entsprechende Hinweis gegeben. Ebenfalls recht neu ist Googles Mobile-Friendly Test, mithilfe dessen man die eigene Seite schnell Mobile-Tauglichkeit prüfen kann.

Nun gibt es auch von Googles Seite einen ganzen Haufen Vorschläge, wie man eine Seite mobil optimieren soll. Dabei verliert man schnell den Überblick. Nachfolgend daher unsere Checkliste, wie man am besten anfängt, die eigene Website Mobile-tauglich zu machen und eine gute Nutzererfahrung zu schaffen.

Entscheidung für eine Konfigurations-Variante

Es gibt grundsätzlich drei verschiedene Konfigurationsmöglichkeiten, über die Suchmaschinen eine mobile Version Ihrer Seiten finden bzw. darstellen können. Die von Google empfohlene Variante ist Responsive Webdesign, da sich hier weder URL noch HTML-Code ändern. Die Inhalte der Seiten werden lediglich auf die Größe des zugreifenden Mobilgerätes skaliert. Der große Vorteil dieser Variante ist, dass das Design immer gleich bleibt und man dadurch eine gewisse Konsistenz erreicht.

Die zweite Variante nennt sich dynamische Geräteerkennung, bei welcher zwar die URL gleich bleibt, aber der HTML-Code geändert wird. Allgemein ist diese Art der Konfiguration sehr fehleranfällig, da z. B. die Listen der User-Agents steht aktualisiert werden müssen (etwa bei neuen Smartphones) oder die User-Agents nicht immer richtig erkannt werden (z. B. werden dann einem Desktop-User mobile Inhalte angezeigt oder andersrum). Daher sollte diese Methode nur bei sehr sorgfältiger Pflege verwendet werden.

Die dritte und letzte Variante ist die Erstellung einer komplett eigenen Mobile-Seite, bei der dem User Inhalte statt über www.beispieldomain.de z. B. über m.beispieldomain.de angeboten werden. Die Desktop-Seiten bleiben davon unbeeinflusst. Ruft ein User über Smartphone die Desktop-Seite auf, wird er auf die entsprechende mobile Seite umgeleitet, sofern auf der Desktop-Seite ein rel=”alternate” auf die mobile Seite gesetzt wurde.

Es ist auch möglich, mehrere der oben genannten Varianten auf derselben Domain zu verwenden. Wir empfehlen allerdings, sich auf eine Variante zu beschränken. Die nachfolgenden 10 Tipps basieren vorrangig auf der Variante “Responsive Design”.

Darstellungsbereich konfigurieren

Damit die Seiten-Breite auf Mobilgeräten nicht mit Desktop-Bildschirmbreite angezeigt wird, muss ein Darstellungsbereich konfiguriert werden. Damit kann die Seitenbreite an die jeweilige Gerätebreite angepasst werden. Ansonsten müsste der User nach rechts und links “wischen” um die gesamte Seite betrachten zu können.

Hierzu müssen folgende Angaben im Head des Quellcodes der jeweiligen Webseite eingefügt werden:

<meta name=viewport content=”width=device-width, initial-scale=1″>

Durch die Angabe width=device-width wird der Inhalt jeweils an die Gerätebreite angepasst, so dass der Inhalt gut lesbar ist. Die Angabe initial-scale=1 sorgt dafür, dass die Seitenbreite des Gerätes beim drehen des Bildschirms angepasst wird. Ohne diese Angabe wird in einigen mobilen Browsern die Seitenbreite konstant gehalten und herein gezoomt, anstatt die gesamte Breite des Bildschirms zu nutzen.

Lesbare Schriftgröße verwenden

Nachdem ein Darstellungsbereich wie unter Punkt 2 beschrieben festgelegt wurde, sollte zusätzlich auch noch die Schriftgröße entsprechend konfiguriert werden. Ansonsten kann es vorkommen, das die trotz des definierten Darstellungsbereiches die Buchstaben zu klein dargestellt werden und die Texte für den User nur schwer lesbar sind.

Google empfiehlt, eine Basisschriftgröße (in CSS definiert) von 16 CSS-Pixeln zu verwenden. Die CSS-Klasse würde in diesem Fall folgendermaßen aussehen:

body {
font-size: 16px;
}

Je nach Schriftart kann die Größe dann relativ zur Basisgröße angepasst werden, was wiederum über CSS-Klassen definiert wird. Soll die Schriftart z. B. kleiner als die Basisgröße sein, kann folgende CSS-Klasse definiert werden:

.small {
font-size: 12px; /* 75% of the baseline */
}

Allerdings ist es empfehlenswert, nicht zu viele Schriftarten und Schriftgrößen auf einer Seite zu verwenden. Man sollte sich hier möglichst auf eine oder zumindest einige wenige beschränken, damit das Seitenlayout gerade für die mobile Darstellung nicht zu komplex wird.

 Größe von Buttons und Links bei Mobile SEO

Besonders nervig für den User ist es, wenn Links und Schaltflächen (Buttons) auf dem Smartphone zu klein dargestellt werden oder zu eng beieinander liegen. Es sollte hier möglich sein, jeden Link bzw. jeden Button ohne Probleme und ohne zusätzliche Hilfen (wie etwas Zoomen etc.) anzutippen.

Hierbei gilt es einige Faktoren zu beachten:

• Die Fingerspitzen eines Erwachsenen sind durchschnittlich 10 mm breit. Dementsprechend sollten auch Schaltflächen und Links angepasst werden (mind. 7mm breit)
• Vor allem häufig benutzte Links und Buttons sollten groß genug sein. Bei Onlineshops sind diese z. B. auch “Bestellen” oder “In den Warenkorb” Buttons. Aber auch Menüs sollten entsprechend große Abstände und Link-Größen haben, damit man hier gezielt den gewünschten Menü-Punkt antippen kann, ohne versehentlich noch einen anderen zu berühren.
• Selten verwendete Links & Buttons können dagegen kleiner dargestellt werden, sollten aber auch jeweils genug Abstand zum nächsten klickbaren Inhalt haben (Abstände von mind. 5mm / 32 CSS-Pixeln).

Bei Interesses sollte man sich auch mal die Richtlinien für Android-Benutzeroberflächen ansehen.

Suchfunktion zentral einbinden

Elementar wichtig, allen voran für Onlineshops, ist eine zentrale, große und auffällige Suchfunktion (nicht nur bei Mobile-Optimierung wichtig). Viele User wollen sich nicht durch lange Menüs klicken, ganz besonders nicht bei der mobilen Suche. Oder suchen Sie auf der Amazon (wir sind übrigens auch eine Amazon SEO Agentur) Mobile-Seite über das Menü? Die allermeisten User verwenden hier die Suchfunktion.

Daher sollte ein großer Suchschlitz das erste sein, was einem Mobile-User beim Besuch einer solchen Website ins Auge sticht. Aufgrund des Platzmangels auf mobilen Bildschirmen sollte hier am besten als “Bestätigungs-Button” der Suche eine Lupe oder platziert werden. Möglich wäre z. B. auch ein “Go”, aber das Wort “Suche” ist eigentlich schon wieder zu lang.

Neben einem auffälligen Suchschlitz sollte ganz nach dem großen Vorbild Google Auto-Suggest Vorschläge bereits bei Eingabe der ersten Buchstaben aufpoppen. Das schreiben auf einer Smartphone Tatstatur ist eben nicht so komfortabel wie auf einer “großen” Tastatur, daher sollte man dem User möglichst viel Zeit und Aufwand ersparen.

Link zur Desktop-Version

Eine weiterer sehr wichtiger Punkt ist gleichzeitig auch ein ganz simpler. Jede Mobile-Seite sollte immer (!) einen Link auf die Desktop-Version bieten. Ich persönlich gehöre auch zu den Leuten, die manchmal lieber auf der Desktop-Version surfen als auf der mobilen Seite.

Oftmals ist dies z. B. bei Usern der Fall, die eine Seite bereits als Desktop-Variante kennen und einen bestimmten Inhalt wieder finden möchten. Da die mobile Seite natürlich nur begrenzten Umfang hat, werden oftmals nicht dieselben Inhalte angezeigt – daher also der Switch zur Desktop-Seite. Verärgern Sie die User nicht, indem Sie Ihnen einen solchen Link vorenthalten. Der entsprechende Link kann getrost im unteren Bereich der Seite eingebunden werden, sollte aber schnell zu finden sein.

PageSpeed optimieren ist bei Mobile SEO unverzichtbar

Im Mobile SEO ist das Thema PageSpeed besonders relevant. Da Funknetze naturgemäß nicht immer in highspeed Daten aufs Smartphone liefern und je nach Netz bzw. Vertrag die Geschwindigkeit variieren kann, sollten schnelle Mobile-Seiten selbstverständlich sein. Wichtig sind hier vor allem folgende Faktoren:

• Kleine Bilder durch korrekte Formatierung und Komprimierung
• Auf mobilen Seiten möglichst wenige Bilder verwenden
• Auf das Rendering der Seite blockierende Elemente verzichten, alternativ asynchron laden oder ggf. direkt inline im HTML Code laden.
• Weiterleitungen vermeiden – jede Weiterleitung benötigt zusätzliche Requests, was den PageSpeed jeweils reduziert
• Möglichst wenig JacaScript verwenden
• Browser-Caching aktivieren
• Komprimierung aktivieren
• Wichtige Seiteninhalte “above the fold” als erstes laden lassen
• Größe von HTML- und CSS Code so gering wie möglich halten
• Server sollte innerhalb von max. 200 ms antworten

Zusätzlich hilft hier wiederum auch das gute Google-Tool PageSpeed Insights.

Unter dem Reiter “Mobil” werden neben Vorschlägen zur Verbesserung der Nutzererfahrung auch reichlich Tipps und konkrete Hinweise zur Optimierung des PageSpeed gegeben.

Unterhalb der jeweiligen Optimierungsmaßnahmen findet man konkrete Hinweise zu Dateien (z. B. Bilder), die optimiert werden sollten. Gleichzeitig gibt es Links zu informativen Google-Webseiten, auf welchen man sämtliche Details zu den Maßnahmen findet.

Häufige Fehler vermeiden

Bei der Gestaltung von mobilen Websites kommt es aufgrund von Unachtsamkeiten oftmals zu Fehlern, die am besten von Anfang an vermieden werden sollten. Besonders achtsam bei mobile SEO sollte man mit folgenden Problematiken umgehen:

• Zugriff des Googlebot Mobile auf die gesamte Website gewähren.
• Nicht abrufbare Inhalte vermeiden. Besonders betrifft dies Flash-Inhalte, da diese von vielen mobilen Geräten nicht unterstützt werden. Optimalerweise sollte hier der HTML5 Standard anstatt “externer” Formate verwendet werden.
• Bei Verwendung separater mobiler URLs (z. B. mit m.agf.de) sollte richtig weitergeleitet werden. Wenn z. B. ein Pendant einer Seite auch für die mobile Version existiert, sollte auch auf diese URL und nicht z. B. die Startseite weitergeleitet werden.
• Auf nervige Popups sollte verzichtet werden. Oftmals wird der User durch Werbung etc. blockiert und kann nicht mehr auf der Seite navigieren. Dies ist bereits auf Desktop-Seiten unglaublich nervig, auf Mobile-Seiten um so mehr. Gleiches gilt, wenn parallel noch eine App beworben wird. Die App an sich darf beworben werden, aber lassen Sie dem User auch die Möglichkeit die mobile Seite zu nutzen (daher keine Bildschirm-Großen Popups marke “wir haben auch eine App”).

 Google Search Console regelmäßig überprüfen

Die Google Search Console ist ein wertvolles Tool zur Überwachung der eigenen Seite. Gerade auch in Bezug auf mobile Websites sollte man hier regelmäßig einen Blick reinwerfen. Unter dem Punkt “Crawling-Fehler” gibt es einen eigenen Punkt “Smartphone”. Die dort aufgeführten Fehler sollten stest behoben werden, um eine funktionierende Mobile Seite zu gewährleisten.

Seit einiger Zeit existiert unter dem Menüpunkt “Suchanfragen” auch der Punkt “Benutzerfreundlichkeit auf Mobilgeräten”. Dort werden von Google Fehler wie “fehlender Darstellungsbereich”, “Kleine Schriftgröße” usw. aufgeführt – eben alle elementaren Faktoren, die eine gute Nutzererfahrung verhindern. Daher sollte auch dieser Punkt regelmäßig gesichtet werden.

10. Mobil SEO Optimierung für Tablets

Eine Optimierung speziell für Tablets gestaltet sich schwierig, da die Größe der Tablet-Bildschirme meist sogar für die Darstellung der Desktop-Version geeignet sind. Durch diese “Zwischengröße” von Tablets macht es noch mehr Sinn, Responsive Webdesign zu verwenden. Wenn alles richtig konfiguriert wurde, passen sich die Inhalte stets den verschiedenen Größen an, sodass die Seiten dem User immer optimal angezeigt werden.

Falls statt Responsive Design die Konfigurations-Variante mit “gerätespezifischen Inhalten” verwendet wird, sollte für Tablets eher die Desktop-Version statt einer mobilen Ansicht ausgeliefert werden.

Mobile SEO Optimierung ist eineeigene Disziplin

Wichtig während bzw. nach einer Mobile SEO Optimierung ist vor allem auch der Test auf verschiedenen Geräten, also möglichst vielen Smartphones und Tablets.

Die genannten zehn Punkte betreffen nur einige der wichtigsten Faktoren beim Thema Mobile-Optimierung. Diese Disziplin ist also bei weitem nicht so einfach, wie es möglicherweise anfangs scheint und nimmt einige Zeit und Arbeit in Anspruch. Am Ende werden Sie aber durch zufriedene User und hoffentlich höhere Umsätze belohnt.

Wenn Sie Website Betreiber sind und sich detailliert mit der Mobile Optimierung beschäftigen möchten, sei Ihnen auch der Mobile Guide von Google ans Herz gelegt. Hier finden Sie Schritt für Schritt alle wichtigen Infos zur Mobile-Optimierung Ihrer Website.

Wir helfen Ihnen gerne bei der Optimierung Ihrer Website: Unsere Agentur ist erfahren im Mobile SEO und hilft Ihnen gerne dabei, ihre Webseite optimal für Mobilgeräte auszurichten!

✔ Mehr Traffic ✔ mehr Kunden ✔ Mehr Umsatz 👉 kostenlose SEO Ersteinschätzung