Gebruiksgemak op mobiele apparaten
Krijg je een foutmelding te zien in je Google search console rapportage onder: Gebruiksgemak op mobiele apparaten? Ik help je graag met het oplossen van je foutmeldingen. In deze blogpost, deel ik een oplossing voor de foutmeldingen: Gebruikt incompatibele plug-ins, viewport is niet ingesteld, content is breder dan scherm, tekst te klein om te lezen, klikbare elementen te dicht bij elkaar. Nieuwsgierig geworden? Lees dan gauw verder.
Introductie
In Google search console, vind je een rapportage: Gebruiksgemak op mobiele apparaten. Een handig overzicht om te achterhalen of Google jouw website als mobielvriendelijk ziet. Twee redenen waarom ik de foutmeldingen in deze rapportage altijd graag snel oplos:
- Google indexeert je website a.h.v. de mobiele versie.
- Een groot gedeelte van je doelgroep bezoekt je website via zijn of haar mobiel (bron: statcounter)
In de “Gebruiksgemak op mobiele apparaten” rapportage, vind je 2 statuscodes:
- Fout: De pagina wordt als “niet mobielvriendelijk” beschouwd. Dit betekend dat je een probleem moet oplossen.
- Goed: De pagina wordt als mobielvriendelijk beschouwd.
Zoals je in het voorbeeld hierboven ziet, zijn er een aantal pagina’s die verbeterd dienen te worden. Mijn stappenplan v.a. dit punt:
- Kies de foutmelding met de meeste pagina’s als eerst
- Klik op de foutmelding om voorbeeld pagina’s te achterhalen
- Inspecteer een aantal pagina’s met de URL inspectie tool of de mobiel vriendelijkheidstest om te achterhalen welke elementen voor een probleem zorgen.
- Schrijf een advies uit aan je webdeveloper
- Probleem opgelost? Kies voor: Oplossing vallideren in Google search console.
Tip: Soms wil het wel eens zo zijn dat Google het niet bij het juiste eind heeft. Dit ontdek je snel genoeg in de URL inspectie tool / mobielvriendelijkheids test. In dit geval, kan je de oplossing direct vallideren.
Gebruikt incompatibele plug-ins
Wanneer je deze foutmelding ziet, gebruikt je website plugins, die de meeste webbrowsers niet ondersteunen. Zorg er in dit geval voor dat je modernere webtechnologien gaat gebruiken.
Tip: Gebruik de website: caniuse.com om te achterhalen welke programmeertalen elke webbrowser ondersteund.
Viewport is niet ingesteld
Wanneer je deze foutmelding ziet, heeft je website geen viewport. Omdat je website deze meta tag mist, kan je website niet op de juiste manier op verschillende schermgrotes ingeladen worden. Bekijk het voorbeeld hieronder:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>Viewport is niet ingesteld op ‘device-width’
Wanneer je deze foutmelding ziet, heeft je viewport een waarde “fixed-width“. Dit zorgt er voor dat je website niet aangepast kan worden aan verschillende schermformaten. Je kunt deze fout verhelpen door een responsive design te gebruiken voor de pagina’s van je website en de viewport zo in te stellen dat deze overeenkomt met de breedte van het device.
Content breder dan scherm
Wanneer je deze foutmelding ziet, moet je gebruiker horizontaal scrollen om het totaal overzicht te zien. Vaak wordt dit veroorzaakt door CSS regels waarin absolute waarders worden gebruikt. Oplossing: relatieve breedte en positiewaarden in j e.css gebruiken en ervoor zorgen dat je afbeeldingen schaalbaar zijn.
Tekst te klein om te lezen
Wanneer je deze foutmelding ziet, is de tekst te klein om te lezen en dwing je je bezoeker om in te zoomen op de tekst (dat is niet mobielvriendelijk). Je kan dit oplossen door je teksten te vergroten en ervoor te zorgen dat dit goed zichtbaar is in verhouding met de viewport.
Klikbare elementen te dicht bij elkaar
Wanneer je deze foutmelding ziet, staan menu elementen of je “call to action” buttons te dicht bij elkaar.
Je kunt deze fouten verhelpen door ervoor te zorgen dat knoppen en navigatielinks een goed formaat hebben met genoeg ruimte eromheen, zodat ze ook werken voor mobiele bezoekers.
SEO-vraag?