Website mobil optimieren: So prüfen Sie die Handy-Ansicht und beheben typische Fehler

Warum die mobile Version entscheidend ist

Google ruft Websites mit einem Smartphone-Crawler ab und bewertet die mobile Version. In der Dokumentation zur Mobile-First-Indexierung heißt es, Google verwende die mobile Version der Inhalte einer Website, abgerufen mit dem Smartphone-Agenten, für Indexierung und Ranking.

Zugleich empfiehlt Google ausdrücklich ein responsives Design: Dieselben Inhalte werden unter derselben Adresse ausgeliefert und passen sich der Bildschirmbreite an. Es sei die einfachste Variante zum Umsetzen und Pflegen.

So prüfen Sie die mobile Ansicht in zehn Minuten

1. Auf dem echten Handy öffnenÖffnen Sie Startseite, eine Leistungsseite und die Kontaktseite im mobilen Netz, nicht im WLAN. Drehen Sie das Gerät auch ins Querformat.
2. Eine Aufgabe lösenVersuchen Sie wie ein Kunde, Ihre Telefonnummer zu finden und anzurufen, das Menü zu öffnen und das Kontaktformular auszufüllen. Wo stocken Sie?
3. Entwicklerwerkzeuge im Browser nutzenIn Chrome mit F12 die Entwicklerwerkzeuge öffnen und das Geräte-Symbol wählen. Dort lässt sich ein gängiges Smartphone-Format einstellen und die Seite in verschiedenen Breiten testen. Das ersetzt keinen Test auf einem echten Gerät.
4. PageSpeed Insights mobil lesenGeben Sie Ihre Adresse bei PageSpeed Insights ein und lesen Sie den Reiter „Mobil“. Lighthouse zeigt dort auch Hinweise zu Barrierefreiheit und Best Practices, die oft mobile Probleme verraten.
5. In der Search Console nachsehenDie URL-Prüfung der Google Search Console zeigt, wie Google eine Seite zuletzt abgerufen hat und ob Probleme beim Abruf aufgetreten sind.

Checkliste: Was auf dem Handy stimmen muss

Die neun häufigsten Fehler und ihre Lösung

1. Das Viewport-Tag fehlt oder ist falsch

Ohne Viewport-Angabe behandelt ein Smartphone die Seite wie eine Desktop-Seite und verkleinert sie, sodass alles winzig erscheint. Die Angabe gehört in den <head> jeder Seite:

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

Bei WordPress und Baukästen ist sie im Theme enthalten. Fehlt sie, liegt es meist an einem veralteten oder fehlerhaft angepassten Theme. Verzichten Sie auf user-scalable=no: Es verhindert das Zoomen und erschwert Menschen mit Sehschwäche die Nutzung.

2. Feste Breiten erzeugen seitliches Scrollen

Elemente mit festen Pixelbreiten, etwa Tabellen, Bilder oder Einbettungen, sind breiter als der Bildschirm. Bilder begrenzen Sie auf die verfügbare Breite, Tabellen legen Sie in einen scrollbaren Bereich, Karten und Videos binden Sie mit festem Seitenverhältnis ein.

img { max-width: 100%; height: auto; }

3. Die Schrift ist zu klein

Fließtext sollte ohne Zoomen lesbar sein; üblich sind mindestens 16 Pixel. Achten Sie auch auf ausreichenden Kontrast und einen Zeilenabstand, der Zeilen nicht aneinanderklebt.

4. Schaltflächen und Links sind zu klein oder zu dicht

Google empfiehlt Tipp-Ziele von etwa 48 Pixel Größe mit rund 8 Pixel Abstand. Ein kleines Symbol lässt sich mit Innenabstand (padding) vergrößern, ohne dass es optisch wächst. Für Geräte mit Touch-Bedienung lässt sich das gezielt einstellen:

@media (any-pointer: coarse) {
  .container a { padding: .8em; }
}

5. Das Menü funktioniert nicht

Häufige Ursachen sind ein JavaScript-Fehler (oft durch ein Plugin), ein Dropdown-Menü, das nur beim Darüberfahren mit der Maus aufklappt, und veraltete zwischengespeicherte Skripte. Testen Sie das Menü in Safari auf dem iPhone und in Chrome auf Android, leeren Sie den Cache Ihrer Website und deaktivieren Sie zur Fehlersuche testweise Plugins (am besten in einer Testumgebung).

6. Inhalte fehlen auf dem Handy

Weil Google die mobile Version bewertet, muss sie dieselben Inhalte enthalten wie die Desktop-Version. Dasselbe gilt für strukturierte Daten, Titel, Meta-Beschreibungen, Robots-Angaben und Alternativtexte von Bildern. Fehlen Texte oder Links mobil, fehlen sie auch in der Bewertung.

7. Bilder sind zu groß für Mobilgeräte

Ein Foto in Druckqualität verlangsamt die Seite im Mobilfunknetz. Skalieren Sie Bilder auf die tatsächlich angezeigte Größe, nutzen Sie moderne Formate wie WebP oder AVIF und lassen Sie Bilder unterhalb des sichtbaren Bereichs später laden. Details im Ratgeber Website lädt langsam.

8. Aufdringliche Pop-ups und Banner

Overlays, die direkt nach dem Aufruf den Inhalt verdecken und sich auf dem Handy schwer schließen lassen, verärgern Besucher. Auch Cookie-Hinweise sollten den Inhalt nicht vollständig verdecken, und alle Auswahlschaltflächen müssen auf dem kleinen Bildschirm erreichbar sein.

9. Telefon, Adresse und Formular sind mobil schwer zu erreichen

Auf dem Handy wollen viele Besucher anrufen oder den Weg finden. Machen Sie die Telefonnummer antippbar und platzieren Sie sie gut sichtbar im Kopf- oder Fußbereich:

<a href="tel:+491234567890">01234 567890</a>

Mobile-First-Indexierung: Was Google verlangt

Die Dokumentation von Google nennt Best Practices, die verhindern, dass Ihnen durch die mobile Bewertung Sichtbarkeit verloren geht:

• Die mobile Website enthält dieselben Inhalte wie die Desktop-Website.
• Die mobile und die Desktop-Website haben dieselben strukturierten Daten.
• Robots-Meta-Tags, Titel und Meta-Beschreibungen sind auf beiden Versionen gleichwertig, ebenso die Alternativtexte der Bilder.
• Primäre Inhalte werden nicht erst nach einer Nutzerinteraktion nachgeladen.
• Ressourcen, die Google zur Darstellung braucht, sind nicht per robots.txt gesperrt.
• Mobile Adressen enthalten keine Fragmente (den Teil nach dem #).

WordPress, Baukästen und Eigenbau: Wo Sie ansetzen

Wie Sie die Fehler beheben, hängt davon ab, womit Ihre Website gebaut wurde:

• WordPress: Prüfen Sie zuerst, ob das aktive Theme aktuell und responsiv ist. Viele Seitenbaukästen bieten eine Vorschau für Tablet und Smartphone; prüfen Sie jede wichtige Seite in allen Breiten und passen Sie Abstände und Spalten an.
• Website-Baukästen (zum Beispiel Wix, Jimdo oder Squarespace): Es gibt meist eine mobile Vorschau oder einen eigenen Editor. Viele Fehler entstehen durch manuell verschobene Elemente, die mobil anders umbrechen.
• Individuell programmierte Websites: Die Ursachen liegen meist in festen Breiten und im Viewport-Tag. Ein Entwickler behebt das in der Regel mit gezielten CSS-Anpassungen.

Ein komplett neues Design ist selten nötig. Meist genügen gezielte Korrekturen.

Wann Sie Hilfe holen sollten

Hilfe lohnt sich, wenn Fehler nach mehreren Versuchen bleiben, wenn das Theme veraltet ist oder wenn jede Änderung an einer Stelle das Layout an einer anderen zerstört.

Fehler in der mobilen Ansicht gehören zu unserer Schnellreparatur (149 €, 2 Werktage). Kommen mehrere Probleme zusammen, passt die Website-Reparatur (349 €). Beide Preise verstehen sich netto zzgl. 19 % USt. Welches Paket passt, sagen wir Ihnen nach der kostenlosen Prüfung.

Häufige Fragen

Weiterlesen