Mobile-first indexing

Check je website op deze 10 punten

Is jouw website al klaar voor mobile-first indexing? Check je website op deze 10 punten

 

In mijn vorige blog heb je al kunnen lezen dat Google na anderhalf jaar testen en experimenteren, op 26 maart 2018 mobile-first indexing heeft uitgerold. Maar is jouw website hier al klaar voor? Met de onderstaande tips kun je dit controleren!

 

Hier de 10 tips:

 

Tip 1: Verifieer de mobiele website in Google Webmaster!

 

Google Webmaster is super handig wanneer je alles wil weten over jouw mobiele website. Het wordt namelijk steeds belangrijker dat jouw website geschikt is voor mobiele apparaten. Wil je weten of jouw website hiervoor geschikt is?? Dan kun je dit testen op de mobielvriendelijke test van Google. Is jouw website niet mobile friendly? Dan kun je hier in Google Search Console verder induiken. Dit doe je door naar Search Console te gaan.

 

Vervolgens klik je op ‘Zoekverkeer’ en kies je voor ‘Mobiele bruikbaarheid’. Daar vind je tips om de mobiele bruikbaarheid van je website te verbeteren. Pak deze punten zo snel mogelijk op, want mobiele websites met problemen, kunnen minder goede positie krijgen in de mobiele zoekresultaten.
 


 

Tip 2: Vergeet de structured data niet!

De structured data is een belangrijk onderdeel van een mobielvriendelijke website.  De structured data, ook wel rich snippets, ontstaat door content te markeren met een stukje code. Hiermee vertel je waar bepaalde content voor staat. Zo wordt deze data beter begrepen door de zoekmachine en kunnen de algoritmes makkelijker de content op de website op waarde inschatten. Je ziet dit vaak bij reviews of beoordelingen, zoals het voorbeeld hieronder.

 

 

Het kan voorkomen dat bepaalde structured data alleen op de desktopversie is geïntegreerd. Dit houdt in dat sommige rich snippets alleen op de desktop versie getoond worden en niet op de mobiele versie van jouw website. Dit gebeurt meestal bij mobiele websites die bereikbaar zijn via een subdomein. In 9 van de 10 gevallen zijn de rich snippets bij een responsive design goed geïntegreerd als deze ook al goed geïmplementeerd zijn op de desktop variant van je website. Het voordeel van rich snippets is dat je prominenter in de zoekresultaten verschijnt. Hierdoor val je meer op dan de concurrenten die dit niet doen.

 

De gestructureerde gegevens van jouw website kun je controleren via Search Console. Je kunt een overzicht vinden van de aanwezige gestructureerde gegevens via: ‘Zoekopmaak’ > ‘Gestructureerde gegevens’.


 

Tip 3: Controleer content op alle devices

Bedrijven vergeten vaak hun belangrijkste content te controleren op verschillende devices. Het kan natuurlijk voorkomen dat bepaalde content op jouw desktop versie wel goed getoond wordt, maar op de mobiele versie niet.

 

Ook kunnen er verschillen zitten tussen iOS, Android en Windows. Om te voorkomen dat belangrijke content niet goed wordt weergegeven, is het van belang de belangrijkste content van je website in kaart te brengen. Controleer daarna of deze content zowel op desktop als mobiel goed en duidelijk zichtbaar is. Denk naast tekst ook aan afbeeldingen en video’s.
  

Tip 4: Let op de menu-items

Een veelgemaakte fout is het gebruik van (dropdown) menu's met teveel links. Het nadeel hiervan is dat deze op mobiele devices vaak anders worden weergegeven dan op desktops. Soms verdwijnen er zelfs hele menu-items. Het is belangrijk dat alle pagina’s die bereikbaar zijn via de dashboard omgeving, ook goed bereikbaar zijn via de mobiele variant van je website.

 

Wil je controleren of het menu van je website overal goed werkt? Ga dan naar je website, klik op de rechtermuisknop en klik op ‘Inspecteren’. Vervolgens klik je linksboven ‘Toggle device toolbar’ (Google Chrome) of voer je de toetsencombinatie CTRL + SHIFT + M in. Hier kun je precies zien hoe jouw website eruit ziet op verschillende devices.
 

Tip 5: Controleer robots.txt

Maakt jouw website gebruik van een aparte mobiele website? Dan moet je het robots.txt-bestand controleren. Het kan namelijk voorkomen dat het bestand van de mobiele website verschilt van die van de desktop versie. Zorg ervoor dat het robots.txt-bestand geen van de websites uitsluit van de zoekresultaten.

 

Als je zoekmachines wil helpen om de verschillende websites beter te onderscheiden, dan raden we aan om de tag rel=canonical te gebruiken. Hiermee voorkom je dat dubbele content ontstaat of dat je pagina’s hun reputatiewaarde verliezen. Voor meer informatie kun je de support van Google raadplegen of contact opnemen met één van onze specialisten.
 

Tip 6: Zorg voor een snelle laadtijd

Door mobile-first indexing is het nu nog belangrijker dat je een snelle mobiele website hebt. Je wil de bezoekers namelijk niet laten wachten of onnodig veel data laten verbruiken. Dit kan nadelige gevolgen voor jouw website hebben en dat wil je natuurlijk voorkomen.

Wil je weten of jouw website geschikt is voor mobiele gebruikers? Test dit dan met de PageSpeed tool van Google. Eventuele verbeterpunten vind je ook op deze pagina.

 

Tip 7: De meest voorkomende fouten

De meest fouten die we tegenkomen op mobiele devices zijn: te kleine lettergrootte, te grote afbeeldingen en niet-bruikbare formulieren.

Dit is heel simpel te voorkomen door voor alle pagina’s een meta-viewport-element in de HTML-code toe te voegen. Deze geeft aan waarop de afmetingen en schaalbaarheid beheerd moeten worden. Hierdoor wordt de inhoud dynamisch aangepast aan verschillende schermformaten. Het meta-viewport-element ziet er als volgt uit: <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

 

Let op horizontaal scrolle

Bezoekers scrollen vrijwel altijd verticaal. Wanneer jouw website de bezoekers verplicht om horizontaal te scrollen of uit te zoomen, gaat dit niet ten goede van de gebruikerservaring. Dit gebeurt vaak wanneer een afbelding breder is dan de viewport. Er zijn een aantal manieren om dit te voorkomen:

  • Gebruik geen grote elementen met een standaardbreedte.

  • De inhoud op jouw website mag niet afhankelijk zijn van een specifieke viewport breedte.

  • Voeg CSS-elementen toe met breedte- en positiewaarden.

  • Pas CSS Media Queries toe. Zo worden ervoor kleine en grote schermen verschillende styling toegepast.

* Let op: Het kan natuurlijk zijn dat jouw design juist is gemaakt om horizontaal te scrollen. Hier zullen de algemene regels dan ook niet voor geleden.

 

Pas CSS Media Queries toe

Met de CSS Media Queries zorg je ervoor dat je CSS-stijlen kunt wijzigen op basis van kenmerken van het apparaat. Zo kunnen verschillende stijlen toegepast worden op zowel kleine als grote schermen.
 

Afbeeldingen, tekst en formulieren op verschillende devices

Afbeeldingen, tekst en formulieren kunnen op verschillende formaten ongeschikt zijn. Dit komt bijvoorbeeld doordat de kaders groter zijn dan de paginabreedte.

 

Dit heeft als gevolg dat afbeeldingen over elkaar gaan staan of buiten beeld vallen en tekst niet meer goed leesbaar is. Controleer dan ook altijd op verschillende devices of alle afbeeldingen goed zichtbaar zijn. Bekijk ook hoe de content er in verschillende browsers uitziet. Hoe pak je dit aan?

 

1 Pas de breekpunten aan op de inhoud en niet op basis van apparaten.

2 Begin op het kleinste apparaat en pak steeds een iets grotere afmeting.

 

Wanneer je een afbeelding toevoegt, mag deze niet te groot zijn. Dit vertraagt je website en verslechterd de gebruiksvriendelijkheid. En als er tekst in de afbeelding staat, moet je goed controleren of deze op alle apparaten goed leesbaar is.
 

Tip 8: Afzonderlijke mobiele- en desktop URL’s

Maak je gebruik van een internationale website die uit meerdere talen bestaat en maak je geen gebruik van een responsive design? Houd er dan rekening mee dat je de verschillende talen en/of websites op zowel desktop als mobiel goed moet koppelen.

 

Dit doe je door gebruik te maken van de rel=hreflang tag. Meer informatie vind op Google Support.
 

Tip 9: Knoppen en navigatie links te dicht bij elkaar

Knoppen en navigatie links op een mobiel worden anders gebruikt dan op een desktop. Waar je op een desktop meestal gebruik maakt van een muis en toetsenbord, gebruik je bij een mobiel device vaak je vingers of een styluspen.

 

Om te zorgen dat alle knoppen optimaal zijn ingesteld voor mobiele gebruikers, raden wij aan om de grootte van de klikbare elementen op minimaal 48 device-independent pixels te houden.

 

Voorbeeld van het optimaal instellen van klikbare elementen: Een icon van bijvoorbeeld Facebook kan maar 16 of 24 pixels groot zijn en zou je visueel ook graag zo laten om het ontwerp van je website niet in zijn geheel aan te moeten passen. Door een extra padding aan de klikbare elementen toe te voegen, voorkom je dat bezoekers mis klikken en een negatieve ervaring hebben op de website.

 

Daarnaast raden wij aan om tussen de verschillende klikbare elementen minimaal 8 pixels aan witruimte te plaatsen. Zo voorkom je dat bezoekers een verkeerde link of knop aanklikken. Dit geldt ook voor links die alleen uit tekst bestaan.

 

Benieuwd op welke punten jij jouw website nog kunt verbeteren? Bekijk de verbeterpunten in Google Search Console onder

‘Zoekverkeer’ en ‘Mobiele bruikbaarheid’.

 

Tip 10: Werkt alles op mobiele apparaten?

Wat vaak nog vergeten wordt, is dat ook video’s, de belknop en de routebeschrijving voor mobiele apparaten geoptimaliseerd moet worden.

 

Video’s Vaak zijn video’s erg ‘zwaar’. Door de grootte hebben ze vaak een langere laadtijd of beschikken ze over buttons die niet goed leesbaar zijn op mobiele apparaten. Daarom is het belangrijk om de juiste ondersteuning voor jouw video’s te gebruiken. Zo worden video’s die draaien op Flash niet meer afgespeeld. Maak daarom gebruik van moderne webtechnologieën zoals: Custom CSS of HTML5.

 

Houd er daarnaast rekening mee dat er ook verschillen zijn tussen de verschillende besturingssystemen IOS, Android en Windows Phone.

 

Maak je contactgegevens clickable

Natuurlijk staan je contactgegevens op je website. Maar om het voor de websitebezoeker nog makkelijker te maken om contact met je op te nemen, is het handig om een HTML-code toe te voegen aan je contactgegevens. Voeg de volgende code toe aan de code: <a href=”tel:088-1447799 ″>88-1447799</a>. Zo kunnen de bezoekers op de knop drukken en direct naar jouw bedrijf bellen.

 

Routebeschrijving

Alle smartphones beschikken over een GPS-functie. Hiermee kun je de bezoeker een route laten plannen naar jouw bedrijf. Dit doe je door een button te maken met: ‘Plan route’. De code die je gebruikt is: <a href=http://maps.google.com?q=Graaf%20engelbertlaan%2075%20Breda> Hiermee gaat de bezoeker direct naar de website van Google Maps. Met %20 geef je aan dat er een spatie tussen moet.

 

Zo. Als je bovenstaande tips uitvoert, is ook jouw website helemaal klaar voor mobile-first indexing. Mocht je hulp nodig hebben bij het optimaliseren van je website voor mobile-first indexing, aarzel dan niet en neem contact met ons op. Als online marketing bureau in Breda gaat EnoRm het liefst vandaag nog voor je aan de slag.

 

Download de Whitepaper

een seo strategie bepalen

Je leert in deze whitepaper hoe je een seo strategie uitzet, download de whitepaper vandaag nog en ga aan de slag met online marketing.

 

Klik hier

Stel ons een vraag

Hoe kunnen wij je helpen?