Google mobile first index, wat betekent dit voor uw website?

Is uw website al mobielvriendelijk of denkt u misschien dat klanten uw website niet op mobiel zullen bekijken? Niet alleen wordt het percentage mobiele gebruikers steeds groter en worden websites voor de eerste keer vaak snel even op mobiel bekeken. Ook voor Google wordt een mobielvriendelijke website steeds belangrijker. Door de komst van Google mobile first index zullen veel niet mobielvriendelijke websites waardevolle posities in Google verliezen. Lees nu of u ‘veilig’ bent of wat u kunt doen om uw website voor mobiel te verbeteren.

Wat betekent Google’s mobile first index?

Omdat het mobiele internet andere eisen aan een website stelt, heeft Google een tweede index voor de Google zoekmachine opgezet. Hierbij wordt een website niet alleen op de inhoud en het aantal inkomende links beoordeeld, maar ook op de mobiele gebruiksvriendelijkheid. Dit betekent dat een niet mobielvriendelijke website minder goed zal presteren binnen de Google mobile first index en dus lager zal ranken.

Veel website zijn in het verleden nog gemaakt voor het scherm van een desktop PC. In tegenoverstelling tot mobiel verschilt het gebruik van uw website via een desktop door:

• Veel meer ruimte. De breedte van scherm is meestal 3-4 keer groter dan op een mobiel. Hierdoor kan uw content over meerdere kolommen worden verdeeld.
• De aanwezigheid van een muis (of touchpad). Deze aanwijzer is veel preciezer dan de de wijsvinger op een mobiel beeldscherm.
• Een veel snellere internetverbinding. Hierdoor kunnen ook zware afbeeldingen of pagina’s zonder problemen op een desktop PC worden geladen.

Om ook voor de mobiele weergave van uw website een vergelijkbare ervaring als op een PC mogelijk te maken, moet uw uw website dus mobielvriendelijk zijn. Om te testen of uw website mobielvriendelijk is, heeft Google een tool ontwikkeld zodat u uw website kunt testen.

Kenmerken van een niet mobielvriendelijke website

Afhankelijk van uw website geeft Google’s mobielvriendelijke test een een aantal suggesties om uw website te verbeteren. De criteria waarop de test wordt uitgevoerd zijn op zich voldoende, maar wij adviseren u om uw website alsnog op de volgende kenmerken te controleren:

• Uw website is helemaal niet responsive. Er zijn nog steeds veel oude websites die niet zijn gemaakt voor mobiel of tablets. De viewport instelling ontbreekt, er is geen specifieke style informatie voor de verschillende apparaten aanwezig of er worden nog steeds tabellen voor het design van de website gebruikt.
• Het gekozen lettertype is te klein of slecht leesbaar. Een te kleine lettertype is niet goed leesbaar op elk scherm. Kies een grotere lettertype voor de mobiele weergave. Gebruik voor de algemene teksten altijd een standaard lettertype. Het contrast is ook belangrijk. Op mobiel is een zwarte tekst op een witte achtergrond het beste te lezen. Gebruik voldoende regelafstanden waardoor de tekst ook beter kan worden gelezen.
• De links of buttons zitten te dicht bij elkaar. Op een desktop PC werken bezoekers met een muis. Hierdoor is elke muisklik erg precies en kan een erg klein link-element alsnog worden aangeklikt. Op mobiel is er geen muis en gebruiken bezoekers vaak de wijsvinger. Zitten er twee of meer elementen te dicht op elkaar, dan is het zonder inzoomen niet mogelijk om te navigeren.
• Het laden van de website duurt te lang. Sommige mobiele bezoeker hebben te maken met minder snel internet. Het gevolg is dan dat een “zware” website veel tijd nodig heeft om te laden. Voorkom te zware afbeeldingen en optimaliseer uw website zodat deze toch snel wordt geladen. Snel website hosting zal zeker ook helpen.
• Tekstregels of website elementen zijn te groot voor een mobiel scherm. Het scherm van een mobiel is vaak niet veel breder dan ~350 pixels. Een lang woord met een te groot lettertype kan niet worden afgebroken een loopt zo buiten het scherm. Hierdoor moet de bezoeker verticaal scrollen om de gehele tekst te lezen. Hetzelfde geldt ook voor te grote afbeeldingen, video, tabellen en andere elementen.

Welke stappen moet ik nu ondernemen?

De Google mobile first index komt eraan. Voor veel websites gebeurt er niet veel. omdat er per website maar één versie bestaat en deze is voor veel websites al responsive. Heeft u naast een desktop versie ook een mobile versie van uw website, dan is er waarschijnlijk wel werk te verrichten. Lees hieronder welke stappen u per situatie nu moet ondernemen.

Uw website is nog niet responsive!

Niet elke ondernemer is overtuigd van het belang van een mobielvriendelijke website. Denkt u dat uw potentiële klanten uw website alleen via een desktop computer zullen bekijken? Dan raden wij u aan om nog eens goed rond te kijken. Er zijn genoeg situaties te bedenken waarin bezoeker snel even uw website op mobiel zullen bekijken om een eerste indruk te krijgen van uw onderneming. Heeft u geen mobielvriendelijke website, dan zal deze eerste indruk niet al te positief zijn.

Als u nog geen responsive website heeft, wordt het tijd om een van de volgende stappen te ondernemen:

• Is uw website al ouder en niet zo groot (dus minder dan 50 pagina’s)? Overweeg dan direct een nieuwe website. Een complete aanpassing voor mobiel is dan meestal niet voordelig.
• Heeft u een website die gebouwd is met WordPress? In dat geval is een nieuw thema een goede en voordelige oplossing.
• Heeft u een grote website met veel goede content waarmee u in Google tot nu goed wordt gevonden? In dit geval is een grotere investering zeker nodig. Lager uitstellen is geen optie.

U heeft zowel een website voor de desktop als ook een mobiele website

Verschilt de mobiele website qua inhoud van de desktop versie? Dan zal Google uw website in toekomst op basis van de mobile inhoud beoordelen en ranken. Een goede positie in de Google zoekresultaten kan dan verloren gaan als de pagina’s minder relevant zijn of als er pagina’s in de mobiele versie ontbreken. Is dat het geval? Onderneem dan de volgende acties (indien u beide versies wilt blijven gebruiken).

• Zorg ervoor dat alle belangrijke pagina’s voor zowel desktop als ook mobiel aanwezig zijn.
• Gebruik dezelfde content voor mobiel als ook desktop.
• Bestaan er pagina’s die uniek zijn voor uw mobiele website? Verwijder deze pagina’s en redirect de URL’s naar de juiste/nieuwe pagina’s.

U heeft al een responsive website

De kans is dus groot dat u de website voor mobile first indexing niet hoeft te veranderen. Controleer uw website alsnog op de volgende punten:

• Is de website volgens Google mobielvriendelijk (doe de test).
• Check eventuele issues die via de Google Search Console te vinden zijn en los deze op.
• Controleer uw website op verschillende mobiele telefoons en los eventuele problemen op.

Is een mobielvriendelijke website dan niet goed genoeg?

Heeft u de Google mobielvriendelijke test uitgevoerd en bevat het resultaat geen enkel verbeterpunt? Dan is uw website goed voorbereid voor de Google mobile first index. Voor de toekomst zal dit in veel gevallen niet genoeg zijn. Het aantal mobiele gebruikers groeit en er worden zelfs steeds meer aankopen via een mobiele telefoon gedaan.

Steeds meer zult u het advies tegenkomen dat de mobiele gebruikerservaring voorop staat.Het is tijd voor een ‘mobile first’ werkwijze!

Van mobielvriendelijk naar mobile first

Wilt u dat uw website ook in toekomst voor het mobiele internet goed presteert, dan is er naast een eenmalige optimalisatieslag ook een verandering in uw werkwijze nodig. “Vroeger” was het door een groot beeldscherm mogelijk zeer eenvoudig om content te plaatsen. Vandaag zien websites er niet alleen heel anders uit, maar zal de mobiele bezoeker uw website ook anders gebruiken. Mobile first betekent dus dat uw website primair voor de mobiele bezoeker wordt opgezet. Hoe ziet deze ‘mobile first’ werkwijze eruit?

Contentcreatie voor de mobiele website

Het mobile first idee begint eigenlijk al bij het schrijven van de webteksten en het kiezen van afbeeldingen:

• Zijn de zinnen niet te lang? Omdat het scherm van een mobiel erg smal is, loopt een lange zin al snel over 5 (of zelfs meer) regels, met het gevolg dat de informatie slecht te lezen is. Beter is om korte zinnen te schrijven en genoeg witregels te gebruiken.
• Klopt de documentstructuur? De juiste indeling met H1, H2 en H3 heading elementen was al belangrijk voor een webpagina die op een desktop werd bekeken. Door de kleine afmeting van een mobiel scherm worden vooral de heading elementen waargenomen. Ontbreken deze elementen, dan zal de bezoeker sneller het interesse in uw content verliezen en verder gaan naar de volgende website. Gebruik voor de headings aantrekkelijke en duidelijke teksten.
• Is de gekozen afbeelding ook goed herkenbaar op mobiel? Een grote afbeelding met tekst of kleine details wordt op mobiel misschien met maar 25% van de originele grootte getoond. Kies of maak afbeeldingen die voor beide schermen goed herkenbaar zijn.

Navigatie en applicatie onderdelen voor mobiel verbeteren

Niet alle onderdelen van uw website werken hetzelfde op mobiel. Sommige werken op mobiel helemaal niet, waardoor de bezoeker sneller geneigd is om de website te verlaten. Verbeter de volgende onderdelen van uw website voor een betere gebruikservaring:

• Uitgebreide formulieren. Hoe langer de formulieren, hoe lastiger en vervelender het wordt voor de mobiele gebruiker om deze in te vullen. Probeer uw formulieren te beperken op max. 5 velden per pagina of gebruik een multi-step formulier.
• Navigatie elementen. Mega menu’s en sidebars zijn top voor gebruik op een desktop PC, maar niet voor mobiel. Zorg daarom voor een goed werkende vervanging op mobiel en tablet. Slide-in en “hamburger” menu’s zijn voor mobiel een prima optie.
• Slideshow en image galleries. Naast de afmetingen van de foto’s werken ook de bedieningselementen van dit soort elementen op een mobiel vaak anders. Test deze elementen goed en gebruik een variant die op mobiel het “swipen” van de afbeeldingen mogelijk maakt.

Bedenk nieuwe methoden voor conversies

Conversie-elementen zijn een belangrijk onderdeel van uw website. U wilt natuurlijk dat uw website op mobiel minstens net zo goed converteert dan op een desktop PC. Met kleine aanpassingen maakt u de website geschikt voor de ongeduldige bezoeker die altijd met zijn mobiel onderweg is:

• Plaats call to action elementen in andere formaten. Een super grote button of banner neemt op mobiel snel een groot gedeelte van het scherm in. Hierdoor kan de bezoeker minder goed navigeren en ervaart hij de grote elementen als storend.
• Zorg voor minder afleiding tijdens de checkout en op andere belangrijke pagina’s. Door het kleine scherm van een mobiele telefoon adviseren wij maar één call to action element. Verlies een bezoeker niet, omdat u binnen een klein gebied te veel keuzes plaatst.
• Pas uw opt-ins en formulieren aan voor mobiel. Beperk het aantal handelingen per formulier op het minimum. Het invoeren van lange teksten of het kiezen van een waarde uit een lang select menu wordt op mobiel als niet prettig bevonden.

Enkele voorbeelden van goede mobiele websites

Ter inspiratie hebben wij een drietal websites geselecteerd die wij voor mobiel bijzonder goed vinden:

Mr. & Mrs. Watson (restaurant en shop website)

Het meest belangrijke element van een restaurant? De menukaart uiteraard. Voor de ongeduldige bezoeker is het belangrijk dat de menukaart snel te vinden is en op mobiel ook goed leesbaar is (zonder in of uit te zoomen). Helaas is er geen fotogalerij op de website, maar is de informatie (incl. foto’s) is toereikend om een goed beeld te krijgen van het restaurant. Update: Het restaurant is helaas gesloten, maar de website oogt nog steeds erg goed op mobiel.

Maisons du Monde (webwinkel voor meubels)

Ook via mobiel worden er dagelijks veel bestellingen geplaatst en zo is het voor een webshop een bijzondere uitdaging om via mobiel goed te presteren. De navigatie en foto’s zijn (ook voor mobiel) binnen een webshop uitermate belangrijk. Bij Maisons du Monde zijn er heel veel verschillende productcategorieën en opties beschikbaar, maar door de buttons onderaan de pagina, zijn deze altijd beschikbaar. De productpagina’s en de checkout zijn overzichtelijk en als klant weet je altijd waar je moet klikken.

Schouwburg Amphion (Theater Doetinchem)

Voor een Theater is het net zoals voor een normale webwinkel een belangrijke zaak dat er verkopen plaatsvinden. Zo is het bijzonder belangrijk dat de klant zijn favoriete theaterstuk snel kan vinden en bestellen. De live-search functie en het offpage navigatiemenu werken erg prettig en bieden de mogelijkheid om alle informatie of events te vinden. Zelfs op het kleine scherm van een mobiel. Voor een website van een theater is deze webapplicatie erg goed gelukt.

Accelerated Mobile Pages (AMP)

Zoekt u naar een nieuwe manier om uw belangrijkste content voor mobiel te optimaliseren? Bekijk dan een keer de mogelijkheden met AMP.

Accelerated Mobile Pages of AMP is en project dat door Google is opgericht om zo een standaard te creëren die op mobiel een nog snellere weergave mogelijk maakt. Binnen uw website wordt dan van elke normale versie, voor mobiel ook een AMP versie aangemaakt. De AMP versie wordt dan via een Content Delivery Network (CDN) aan de bezoeker aangeboden.

Wat zijn de voordelen?

• Een supersnelle website, o.a. door het gebruik van de CDN. Alle Javascript bestanden worden asynchroon geladen en vertragen zo niet de laadtijd van de webpagina’s.
• Bijzondere weergave in Google. Heeft uw website een AMP versie dan wordt deze in de Google resultaat getoond. Dit gebeurt o.a. samen met het AMP symbool. Heeft u een nieuws site? Dan bestaat er de kans dat uw nieuwste bericht in de nieuwsbox bovenaan in de Google resultaten wordt getoond.
• Uw website gebruikt minder bandbreedte omdat alle bestanden via een externe locatie (CDN) worden afgeleverd.

Wat zijn de nadelen?

• Naast uw mobielvriendelijke website, bestaat er technisch gezien een tweede versie van uw website. Zijn er wijzigingen in uw website dan moet u deze voor de normale en de AMP versie toepassen.
• Door AMP zijn er beperkingen m.b.t. de functionaliteiten in de AMP versie van uw website. Leuke slideshows en andere dynamische elementen zijn met AMP vaak niet mogelijk (of moeten apart worden geprogrammeerd).
• Niet alle pagina’s zullen als AMP versie kunnen worden aangeboden. Hierdoor verschilt vaak de weergave van de site t.o.v. van de normale versie. Door de switch tussen de versies is er ook sprake van een vervuiling in de website statistieken.

AMP voor uw WordPress website

Voor WordPress websites zijn er een aantal plugins waarmee een eenvoudige AMP versie van uw website mogelijk is. De plugin dat door het AMP project zelf wordt onderhouden, gebruiken wij ook voor onze klanten. Net zoals bij een WordPress child theme kunt u voor het AMP theme uw eigen bestanden aanmaken of aanpassen. Tip! Gebruik dan ook de plugin Glue voor Yoast SEO & AMP, hiermee wordt de AMP versie iets verbeterd en beschikt u over extra functies.

Is AMP ook geschikt voor uw website?

Dit is afhankelijk van uw wensen en de website. Heeft u vooral diensten pagina’s met veel interactieve elementen, dan is het met AMP vrij kostbaar om deze om te zetten. Voor een blog is AMP veel beter geschikt. Hiervoor hebben wij AMP eerder ook gebruikt, maar omdat mensen vanaf de AMP versie regelmatig op onze “normale” dienstenpagina’s terecht komen, vonden wij de gebruikservaring niet optimaal. Na een langere testperiode hebben wij ervoor gekozen om AMP niet te gebruiken.

Welke stappen onderneemt u als eerst voor mobile first?

Voor veel website eigenaren zal de overgang naar de mobile first index geen grote gevolgen hebben. Heeft u recentelijk een bericht via de Google Search Console ontvangen? Dan adviseren wij u om uw website even extra te controleren.

• Voer Google’s mobielvriendelijke test uit en volg hun advies op. Alleen een 100% mobielvriendelijk resultaat is acceptabel!
• Heeft u nog geen responsive website? Overweeg dan de bouw van een nieuw website. Met WordPress zijn de kosten voor een nieuwe website niet zo hoog.
• Plaatst u nieuwe content of functies? Controleer dan eerst of de aanpassing goed staat op uw mobiele telefoon. Probeer ook uw webteksten voor mobiel te schrijven.

…of laat uw website door ons bekijken

Vindt u het lastig om te beoordelen welke vervolgstappen voor uw website nodig zijn en wilt u onnodige risico’s meiden? Vraag dan gelijk onze site check aan.

Gepubliceerd in: Website verbeteren