Mobile First und der Viewport

Modul 4: Geschwindigkeit, Mobilgeräte und https · Lesezeit: 10 Minuten

Lernziel: Nach dieser Lektion können Sie erklären, was Mobile-First-Indexierung bedeutet, eine gute Viewport-Einstellung erkennen und schreiben und die Stolperfallen vermeiden, durch die Ihre mobile Seite weniger zeigt oder schlechter funktioniert als Ihre Desktopseite.

Kernbegriffe: Mobile-First-Indexierung, Smartphone-Crawler, responsives Design, Dynamic Serving, separate mobile Website, <meta name="viewport">, width=device-width, initial-scale, Zoomen blockieren, gleiche Inhalte, aufdringliche Pop-ups (Interstitials), Tippziele

Google schaut mit einem Smartphone

Lange Zeit betrachtete Google eine Website so, wie ein Computer es tut. Das ist vorbei. Google verwendet für das Indexieren und Ranking die mobile Version Ihrer Seiten und ruft sie mit dem Smartphone-Crawler des Googlebot ab. Das nennt sich Mobile-First-Indexierung. Im Oktober 2023 schrieb Google, dass die Umstellung abgeschlossen ist: Für nahezu alle Websites heißt es jetzt einfach "Indexieren". Seit Juli 2024 crawlt Google auch die letzten Websites, die bis dahin noch mit dem Desktop-Crawler besucht wurden, mit dem mobilen Crawler; was auf einem Smartphone überhaupt nicht erreichbar ist, kann dann nicht mehr indexiert werden.

Was bedeutet das in der Praxis? Was nicht auf Ihrer mobilen Seite steht, existiert für Google nicht. Lassen Sie auf dem Smartphone einen Textabschnitt, eine Tabelle, Ihre Öffnungszeiten oder Ihre strukturierten Daten weg, "weil der Bildschirm klein ist", dann sieht Google diesen Teil auch nicht.

Drei Wege, mobil zu bauen

Moderne Website-Baukästen und WordPress-Themes sind fast alle responsiv. Eine Website aus dem AI Builder ist ebenfalls responsiv: eine Seite, die sich anpasst. Haben Sie eine alte Website mit einer separaten m.-Version, ist der Umstieg auf responsives Design oft die größte Verbesserung, die Sie vornehmen können.

Der Viewport: die Zeile, die alles zum Laufen bringt

Ein Smartphone-Browser weiß nicht von selbst, dass Ihre Seite für einen kleinen Bildschirm gemacht ist. Ohne Anweisung tut er so, als wäre der Bildschirm viel breiter, zum Beispiel 980 Pixel (das Beispiel aus der Dokumentation von MDN), und verkleinert die ganze Seite, bis sie auf den Bildschirm passt. Ergebnis: winzige Schrift, in die man hineinzoomen muss. Auch ein responsives Design funktioniert dann nicht, denn das CSS geht davon aus, dass der Bildschirm breit ist.

Die Lösung ist eine einzige Zeile im <head> jeder Seite:

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

• width=device-width bedeutet: Machen Sie die Seite so breit wie den Bildschirm des Geräts. Dann kann Ihr CSS mit Bildschirmbreiten arbeiten.
• initial-scale=1 bedeutet: Beginnen Sie ohne Hinein- oder Herauszoomen.

Genau diese Zeile empfiehlt Lighthouse (die Prüfung in Chrome und PageSpeed Insights). Lighthouse bewertet eine Seite als fehlerhaft, wenn die Viewport-Zeile fehlt oder kein width= enthält.

Was Sie besser nicht tun

Manche Websites fügen mehr hinzu:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Damit kann ein Besucher nicht mehr hineinzoomen. Das wirkt ordentlich ("das Layout bleibt intakt"), ist aber für Menschen mit eingeschränktem Sehvermögen eine Hürde. Die Barrierefreiheitsrichtlinie WCAG 2.2 verlangt im Erfolgskriterium 1.4.4 (Größenänderung von Text, Stufe AA), dass Text bis auf 200 Prozent vergrößert werden kann, ohne dass Inhalte oder Funktionen verloren gehen. Die offizielle Prüfregel des W3C, "Meta viewport allows for zoom", bewertet einen Viewport mit user-scalable=no oder mit maximum-scale unter 2 als fehlerhaft. Lassen Sie diese Angaben also weg. (Safari auf dem iPhone ignoriert sie inzwischen standardmäßig, andere Browser aber nicht.)

Ebenfalls falsch ist eine feste Breite wie width=1024. Dann tut das Smartphone wieder so, als wäre der Bildschirm 1.024 Pixel breit, und Ihr responsives Design ist nutzlos.

Gleiche Inhalte auf Mobilgeräten und Desktop

Google nennt in der Dokumentation zur Mobile-First-Indexierung einige Dinge, die in beiden Versionen gleich sein müssen. Bei einer responsiven Website ist das automatisch so, bei Dynamic Serving und einer separaten mobilen Website müssen Sie es prüfen:

• Die Inhalte selbst. Text darf mobil in einem Aufklappbereich oder Tab stehen, er muss aber in der Seite enthalten sein.
• Titel und Meta-Beschreibung (Lektion 3.1) müssen gleichwertig sein.
• Strukturierte Daten (Modul 5) müssen in beiden Versionen vorhanden sein.
• Bilder mit denselben Alt-Texten und in guter Qualität.
• Keine Inhalte, die erst nach einer Aktion laden. Google sagt es wörtlich: Laden Sie Hauptinhalte nicht erst, wenn der Besucher wischt, klickt oder tippt; der Googlebot tut das nicht.
• robots.txt darf die mobilen Seiten und deren CSS, JavaScript und Bilder nicht blockieren. Ohne CSS kann Google nicht sehen, wie die Seite aussieht.

Angenehm auf einem kleinen Bildschirm

Einige Punkte, die Google als Fragen für eine gute Nutzererfahrung nennt und die Sie auf Ihrem eigenen Smartphone prüfen:

• Lesbarer Text ohne Hineinzoomen.
• Tippziele (Schaltflächen, Links in einem Menü) groß genug und nicht zu dicht beieinander, damit man nicht versehentlich das falsche antippt.
• Keine aufdringlichen Pop-ups. Google schreibt, dass Elemente, die den Inhalt verdecken (ein Newsletter-Fenster über der ganzen Seite, sobald man sie aufruft), Besucher verärgern und dem Vertrauen schaden und dass sie es Suchmaschinen erschweren, Ihre Inhalte zu verstehen. Verwenden Sie lieber eine kleine Leiste. Gesetzlich vorgeschriebene Fenster, etwa eine Altersprüfung, fallen nicht unter diese Richtlinie.
• Kein horizontales Scrollen: Ein zu breites Bild oder eine zu breite Tabelle schiebt die ganze Seite zur Seite. Geben Sie Tabellen eine eigene Scrollleiste.

Google hat den separaten "Test auf Optimierung für Mobilgeräte" und den Bericht "Nutzerfreundlichkeit auf Mobilgeräten" in der Search Console Ende 2023 eingestellt. Prüfen können Sie jetzt mit Ihrem eigenen Smartphone, mit der mobilen Ansicht in den Entwicklertools Ihres Browsers und mit Lighthouse oder PageSpeed Insights (Lektion 4.3).

In der Praxis: selbst nachsehen

Öffnen Sie Ihre Website in Chrome oder Firefox auf dem Computer, drücken Sie F12 und klicken Sie auf das Symbol mit Smartphone und Tablet (Gerätesymbolleiste). Wählen Sie ein schmales Gerät und blättern Sie durch Ihre wichtigsten Seiten. Achten Sie auf Text, der aus dem Bild ragt, Schaltflächen, die übereinanderliegen, und Abschnitte, die mobil fehlen. Prüfen Sie danach im Quelltext (Strg+U), ob die Viewport-Zeile vorhanden ist.

Der AI Builder setzt die Viewport-Zeile width=device-width, initial-scale=1 selbst in jede Seite. WordPress-Themes tun das ebenfalls, genau wie die meisten anderen Website-Baukästen. Bei einer selbst gebauten oder alten Website lohnt sich die Prüfung: Es ist nur eine Zeile, aber ohne sie funktioniert nichts von Ihrem mobilen Design.

Zusammenfassung

• Google indexiert und rankt die mobile Version Ihrer Seiten; was dort fehlt, sieht Google nicht.
• Responsives Design ist der empfohlene Weg: eine Adresse, ein HTML.
• Jede Seite braucht <meta name="viewport" content="width=device-width, initial-scale=1">.
• Blockieren Sie das Zoomen nicht: kein user-scalable=no und kein maximum-scale unter 2 (WCAG 1.4.4).
• Halten Sie Inhalte, Titel, Meta-Beschreibung und strukturierte Daten auf Mobilgeräten und Desktop gleich und vermeiden Sie Pop-ups, die die Seite verdecken.

Quiz

Aufgabe

Aufgabe A4.2: Hat Ihre Seite einen guten Viewport? Geben Sie die Adresse einer Seite ein (zum Beispiel Ihrer Startseite). Das Programm liest das HTML und prüft, ob genau ein <meta name="viewport"> im <head> steht, das width=device-width enthält, und ob das Zoomen nicht blockiert wird (user-scalable=no oder maximum-scale unter 2). Sehen Sie sich danach dieselbe Seite selbst in der mobilen Ansicht Ihres Browsers an. Keine eigene Website? Verwenden Sie www.wikipedia.org.

Weiterführende Links

• Google Search Central, Best Practices für die Mobile-First-Indexierung: https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing
• Google Search Central Blog, Mobile-first indexing has landed (2023): https://developers.google.com/search/blog/2023/10/mobile-first-is-here
• Google Search Central, Aufdringliche Interstitials und Dialogfenster vermeiden: https://developers.google.com/search/docs/appearance/avoid-intrusive-interstitials
• W3C, ACT-Regel Meta viewport allows for zoom: https://www.w3.org/WAI/standards-guidelines/act/rules/b4f0c3/
• MDN, Das Viewport-Meta-Tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport
• W3C, Understanding SC 1.4.4 Resize Text: https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html