De Mobile First Index van Google komt eraan. Deze update houdt in dat Google zijn zoekresultaten gaat baseren op de mobiele versie van websites in plaats van op de desktop versie. Google heeft hiervoor gekozen om het aantal bezoekers dat zoekt via mobiel het aantal bezoekers dat zoekt via desktop heeft overschreden. Op deze manier kunnen zij relevantere websites tonen aan de grootste gebruikers groep. Google gaat hier geen aparte index voor maken. Dit betekent dat als je geen mobiele website hebt die geschikt is voor deze nieuwe index er een grote kans is dat je posities zullen dalen. Het is dus belangrijk om een antwoord op de vraag te vinden: Is mijn mobiele website geschikt voor de Mobile First Index?

Google heeft aangegeven dat er drie verschillende soorten mobiele websites zijn die geschikt zijn voor de nieuwe index:

  • Dynamische websites
  • Responsive websites
  • Mobiele websites met een m. domein

Hieronder zie je per configuratie de verschillen tussen de mobiele websites.

configuratie mobiele websites

Dynamische websites

Een dynamische website gebruikt dezelfde URL ongeacht het apparaat waarop de website wordt bezocht. Echter genereert het wel een andere HTML-versie aan de hand van het apparaat. Een dynamische website kan je in de browser als volgt herkennen:

Pas het formaat van de browser aan en maak de browser steeds kleiner. Zodra de website op een bepaald punt niet meer kan mee veranderen is het naar alle waarschijnlijkheid een dynamische website. Om er zeker van te zijn controleer je ook de mobiele website. Deze zal er anders uitzien dan de desktop website.

voorbeeld dynamische website

Een voorbeeld van een dynamische website is Coolblue:

De mobiele website:

Coolblue dynamische mobiele website

De desktop website:

Coolblue dynamische desktop website

Responsive websites

Een responsive website gebruikt deze URL ongeacht het apparaat waarop de website wordt bezocht. Daarnaast draaien de mobiele- en desktop website op dezelfde HTML-versie. Een responsive website kan je in de browser als volgt herkennen:
Pas het formaat van de browser aan maak deze steeds kleiner. Een responsive website zal volledig mee veranderen met de resolutie van het scherm. Daarnaast past de website zich aan op het apparaat waarop de website bekeken wordt.

voorbeeld responsive website
Een voorbeeld van een responsive website is onze eigen website.

De mobiele website:

Search Signals responsive mobiele website

De desktop website:

Search Signals responsive desktop website

Individuele mobiele websites – m. domein

Een individuele mobiele website heeft twee verschillende URL’s voor de mobiele- en desktop versie. Er is een mobiele URL: m.voorbeeld.nl en desktop www.voorbeeld.nl. Deze websites draaien dan ook beide op een verschillende HTML-versie. Een website met een individuele mobiele website kan je als volgt herkennen:

Je kan bij dit soort websites het formaat van de browser aanpassen. Maar bij deze websites past de desktop versie zich net zoals een dynamische website tot een bepaald punt aan, aan de grootte van het scherm. Om te controleren of je op een individuele mobiele website bent kunt je het beste op je telefoon naar de website gaan en de URL controleren. Begint de website met ‘m.’ dan heb je een individueel mobiel domein.

voorbeeld individuele mobiele website

Een voorbeeld van een individuele mobiele website is Facebook.

De mobiele website:

Facebook mobiele website

De desktop website:

Facebook desktop website

Geschikt voor Mobile First Index?

Alle drie de bovenstaande websites zijn geschikt voor de Mobile First Index. Google heeft aangegeven dat een responsive website het eenvoudigste is om mee te werken. Heb je een van deze websites? Dan ben je goed op weg, maar er zijn nog wel een aantal voorbereidingen die je moet treffen voordat de nieuwe index komt.

Hoe bereid ik mijn website voor op de Mobile First Index?

Je bent goed op weg als je een van bovenstaande websites hebt, maar er zijn een aantal actiepunten noodzakelijk om je goed voor te bereiden op de nieuwe index. Hieronder staan de to-do’s per website

To-do bij een dynamische website

  • Je moet het volgende toevoegen in de HTTP-header: Vary: user-agent (hiermee geef je aan dat de website zich moet aanpassen aan het apparaat waarop het wordt bezocht)
  • Zorg dat de user-agent-tekenreeksen worden geïdentificeerd

to do dynamische website

  • Verhoog de laadsnelheid van de website voor een betere gebruiksvriendelijkheid

To-do’s bij een responsive website

  • Gebruik de tag Meta name = “viewport” om de browser ervan op de hoogte te brengen hoe de content moet worden aangepast

to do responsive website

  • Zorg dat afbeeldingen niet worden geblokkeerd
  • Zorg dat codes van JavaScript en CSS niet worden geblokkeerd
  • Verhoog de laadsnelheid van de website voor een betere gebruiksvriendelijkheid

To-Do’s bij een mobiele website dat draait op een m.domein

  • Geef de relatie tussen de mobiele- en desktop versie van je website aan door middel van de rel=”canonical” en rel=”alternate” tags.

to do mobiele website

  • Stel een 301-redirect in tussen de mobiele en desktop pagina’s op basis van de user-agent. Hiermee zorg je dat als de bezoeker op de desktop is de mobiele URL intypt, hij een redirect krijgt naar de desktop URL van de website.
  • Verhoog de laadsnelheid van de website voor een betere gebruiksvriendelijkheid

Kom niet voor verrassingen te staan

Een goede voorbereiding is essentieel om jouw website geschikt te maken voor de nieuwe Mobile First Index. Pas onze tips toe en laat weten hoe het ging in de comments!