Im Jahr 2015 überholte der mobile Traffic den Desktop-Traffic weltweit. Google reagierte mit einer der größten Veränderungen in der Geschichte der Suchmaschine: der Mobile-First-Indexierung. Seit März 2024 gilt diese ausnahmslos für alle Websites. Das bedeutet: Google bewertet Ihre Website primär nach der mobilen Version. Nicht nach der Desktop-Version. Nicht nach beiden. Nach der mobilen.
Wenn Ihre mobile Website langsam lädt, schlecht navigierbar ist oder Inhalte fehlen, verlieren Sie Rankings — egal wie perfekt Ihre Desktop-Seite aussieht. Dieser Artikel zeigt Ihnen, was Mobile-First konkret bedeutet und wie Sie Ihre Website dafür optimieren.
Was Mobile-First-Indexierung wirklich bedeutet
Früher: Desktop war der Standard
Bis 2018 hat Google die Desktop-Version Ihrer Website gecrawlt, indexiert und für das Ranking verwendet. Die mobile Version war zweitrangig. Unternehmen konnten eine mittelmäßige mobile Website haben und trotzdem gut ranken — solange die Desktop-Version stark war.
Heute: Mobile ist der Standard
Googles Crawler (Googlebot) besucht Ihre Website jetzt primär als mobiles Gerät. Die mobile Version ist die Version, die Google indexiert. Die Desktop-Version spielt für die Indexierung eine untergeordnete Rolle.
Was das konkret heißt:
- Inhalte, die nur auf der Desktop-Version sichtbar sind, werden möglicherweise nicht indexiert
- Structured Data, die nur auf Desktop eingebunden sind, werden möglicherweise ignoriert
- Meta-Tags der mobilen Version werden für das Ranking herangezogen
- Die Ladegeschwindigkeit der mobilen Version beeinflusst das Ranking
Warum das so ist
Die Zahlen sprechen eine klare Sprache: Über 60 Prozent aller Google-Suchen kommen von Mobilgeräten. In manchen Branchen — Gastronomie, lokale Dienstleistungen, E-Commerce — liegt der Anteil bei über 75 Prozent. Google optimiert sein Ranking für die Mehrheit der Nutzer, und die Mehrheit nutzt Smartphones.
Die drei Ansätze: Responsive, Dynamic Serving, Separate URLs
Responsive Design (empfohlen)
Beim Responsive Design gibt es eine URL und einen HTML-Code für alle Geräte. Das Layout passt sich über CSS Media Queries an die Bildschirmgröße an. Google empfiehlt diesen Ansatz ausdrücklich.
Vorteile:
- Eine URL pro Seite — kein Duplicate Content
- Einfachere Wartung
- Google muss nur eine Version crawlen
- Nutzer teilen immer dieselbe URL
Dynamic Serving
Derselbe URL liefert unterschiedlichen HTML-Code, abhängig vom Gerät. Der Server erkennt das Gerät und sendet die passende Version.
Nachteile:
- Komplexe Implementierung
- Fehleranfällig bei der Geräteerkennung
- Schwieriger zu warten
Separate mobile URLs (m.example.com)
Eine separate mobile Website auf einer Subdomain. Dieser Ansatz ist veraltet und wird nicht mehr empfohlen.
Nachteile:
- Duplicate Content ohne korrekte Canonical-Tags
- Doppelter Wartungsaufwand
- Linkjuice wird aufgeteilt
- Google muss zwei Versionen crawlen
Core Web Vitals: Die technische Messlatte
Google misst die Nutzererfahrung Ihrer Website mit den Core Web Vitals — drei Metriken, die seit 2021 ein offizieller Rankingfaktor sind.
LCP — Largest Contentful Paint
Der LCP misst, wie schnell das größte sichtbare Element (meist ein Bild oder eine Überschrift) geladen wird.
- Gut: Unter 2,5 Sekunden
- Verbesserung nötig: 2,5 bis 4 Sekunden
- Schlecht: Über 4 Sekunden
Mobile-spezifische LCP-Probleme:
- Hero-Bilder, die für Desktop dimensioniert sind
- Webfonts, die über langsame Verbindungen laden
- Große JavaScript-Bundles, die das Rendering blockieren
INP — Interaction to Next Paint
INP misst, wie schnell Ihre Website auf Nutzerinteraktionen reagiert (Tippen, Scrollen, Eingaben).
- Gut: Unter 200 Millisekunden
- Schlecht: Über 500 Millisekunden
Mobile-spezifische INP-Probleme:
- Schwere JavaScript-Frameworks auf leistungsschwachen Smartphones
- Event-Handler, die den Main Thread blockieren
- Komplexe Animationen ohne GPU-Beschleunigung
CLS — Cumulative Layout Shift
CLS misst, wie stark sich Elemente auf der Seite verschieben, während sie lädt. Nichts ist frustrierender, als auf einen Button zu tippen — und in dem Moment verschiebt sich das Layout, sodass Sie etwas anderes antippen.
- Gut: Unter 0,1
- Schlecht: Über 0,25
Mobile-spezifische CLS-Probleme:
- Bilder ohne feste Dimensionen
- Werbebanner, die nachträglich geladen werden
- Dynamische Inhalte, die oberhalb des aktuellen Viewports eingefügt werden
- Cookie-Banner, die das Layout verschieben
Mobile-First Design: Mehr als Responsive
Ein responsives Layout ist die Grundvoraussetzung. Aber Mobile-First geht weiter: Es bedeutet, dass Sie zuerst für das Smartphone gestalten und dann für größere Bildschirme erweitern.
Der Unterschied in der Praxis
Desktop-First (veraltet):
- Design für 1920px Breite
- Elemente werden für kleinere Bildschirme zusammengeschoben
- Inhalte werden versteckt oder in Akkordeons gepackt
- Mobile Version fühlt sich wie ein Kompromiss an
Mobile-First (empfohlen):
- Design für 375px Breite (iPhone)
- Kerninhalt wird priorisiert
- Für größere Bildschirme werden Elemente hinzugefügt
- Desktop-Version fühlt sich wie eine Erweiterung an
Navigation im Mobile-First-Ansatz
Die Navigation ist das Element, das sich zwischen Desktop und Mobile am stärksten verändert. Ein Desktop-Menü mit zehn Einträgen funktioniert auf dem Smartphone nicht.
Best Practices:
- Maximal 5 Hauptmenüpunkte sichtbar
- Hamburger-Menü für sekundäre Navigation
- Sticky Header mit den wichtigsten Aktionen
- Suchfunktion prominent platziert
- Bottom Navigation für die wichtigsten Bereiche (wie bei Apps)
Touch-Optimierung
Finger sind ungenauer als Mauszeiger. Was mit einer Maus problemlos klickbar ist, kann auf dem Touchscreen frustrierend werden.
Mindestanforderungen:
- Tippfläche: Mindestens 44 x 44 Pixel
- Abstand zwischen Elementen: Mindestens 8 Pixel
- Keine Hover-Effekte als einzige Interaktion: Touch-Geräte haben kein Hover
- Swipe-Gesten: Für Bildergalerien, Slider und Navigation nutzen
Ladezeit auf Mobilgeräten optimieren
Mobile Nutzer haben oft langsamere Verbindungen als Desktop-Nutzer. Gleichzeitig sind ihre Erwartungen höher: 53 Prozent der mobilen Nutzer verlassen eine Website, die länger als 3 Sekunden lädt.
Die größten Geschwindigkeitskiller
-
Unkomprimierte Bilder: Der häufigste Grund für langsame mobile Seiten. Nutzen Sie WebP, definieren Sie responsive Bildgrößen mit srcset, und setzen Sie Lazy Loading für Bilder außerhalb des sichtbaren Bereichs ein.
-
Zu viel JavaScript: Jedes Kilobyte JavaScript muss heruntergeladen, geparst und ausgeführt werden. Auf einem mittelklasse Smartphone dauert das drei- bis fünfmal länger als auf einem Desktop-Computer.
-
Render-blockierende Ressourcen: CSS und JavaScript im Head-Bereich, die das Rendering der Seite blockieren. Nutzen Sie Critical CSS und laden Sie JavaScript asynchron.
-
Keine Caching-Strategie: Browser-Caching reduziert die Ladezeit für wiederkehrende Besucher drastisch. Setzen Sie Cache-Header für statische Ressourcen.
-
Kein CDN: Ein Content Delivery Network liefert Inhalte vom nächstgelegenen Server. Das reduziert die Latenz spürbar.
Konkrete Maßnahmen
- Bilder in WebP mit responsiven Größen (srcset) bereitstellen
- JavaScript-Bundles unter 100 KB halten (komprimiert)
- Critical CSS inline einbinden, Rest asynchron laden
- Lazy Loading für alle Bilder außer dem LCP-Element
- Schriften mit font-display: swap laden und vorladen (preload)
- HTTP/2 oder HTTP/3 nutzen
Mobile SEO: Die wichtigsten On-Page-Faktoren
Title Tags und Meta Descriptions
Auf mobilen Suchergebnisseiten ist weniger Platz als auf dem Desktop. Google zeigt auf dem Smartphone kürzere Title Tags und Meta Descriptions an.
- Title Tag: Maximal 55 Zeichen (statt 60 auf Desktop)
- Meta Description: Maximal 120 Zeichen (statt 160 auf Desktop)
- Primäres Keyword: So weit vorne wie möglich
Strukturierte Daten
Strukturierte Daten sind im Mobile-First-Index genauso wichtig wie zuvor. Stellen Sie sicher, dass Ihr Schema-Markup auf der mobilen Version identisch ist.
Interne Verlinkung
Die interne Verlinkung auf der mobilen Version muss der Desktop-Version entsprechen. Wenn Sie auf Mobile Links entfernen (z. B. in zusammengeklappten Menüs), verlieren diese Links an Gewicht für die Indexierung.
Content-Parität
Alle Inhalte, die auf der Desktop-Version sichtbar sind, müssen auch auf Mobile verfügbar sein. "Versteckte" Inhalte in Akkordeons oder Tabs werden seit der Mobile-First-Indexierung vollständig indexiert — aber sie müssen vorhanden sein.
Local SEO und Mobile: Die perfekte Verbindung
Lokale Suchanfragen sind überwiegend mobil. "Restaurant in der Nähe", "Friseur Bielefeld", "Zahnarzt geöffnet" — diese Suchen finden fast ausschließlich auf dem Smartphone statt.
Was lokale Unternehmen beachten müssen
- Google Business Profile: Vollständig ausgefüllt, mit aktuellen Öffnungszeiten und Fotos
- NAP-Konsistenz: Name, Adresse, Telefonnummer überall identisch
- Click-to-Call: Telefonnummer als klickbarer Link (tel:+49...)
- Google Maps Integration: Eingebettete Karte mit korrektem Standort
- Mobile Öffnungszeiten: Prominent sichtbar, nicht versteckt
Voice Search
Über 50 Prozent der Smartphone-Nutzer verwenden regelmäßig die Sprachsuche. Voice-Search-Anfragen sind länger und natürlicher formuliert als getippte Suchanfragen.
Optimierung für Voice Search:
- Inhalte in natürlicher Sprache formulieren
- Fragen direkt beantworten (Featured-Snippet-Format)
- FAQ-Bereiche mit häufigen Fragen
- Lokale Keywords einbinden ("Webdesign-Agentur in Bielefeld")
AMP ist tot — was stattdessen gilt
Accelerated Mobile Pages (AMP) war Googles Versuch, das mobile Web schneller zu machen. Seit 2021 ist AMP kein Rankingfaktor mehr, und die meisten Websites profitieren davon, AMP zu entfernen und stattdessen in echte Performance-Optimierung zu investieren.
Was AMP ersetzt hat
- Core Web Vitals: Messbare Performance-Metriken statt eines Frameworks
- Next.js, Astro, Remix: Moderne Frameworks, die von Haus aus schnell sind
- Edge Computing: Inhalte werden am Rand des Netzwerks gerendert, nahe am Nutzer
- Image CDNs: Automatische Bildoptimierung für jedes Gerät
Mobile SEO Audit: 15 Punkte, die Sie prüfen sollten
- Responsive Design auf allen Seiten vorhanden
- Viewport-Meta-Tag korrekt gesetzt
- Schriftgröße mindestens 16px für Fließtext
- Tippflächen mindestens 44x44 Pixel
- Kein horizontales Scrollen nötig
- LCP unter 2,5 Sekunden (mobil)
- INP unter 200 Millisekunden
- CLS unter 0,1
- Bilder mit responsiven Größen und Lazy Loading
- JavaScript-Bundle unter 100 KB (komprimiert)
- Keine Interstitials (Fullscreen-Popups), die Inhalte verdecken
- Identische Inhalte auf Mobile und Desktop
- Identische strukturierte Daten auf Mobile und Desktop
- Click-to-Call für Telefonnummern
- Google Search Console zeigt keine mobilen Usability-Fehler
Die Zukunft: Mobile-Only?
Der Trend ist eindeutig: Der Anteil mobiler Nutzung steigt weiter. In vielen Entwicklungsländern ist das Smartphone das einzige Gerät, mit dem Menschen das Internet nutzen. Auch in Deutschland steigt der Anteil der "Mobile-Only"-Nutzer kontinuierlich.
Für die Praxis bedeutet das: Mobile-First ist kein Trend — es ist der neue Standard. Wer seine Website heute noch primär für den Desktop gestaltet und dann "irgendwie responsive macht", verliert schon jetzt Rankings und wird in den kommenden Jahren noch stärker abgestraft.
Fazit
Mobile-First ist keine Option mehr — es ist die Realität. Google bewertet Ihre Website nach der mobilen Version, und über 60 Prozent Ihrer Besucher kommen von Smartphones. Eine Website, die mobil nicht überzeugt, verliert Rankings, Besucher und Kunden.
Die gute Nachricht: Die Maßnahmen sind klar. Responsive Design, schnelle Ladezeiten, Touch-optimierte Bedienung und Content-Parität zwischen Mobile und Desktop. Wer diese Grundlagen umsetzt, hat einen Wettbewerbsvorteil — denn erstaunlich viele Websites erfüllen sie noch nicht.
Fangen Sie mit einem Mobile-Audit an. Prüfen Sie Ihre Core Web Vitals. Und dann optimieren Sie Schritt für Schritt. Denn auf dem Smartphone entscheidet sich, ob Ihre Website gefunden wird.