Mobile First und Google: Ranking-Faktor seit dem Mobile-First-Index
Hier wird es besonders interessant, denn seit 2018 verwendet Google die Mobile-First-Indexierung. Seitdem ist folgende Sache klar bekannt: Deine mobile Version ist das, was zählt. Nicht die schön breite Desktopversion, die du im Büro am großen Monitor bewundern kannst.
Was bedeutet Mobile-First-Indexierung?
Google nutzt primär die mobile Version deiner Website, um sie zu bewerten und in den Index aufzunehmen. Seit 2021 ist das der Standard für alle neuen Websites. Die Desktop-Version spielt also nur noch eine untergeordnete Rolle.
Das hat massive Konsequenzen, denn wenn deine mobile Seite langsam ist, wichtige Inhalte fehlen oder die Navigation nicht funktioniert, dann bringt dir auch die beste Desktop-Seite nichts mehr. Google bewertet die gesamte Website dann deutlich schlechter – komplett abhängig von deiner mobilen Seite.
Klassische Probleme für schlechte Rankings:
Fassen wir mal die bekanntesten Probleme für schlechtere Google-Scores kurz zusammen:
- Verschobene Inhalte während des Ladens
- Unlesbare Schrift, die Zoomen erfordert
- Verdeckter Text durch Pop-ups oder schlecht skalierte Elemente
- Zu kleine Klickflächen, die ständig zum Fehltippen führen
- Horizontales Scrollen, weil die Seite nicht ins Browserfenster passt
Das sind erstmal die wichtigsten Faktoren, die du beachten solltest. Google misst hier immer konkrete Werte, und verfehlst du diese Werte auf dem Smartphone, kann dein Ranking sehr schnell absinken. Keine Angst, wir schauen uns die Faktoren gleich nochmal genauer an.
Kleines Fallbeispiel:
Ein Elektriker in München hat eine aufwendige Desktop-Seite mit Flash-Animationen und großen Bildern. Auf dem Smartphone: Chaos. Das Menü funktioniert nicht, die Telefonnummer ist versteckt. Sein Konkurrent zwei Straßen weiter hat eine schlichte, aber schnelle mobile Seite mit Click-to-Call-Button ganz oben. So rankt der Konkurrent trotz des simpleren Webdesigns deutlich besser als er.
Mobile First in der Praxis: Mein Leitfaden vom Konzept zur fertigen Seite
Kommen wir zum Wichtigsten Teil: Wie überprüfe und behebe ich mögliche Fehler auf meiner Website, um diese mobile-freundlicher zu machen? Hier habe ich dir mal einen kleinen Leitfaden aufgebaut, der dir Unterstützung bei der Gestaltung deines Projektes bieten soll – so unkompliziert wie möglich.
Schritt 1: Analyse des Status quo
Bevor du gleich loslegst empfehle ich dir erst einmal auf folgende Daten zu schauen und dir ein paar Gedanken zu machen:
- Wie viel Prozent deines Traffics kommt mobil? (Findest du bei Google Analytics)
- Welche Endgeräte nutzen deine Besucher? (Smartphones, Tablets, iOS vs. Android, …)
- Welche Seiten werden mobil am häufigsten besucht?
- Wo springen Nutzer ab? (Schau auf deine Session Recordings)
Schritt 2: Content First – Inhalte priorisieren
Was kommt wo hin? Ich würde erst einmal ganz einfach nach folgender Devise vorgehen:
- Must-haves: Kontakt, Kernleistungen, wichtigste Produkte, CTAs
- Nice-to-haves: Ausführlichere Texte, Hintergrundinfos, Galerien
- Weg damit: Alles, was nur Platz füllt ohne Mehrwert
Schritt 3: Wireframes für Smartphone-Ansicht
Skizziere dir doch erstmal die wichtigsten Seiten (Startseite, Produktseite, Kontaktseite) für die Smartphone-Ansicht:
- Welche Elemente kommen in welcher Reihenfolge und Ausrichtung?
- Wo sitzen die CTAs?
- Wie sieht der Aufbau der Navigation aus?
Farben und Icons sind hier noch egal. Es geht hier erstmal rein um Struktur und Funktionalität.
Schritt 4: Design – Mobile-Version zuerst finalisieren
Erst wenn dein „Mobile-Design“ steht, leitest du dir daraus die Variante für Tablets und Desktops ab. Typische Breakpoints sind dann folgende:
- ca. 576px (große Smartphones)
- ca. 768px (tablet)
- ca. 1024px (kleine Laptops, Desktop)
Schritt 5: Umsetzung mit Mobile-Basis-CSS
In der Webentwicklung bedeutet das: Der Html Code und die Basis-Styles sind für mobile Ansichten optimiert. Erweiterungen für größere Viewports kommen per Media Queries hinzu. So vermeidest du, dass du eine aufgeblähte Desktop-Seite nachträglich abspecken musst.
Schritt 6: Testing auf echten Geräten
Chrome DevTools sind gut, aber echte Geräte sind nochmal deutlich besser:
- Teste sowohl auf iOS als auch auf Android
- Verschiedene Bildschirmgröße
- Teste bei Sonnenlicht (Lesbarkeit)
- Teste mit einer Hand (Erreichbarkeit)
Schritt 7: Iterative Optimierung nach Launch
Nach dem Launch geht die Arbeit weiter. Beobachte auf jeden Fall stetig folgendes:
- Mobile Absprung- und Conversion-Rate
- Scrolltiefe auf mobilen Geräte
- Core Web Vitals in der Search Console
So kannst du in iterativen Prozessen deine Website immer weiter optimieren und individuell auf die Bedürfnisse deiner Zielgruppe anpassen.
Übrigens: Mit Paceways musst du dir über all diese Punkte gar keine Sorgen mehr machen. Wir optimieren deine Website ganz automatisch mit responsive Webdesign für alle Geräte. Du kannst die Erstellung auch gerne an unsere Webdesigner abgeben – so sieht deine Website immer perfekt aus und du brauchst dir nie wieder Gedanken über deine Seite machen.
