Je bent hier: Home » SEO » Wat is AMP en hoe helpt het jouw mobiel verkeer en SEO?

Wat is AMP en hoe helpt het jouw mobiel verkeer en SEO?

AMP is de afkorting voor Accelerated Mobile Pages. Deze webpagina’s zijn niet gebouwd voor desktop-bezoekers maar voor mobiel verkeer. Er wordt bij AMP dus vertrokken vanuit de mobiele schermen. Dat is om het steeds grotere percentage van mobiel verkeer tegemoet te komen: meer dan 1/3 van internetbezoekers surft mobiel. Het is bovendien ook goed voor je SEO, want Google geeft AMP voorrang op traditionele webpagina’s bij mobiel zoeken.

Hulp nodig bij digital marketing?

Breng je digital marketing in topvorm.
Leer je bedrijf kennen vanuit een marketing-oogpunt.
Pas strategieën toe die werken voor jou.

Waarvoor dient het?

Het doel van AMP is om websites sneller te doen laden. Want als een website niet binnen de 3 seconden laadt, haakt 40% van de internetgebruikers al meteen af. Laadsnelheid wordt vaak geoptimaliseerd voor desktop, maar niet altijd voor mobiel verkeer. Het is niet moeilijk om de snelheid van je website te testen, daar bestaan tools voor.

Stel dat jouw website ontworpen is met heel wat interactieve elementen, dan wordt een AMP-versie aangeraden voor mobiel verkeer. Je moet je volledige website dan niet omgooien, maar je gaat een uitgeklede versie maken.  Daardoor zullen je pagina’s sneller laden en zullen je bezoekers langer op je website blijven.

Waarom is het goed voor SEO?

Bovendien heeft dit alles ook een effect op je SEO. Google zal jouw AMP-website namelijk hoger in de zoekresultaten plaatsen wanneer iemand mobiel zoekt. Die geoptimaliseerde ervaring voor mobiel verkeer, verbetert jouw ranking bij het mobiel zoeken! Google geeft deze pagina’s aan met een kleine bliksemschicht in de mobiele zoekresultaten.

AMP voor mobiel SEO

Technisch bekeken

Zoals we in inleiding al vermeld hebben, zijn Accelerated Mobile Pages geoptimaliseerd voor mobiele schermen. Naast je desktop-pagina bouw je dus een aangepaste HTML-versie met enkel statische content. Daardoor laden ze veel sneller en zijn ze ideaal voor mobiel verkeer. Die laadsnelheid is essentieel voor de gebruikerservaring van bezoekers, en daarom de grootste ranking paramter in Google.
Het maakt niet uit hoe inhoudelijk of technisch kwalitatief je website is, als hij traag laadt zal je nooit goed scoren op vlak van zoekmachineoptimalisatie.

AMP gebruiken doe je met AMP HTML, een open source framework ontworpen door Google. Het bevat aangepaste HTML-componenten die perfect zijn om mobiele webpagina’s te ontwikkelen die snel laden. Je gaat dus alle dingen die je website kunnen vertragen eruit halen. Denk daarbij aan formulieren, standaard JavaScript, iframes, advertenties, een deel van je tracking, … De manier waarop deze pagina’s laden is ook anders dan bij een desktop website. Ze worden namelijk volledig gecached. Vertragende bestanden zoals foto’s, video’s en advertenties worden ook niet meteen wanneer de pagina opent in zijn geheel geladen. Ze zullen pas gedownload worden wanneer er tot op die plaats gescrollt wordt. Wil je weten hoe AMP’s kan maken op jouw website? Google heeft alle informatie daarover gebundeld onder het AMP Project.

AMP in WordPress gebruiken

Werken met Accelerated Mobile Pages in WordPress is eenvoudig. Ga naar je WP Admin dashboard en installeer en activeer de AMP plugin. Meer informatie over hoe een WordPress-plugin installeren, vind je in ons eerdere blogbericht.

AMP voor WordPress

Vervolgens ga je naar Appearance > AMP om je pagina’s te personaliseren. Daar kan je header tekst en achtergrond aanpassen en het kleurschema instellen. Zodra je dat gedaan hebt, kan je terugkeren naar je plugin. Daar zie je nu hoe jouw website eruitziet op mobiele toestellen. Als je graag wil weten hoe de berichten op je website eruitzien in de AMP-versie, dan kan dat eenvoudig. Surf naar het bericht in kwestie en voeg /AMP/ toe achter je URL. Zo zie je de vereenvoudigde mobiele pagina.

Wil je nog meer personalisatie mogelijkheden? Dan heb je nog een bijkomende plugin nodig: Glue for Yoast SEO & AMP. Deze kan je ook downloaden en activeren vanuit je WP Admin dashboard > plugins.

Glue for Yoast SEO & AMP

Nu zal je in je Admin dashboard onder SEO het tab AMP zien staan. Daar kan je de AMP-versie aan- of uitzetten voor berichten, pagina’s en media bestanden. Onder “Design” kan je een icoontje kiezen voor jouw AMP-versies, een standaard beeld kiezen voor berichten zonder beeld, en je kleuren aanpassen. In AMP’s wordt Google Analytics over het algemeen beperkt tot het hoogst noodzakelijke om de laadtijd van je pagina niet te beïnvloeden. In het derde tabblad “Analytics” kan je jouw Google Analytics code invoegen om toch volledige Analytics te verzamelen. Vergeet alles niet op te slaan!

Als je nu toch 404 errors krijgt bij het testen van de toevoeging /amp/ bijvoorbeeld, wil dat zeggen dat nog niet al je AMP-instellingen opgeslagen zijn. Ga naar je WordPress instellingen en bewaar de veranderingen in het Permalinks menu. Je hoeft daar niets aan te passen, enkel op de bewaarknop drukken zodat je ingevoerde instellingen bewaard en doorgevoerd worden.

Vijf AMP-tips voor jouw website

1. Asynchrone scripts

Met asynchrone scripts maak je je website sneller. Een synchroon script zorgt ervoor dat alle tekst, beelden en advertenties op hetzelfde moment gedownload worden. Een asynchroon script daarentegen laadt enkel de meest essentiële elementen. De rest wordt pas gedownload wanneer de bezoeker in de buurt komt.

2. Meet externe bronnen statisch

Gebruik je externe bronnen zoals afbeeldingen, advertenties of iframes op je webpagina? Zorg er dan voor dat ze statisch gemeten worden: zet de afmetingen ervan in je HTML zodat hiermee rekening gehouden kan worden tijdens het downloaden en laden.

3. Aangepaste lettertypes

Kies een weblettertype dat optimaal is aangepast aan mobiele schermen zodat het lettertype downloaden niet voor vertraging zorgt. Waar het lettertype bij een gewone pagina pas als laatste wordt gedownload, doet AMP dit al bij het begin.

4. Rangschik externe bronnen volgens prioriteit

Geef aan welke de belangrijkste externe bronnen zijn. Zoals al gezegd, worden niet alle beelden, video’s, advertenties, … tegelijkertijd gedownload. Geef daarom in je HTML aan welke externe bronnen het belangrijkste zijn: de bronnen die je bezoeker als eerste zal gaan zien. Dat wordt dan eerst gedownload en pas tijdens het scrollen wordt de rest geladen.

5. Link intern tussen AMP- en desktop-versie

Hoogstwaarschijnlijk zal niet elke pagina van jouw website een AMP-versie krijgen. Zorg er daarom voor dat je altijd verwijst naar de desktopversie, of de responsive mobiele versie van je website. Deze interne links zijn enorm handig voor de gebruiker die verder wil surfen, en ze zijn bovendien ook een boost voor de SEO van jouw pagina’s. We hadden het in een eerder blogbericht al over linkbuilding tips.

Dominic Heselmans is een van Europa's meest gepassioneerde online marketingexperts. Nadat hij ervaring opdeed bij verschillende bedrijven en digital agencies, besloot hij dat het ook anders en beter kon. Daarvoor moest hij dan wel zelfstandig een eigen bureau opzetten. Dat lukte dankzij intelligentie, inzicht en een innovatieve aanpak. Met zijn ondernemerschap leidde hij de afgelopen tien jaar talloze bedrijven door de jungle van digitale marketing. Zijn beproefde methodes maken groei mogelijk en transformeren gestagneerde bedrijven tot machines die oneindig veel waarde toevoegen aan hun markt! Een gesprek met zaakvoerder Dominic leidt zeker tot een energy-boost. Maar misschien wel belangrijker: Door een 1-op-1 gesprek van ondernemers onder elkaar, krijg je ideeën over hoe ook jouw bedrijf meer online succes kan realiseren.