Mobile Friendly Checker
Dieser kostenlose Mobile-Friendly-Checker liest das HTML einer Seite und testet die Faktoren, die entscheiden, ob sie auf einem Smartphone funktioniert: ein korrektes Viewport-Meta-Tag, Zoom nicht deaktiviert, keine Flash- oder Plugin-Tags, keine winzigen Schriftgrößen oder Layouts mit fester Breite, responsive Bild-Attribute und angemessen große Tap-Ziele. Es ist eine heuristische HTML-Prüfung, daher zeigt jedes Ergebnis, was es beweisen kann und was nicht.
Mobile Friendly Checker
Technical SEO
Über dieses Tool
Google indexiert zunächst die mobile Version einer Seite, und die meisten Besucher kommen über ein Smartphone. Eine Seite, die zum Lesen gezoomt werden muss, die über den Bildschirm hinausgeht oder deren Links zu klein zum Antippen sind, verliert sie in Sekunden. Google hat seinen Mobile-Friendly Test 2023 eingestellt, daher benötigen Website-Betreiber eine schnelle Möglichkeit, die Grundlagen zu überprüfen, bevor sie eine Seite auf einem echten Telefon ansehen.
Der Checker ruft das HTML ab, das der Server sendet, und sucht nach den Signalen, die das mobile Verhalten bestimmen: das Viewport-Meta-Tag und ob es width=device-width setzt, ohne Zoom zu blockieren, Plugin-Tags wie Flash, die Telefone nicht ausführen können, Schriftgrößen unter 12 Pixeln in Inline-Stilen und Style-Blöcken, Tabellen und Elemente mit festen Breiten, die breiter als ein Telefonbildschirm sind, Bilder mit srcset- oder sizes-Attributen, Media Queries in Inline-Stilen, Links, deren Text zu kurz zum einfachen Antippen ist, veraltete Font-Tags und AMP- oder Mobile-Alternate-Links.
Es kann die Seite nicht rendern oder externe Stylesheets lesen, daher kann es nicht messen, wie das Layout tatsächlich aussieht, ob Text wirklich lesbar ist oder ob sich Elemente überlappen. Eine Seite, die hier jeden Check besteht, kann auf einem Smartphone immer noch unbeholfen sein, und eine Seite, die externes CSS für alles verwendet, kann Warnungen auslösen, die sie nicht verdient. Behandle das Ergebnis als Checkliste und öffne die Seite dann auf einem echten Telefon und im Chrome DevTools-Gerätemodus.
Häufig gestellte Fragen
Welches Viewport-Meta-Tag sollte jede Seite haben?
Der Standard ist <meta name="viewport" content="width=device-width, initial-scale=1">. Es teilt Telefonen mit, die Seite in der Bildschirmbreite anzuzeigen, anstatt so zu tun, als wäre sie ein 980-Pixel-Desktop und alles zu verkleinern. Ohne es ist der Text winzig und Besucher müssen zoomen, um zu lesen.
Ist es schlecht, das Zoomen mit user-scalable=no zu deaktivieren?
Ja. Es hindert Menschen mit schlechtem Sehvermögen daran, Text zu vergrößern, und ist ein Barrierefreiheitsfehler nach WCAG. Modernes iOS ignoriert es ohnehin. Entferne user-scalable=no und maximum-scale=1, es sei denn, die Seite ist eine Vollbild-App mit eigenen Zoom-Steuerelementen.
Was ist mit Googles Mobile-Friendly Test passiert?
Google hat ihn im Dezember 2023 zusammen mit dem Bericht zur mobilen Benutzerfreundlichkeit in der Search Console eingestellt. Lighthouse in Chrome DevTools und PageSpeed Insights melden immer noch mobile Probleme wie Viewport, Schriftgröße und Tap-Ziele, und dieser Checker behandelt die HTML-Grundlagen für einen schnellen ersten Blick.
Welche Größe sollten Tap-Ziele haben?
Mindestens 48 mal 48 CSS-Pixel mit etwa 8 Pixeln Abstand dazwischen, damit ein Finger ein Link trifft und nicht seinen Nachbarn. Navigationslisten mit eng gepackten Links und nur-Symbol-Links sind die üblichen Übeltäter. Padding auf dem Link, nicht nur auf dem Text, macht das Ziel größer, ohne das Aussehen zu verändern.
Warum zeigt der Checker nicht, wie die Seite auf einem Telefon aussieht?
Weil er das HTML liest, ohne es zu rendern oder Stylesheets herunterzuladen, was die Prüfung schnell und sicher hält, aber bedeutet, dass er das endgültige Layout nicht sehen kann. Für eine visuelle Prüfung öffne die Seite in Chrome, drücke F12, schalte die Geräte-Symbolleiste um und wähle ein Telefon, oder öffne es einfach auf deinem eigenen Telefon.