Einfache Tipps zur Behebung von Problemen mit mobiler Nutzerfreundlichkeit 

von Fabian Pfluger
05.12.2022
Hilfe zur Behebung von Problemen mit der Nutzerfreundlichkeit im Google Search Console Bericht

Dieser Artikel behandelt die Analyse des Berichts zur Nutzererfahrung auf Mobilgeräten, der in der Google Search Console bereitgestellt wird. Webmaster kennen diesen Bericht, da er an die Kunden von Webseiten geschickt wird, die als Inhaber bei der Google Search Console registriert sind. Hauptursache dafür sind oft Webseiten, die auf Design-Templates aufbauen, wie zum Beispiel das bekannte WordPress CMS. Wir empfehlen, diese Probleme regelmässige zu überprüfen und schnell zu beheben, da eine mobile-freundliche (Stichwort “mobile-first approach”) Website wichtig ist. Einen Artikel zum Mobile-Friendliness Check haben wir bereits im 2021 veröffentlicht.

Folgendes E-Mail erhält man von Google:

Neue Probleme vom Typ „Nutzerfreundlichkeit auf Mobilgeräten“ für https://www.example.com/ erkannt

An den Inhaber von https://www.example.com/:

Die Search Console hat festgestellt, dass Ihre Website von 2 Problem(en) des Typs „Nutzerfreundlichkeit auf Mobilgeräten“ betroffen ist. Auf Ihrer Website wurden die folgenden Probleme gefunden. Wir empfehlen, diese Probleme nach Möglichkeit zu beheben, damit die Google Suche optimal funktioniert und eine hohe Reichweite hat.

In der Schweiz ist der Anteil der mobilen Nutzer im Durchschnitt über alle Branchen im Jahr 2021 zwar noch unter 50 % (StatCounter Schweiz, 55.64 % Desktop, 40.86 % Mobile, 3.5 % Tablet), im weltweiten Vergleich ist dieser jedoch über 50 %. Diese Verteilung ist je nach Branche unterschiedlich, weshalb du am besten deine Verteilung kurz über Analytics prüfst. Viele B2C-Webseiten haben bereits einen Anteil von mobilen Nutzern von über 70 %.

Desktop vs. Mobile vs. Tablet Marktanteil Schweiz
Desktop vs. Mobile vs. Tablet Marktanteil Schweiz 2021 (Quelle Statcounter)

Der Zusammenhang zwischen Benutzerfreundlichkeit und Rankings

Die “Usability” der Webseite hat einen Zusammenhang mit deinen Rankings: je einfacher sich Nutzer auf deinen Seiten zu Recht finden können und navigieren, desto kleiner ist ihre Absprungrate. Eine tiefe Absprungrate ist ein Signal für interessanten Inhalt und korrektes Programmieren.
Einfach gesagt: Eine bessere Benutzerfreundlichkeit der Website, ob auf dem Handy oder Desktop, führt über kurz oder lang zu besseren Rankings. Erstelle also eine professionelle Website mit einer einfach zu navigierenden Struktur. Wie löst du also die Probleme zur Nutzerfreundlichkeit?

Wo finde ich den Bericht zur Benutzerfreundlichkeit?

Du findest den Bericht in der Google Search Console im Abschnitt Nutzerfreundlichkeit. Der Bericht umfasst fünf Probleme, auf die ich in diesem Artikel eingehe – damit deine Seite auch in Zukunft ohne Probleme von mobilen Geräten genutzt werden kann und deine Rankings nicht belastet werden.

Folgende Elemente umfasst der Bericht:

  1. Inhalt breiter als Bildschirm
  2. Anklickbare Elemente liegen zu dicht beieinander
  3. Text ist zu klein zum Lesen
  4. Inkompatible Plugins
  5. Darstellungsbereich nicht festgelegt  / Darstellungsbereich nicht auf „device-width“ festgelegt
Übersicht Google Serach Console Bericht zur Nutzerfreundlichkeit
Gründe, warum Seiten auf Mobilgeräten nicht verwendbar sind (Quelle: GSC Bericht)

Problem 1: Inhalt breiter als der Bildschirm

Mobile Geräte gibt es heute in allen Formen, Grössen und Pixeldichten, und so auch deren Displays. Ein Programmieren für fixe Displaygrössen macht keinen Sinn mehr, und die ausgelieferte Pixel-Grösse sollte relativ anstatt absolut sein. Das Problem taucht auf, wenn der Inhalt in der horizontalen Ausrichtung breiter als der Bildschirm ist.

Lösung:

Verwende relative Werte für die Weite in den CSS Vorgaben anstatt absolute Werte.

Feste, absolute Breite (nicht-korrekter Weg)

div.example {
width: 1400px;
}

Relative Breite (korrekter Weg)

div.example {
width: 100 %;
}

Problem 2: Anklickbare Elemente liegen zu dicht beieinander

Da wir auf mobilen Geräten mit unserem Finger, vor allem dem Daumen, navigieren, sollten zum Beispiel Navigationselemente nicht zu nah beieinander liegen. 

Die Vorgabe von Google ist hier präzis: 

“Die empfohlene Mindestgrösse für das klickbare Ziel liegt bei etwa 48 geräteunabhängigen Pixeln auf einer Website mit einem korrekt eingestellten mobilen Viewport. Während ein Symbol beispielsweise nur eine Breite und Höhe von 24 Pixeln hat, können Sie zusätzliches Padding verwenden, um die Zielgrösse zum Tippen auf 48 Pixel zu erhöhen. Der Bereich von 48×48 Pixeln entspricht etwa 9 mm, was in etwa der Grösse des Fingerballenbereichs einer Person entspricht.”

Beispiel:

Die Navigationselemente liegen zu nah beieinander
Die Navigationselemente liegen zu nah beieinander

Lösung:

Durch Anpassen von Padding und Margin-Abständen auf gesamt 48 px kann dieses Problem schnell behoben werden.

.mobile-menu {
padding-bottom: 12px
margin-bottom: 12px
}

Problem 3: Text ist zum klein zum Lesen

Diese Fehlermeldung erhältst du im Bericht, wenn du Schriftgrössen verwendest, die weniger als 12 Pixel gross sind. Auch hier beschreibt Google die Best Practice genau:

“Viele Suchmaschinen bewerten Seiten danach, wie mobilfreundlich sie sind. Schriftgrössen von weniger als 12 px sind auf mobilen Geräten oft schwer zu lesen und können dazu führen, dass Nutzer den Text vergrössern müssen, um ihn in einer angenehmen Grösse lesen zu können.»

Lösung:

Oft ist ein Stylen über CSS die einfachste Anpassung eines Themes, also ändere die font-size auf einen Wert grösser als 12 px.

<style>
.menu {
font-size: 14px;
}

Problem 4: Inkompatible Plugins

Erinnerst du dich noch an die alten Flash-Webseiten aus dem Jahr 2004? Flash wird heutzutage nicht mehr von Adobe weiterentwickelt und verursacht den meisten Browser Probleme. Das Problem entsteht, wenn du Plugins verwendet, die nicht mit dem Browser Google Chrome kompatibel sind. Wechsle diese Plugins und nutze andere (moderne) Technologien, die mobilen Nutzern keine Kopfschmerzen bescheren.


Problem 5: Darstellungsbereich nicht festgelegt  / Darstellungsbereich nicht auf „device-width“ festgelegt

Dieses Problem tritt kaum oft auf, denn die meisten Themes haben die Lösung bereits im Header. Der Darstellungsbereich, auch “viewport” genannt, ist ein Metatag, das bestimmt, wie die Seitengrösse an die Displaygrösse angepasst werden soll. Falls es nicht auf device-width festgelegt ist, sondern auf einen absoluten Pixelwert, erhältst du die diese Fehlermeldung.

Lösung: Darstellungsbereich nicht festgelegt bedeutet einfach, dass du das Tag für “viewport” nicht gesetzt hast. Füge folgenden Code in deinen Header ein:

<meta name="viewport" content="width=device-width, initial-scale=1">
Das Viewport-Tag ist bei der BlueGlass-Webseite korrekt gesetzt
Das Viewport-Tag ist bei der BlueGlass-Webseite korrekt gesetzt

Schlussbemerkung

Um die Nutzerfreundlichkeit auf mobilen Geräten zu verbessern, braucht es also gar keine vertieften Programmierfähigkeiten. Unsere SEO-Spezialisten helfen dir bei diesem, aber auch bei den anderen Google Search Console Berichten weiter – denn diese Probleme können bei mittleren bis grossen Webprojekten wie E-Commerce-Lösungen oder Magazinen schnell unübersichtlich werden.

Neuste Blog Artikel zu diesem Thema

Einfache Tipps zur Behebung von Problemen mit mobiler Nutzerfreundlichkeit 
SEO, Technical SEO, Web Design & Development, Website Design
Einfache Tipps zur Behebung von Problemen mit m...
Hast du einen Bericht mit Problemen zur Nutzerfreundlichkeit von Google erhalten? Wir helfen Dir weiter!
05.12.2022
Umsteigen auf HTTP/3? Wir klären auf!
SEO, Technical SEO, Web Analytics, Web Design & Development
Umsteigen auf HTTP/3? Wir klären auf!
Bei den Core Web Vitals dreht sich alles um Page Experience. Besonders oft werden Webseiten mit dem LCP (Largest Contentful Pai...
17.07.2022
Die 6 besten Tipps im Umgang mit schlechten Bewertungen auf Google, Tripadvisor & co.
Online Reputation Management, SEO
Die 6 besten Tipps im Umgang mit schlechten Bew...
Gestern rauschten auf Google My Business, Google Maps und Tripadvisor gerade noch Lobeshymnen über Ihre kompetenten Mitarbeiten...
24.06.2022
Core Web Vitals in der Schweiz – Es wird höchste Zeit diese Rankingfaktoren zu kennen
SEO
Core Web Vitals in der Schweiz – Es wird ...
Im Juni 2021 rollt Google das “Page Experience” Update aus und beginnt in diesem Zusammenhang, die sogenannten Core W...
27.04.2021
Hat Ihre Website ein Usability-Problem?
Web Design & Development
Hat Ihre Website ein Usability-Problem?
Schon lange ist die User Experience (UX) von Webseiten ein viel beachtetes Thema. Spätestens seit Google angekündigt hat, die U...
10.03.2021
Mobile-First wird zu Mobile-Only-Indexing
SEO, Technical SEO
Mobile-First wird zu Mobile-Only-Indexing
Mobile-optimierte Websites werden immer wichtiger: Im Frühling 2021 wird der "Mobile-Only-Indexing" von Google eingeführt. Rein...
26.02.2021
SEO für Restaurants in der Coronakrise (und darüber hinaus)
Local SEO, SEO
SEO für Restaurants in der Coronakrise (und dar...
Gastronomiebetriebe dürfen in der Schweiz aktuell nur noch einen Take-Away-Service bzw. einen Lieferservice anbieten. Viele Res...
01.04.2020
Tools für den SEO-Check
SEO, SEO Audit
Tools für den SEO-Check
Ahrefs, Search Metrics, Ubersuggest und Seerobots – die Masse an SEO-Tools hat sich zu einem buschigen Technik-Urwald verdichte...
28.10.2019
JavaScript-SEO: Folgt Google JavaScript-Links?
SEO, Technical SEO
JavaScript-SEO: Folgt Google JavaScript-Links?
Die Verwendung von JavaScript zur Darstellung von Inhalten war im Zusammenhang mit SEO lange problematisch. Früher konnten Such...
22.10.2019
Keyword-Analyse: Von Suchvolumen, Suchabsicht und dem Potential der Clusterung
SEO
Keyword-Analyse: Von Suchvolumen, Suchabsicht u...
Suchmaschinen sind längst über das Niveau von Keywords hinaus: Keyword-Stuffing von immer dem gleichen Keyword ist heute schädl...
26.09.2019