Mobielvriendelijke website

Had jij 15 jaar geleden verwacht dat mobiel belangrijker zou worden dan de desktop? Ik niet! Als we de markt cijfers mogen geloven, is inmiddels meer dan de helft van je website verkeer afkomstig van een mobiele telefoon. Ook bij Google is dit niet onopgemerkt gebleven. Sinds 2015 zijn ze daarom begonnen met een “mobiel first index”. Dit houdt in dat Google zowel op desktop als op mobiel, de mobiele indexering gebruikt.

In deze blog leg ik je uit: hoe je je mobiele website kan optimaliseren (voor SEO), hoe je hem gebruiksvriendelijk maakt en testen we je website voor Google!

Wat is de mobile first index?

Bij het bepalen van een zoekresultaat, gaat Google uit van de mobiele versie van je website, i.p.v. de desktop versie. Google maakt gebruik van dezelfde index, maar leest het alleen vanaf een mobiel apparaat uit. In het begin, had dit alleen betrekking op de mobiele zoekresultaten. Inmiddels geld* dit voor zowel de desktop als de mobiele zoekresultaten.

* 21 juli 2020, berichte Google het volgende:
“De meeste websites zijn inmiddels over gezet naar de mobile first index. Daarnaast wordt elk nieuw domein hier standaard aan toegevoegd. Ons huidig plan was om de overige websites in september 2020 ook over te zetten. Maar vanwege de onzekere tijden door Covid19, is dit nu uitgesteld naar maart 2021.”

Mobielvriendelijke test Google

Wil je testen of Google je website als mobiel vriendelijk ziet? Gebruik dan de mobielvriendelijke test van Google. Door je URL hier in te vullen, kom je er al snel achter of Google ergens tegen aan loopt en of je website als “mobiel vriendelijk” wordt beschouwd. Verschijnt dit (zie afbeelding hieronder) in je scherm, dan zit je goed!

Let op: Ondanks dat je website als mobiel vriendelijk beschouwd wordt, kan Google wel nog tegen bepaalde problemen aanlopen ( zie waarschuwing links boven). Mijn advies: loop hier samen met je webdeveloper doorheen en los het op 🙂

Is heel je website mobiel vriendelijk? Bekijk dan periodiek je mobiele bruikbaarheid rapportage in Google search console. Op die manier blijf je “in control”.

Aandachtspunten voor Mobiele SEO

Mobielvriendelijk design

Er zeker van zijn dat je layout mobiel vriendelijk is? Kies dan voor een responsive design. Deze techniek zorgt er voor dat het formaat van de website zich aanpast aan de individuele gebruiker. Er zijn ook andere opties zoals, dynamic serving en een aparte mobiele website. Echter raad Google dit niet aan om te gebruiken.

Het voordeel van een responsive design: 

• Geen aparte urls, maar gewoon een url voor dezelfde content
• Minder duplicate content issues die evt. opgelost dienen te worden
• De beste user experience
• De content op je website is eenvoudig te lezen. Als er alleen een desktop versie aanwezig is, moet je de hele tijd in en uitzoomen (onhandig!)
• Google hoeft je webpagina maar een keer te crawlen waardoor het meer tijd overhoudt voor andere pagina’s

Tip: Maak je gebruik van een responsive design? Vergeet niet de viewport content meta tag in de broncode van je website te plaatsen.

Mobiele website snelheid

Google adviseert de snelheid van je mobiele website onder 1 seconde te krijgen. Dit is een uitdaging, maar zeker de moeite waard (zie afbeelding hieronder).

Tip: Je verdiepen in de website snelheid van je website? Lees dan mijn blog: websitesnelheid te verbeteren.

Optimaliseer je content voor mobiel

Een mobiele gebruiker heeft over het algemeen minder geduld en wil eenvoudig en snel door je content heen kunnen lezen. Let bijvoorbeeld op de grote van je lettertype en het formaat van een afbeelding en het contrast tussen je tekst en de achtergrond van je website. Verder is het voor google belangrijk dat: de content op je desktop overeenkomt met de mobiele versie en het uitlezen van content niet afhankelijk is van gebruikers interacties (door bijvoorbeeld on-click of on-scroll events).

Let op: mobiele websites die gebruik maken van “dynamic serving” of een aparte url structuur hanteren, let er dan op dat er geen verschillen in bijvoorbeeld je title tag en meta description ontstaan. Goed om te weten: Het maakt niet uit dat er content onder een “lees verder” button verdwijnt. Wel van belang dat deze tekst in de broncode terug te vinden is 😉

Gebruik structured data

Door gebruik te maken van structured data, wordt de kans op een future snippet vergroot. 

Zeker als je via je mobiel naar Google gaat, nemen deze “feature snippets” een groot gedeelte (boven de vouw) in beslag. Let op: Bij het toepassen van structured data blijft het ook belangrijk dat de opmaak overeenkomt met je desktop versie.

Interne linkstructuur

Zorg dat al je pagina’s goed bereikbaar zijn. Pagina’s die o.b.v. gebruikers interacties bereikbaar zijn (door bijvoorbeeld on-click of on-scroll events), worden niet uitgelezen door Google. Van belang is dat elke pagina met een ahref link te bereiken is.

Gaat het fout? Je bent niet de enigste. Ook grote webshops zoals Aliexpress, gingen hier vermoedelijk de mist in (zie pijl in de afbeelding hieronder). Veel mobiele pagina’s waren in 2018 niet bereikbaar voor Google. Gezien de groeicurve na het incident, lijkt het inmiddels weer opgelost te zijn.

TIP: Wil je de techniek van je website verder verbeteren voor SEO? Bekijk dan mijn Technische SEO checklist

Ziet Google alles op mijn website?

Je wel eens afgevraagd of Google alles ziet wat jij ziet? Ik wel! Om er achter te komen, kan je het volgende doen:

1. Render je pagina in de “mobielvriendelijke test” tool van Google.
2. Kopieer de broncode uit de mobielvriendelijke test
3. Plak deze code in de tool: Diffchecker
4. Kopieer je DOM (zie afbeelding hieronder)
5. Plak de “outer HTML” in de Diffecheker tool
6. Klik op vergelijk en zoek de verschillen 😉

Overige aandachtspunten voor SEO

• Pop ups op je website maken het voor je website bezoeker lastig om de content te lezen. Google heeft dit al vaker aangegeven in hun blog en recent in een Google hangout.
• Gebruik geen flash voor video en gifs maar in plaats daarvan een html5 opmaak. Flash wordt namelijk niet ondersteund door Google
• Blokkeer geen afbeeldingen, javascript, css en de mobiele user-agent in je robots.txt
• Zorg ervoor dat je afbeeldingen een alt tag bevatten.
• Zorg ervoor dat je heading structuur overeenkomt met je desktop versie.
• Controleer je canonical tags wanneer je gebruik maakt van een aparte mobiele url.
• Wanneer je een aparte mobiele url gebruikt en verschillende internationale websites hebt, is het belangrijk dat de hreflang tag van mobiel naar mobiel verwijst en van desktop naar desktop.

Bonus: Mobiel bellen in 1998

Website geoptimaliseerd voor de mobiele gebruiker? Bekijk dan het interview hier onder eens 😉 De techniek ontwikkeld zich razend snel. Dat zal de komende jaren niet veranderen!