Snelheidsmeter met hoge snelheid

Via Accelerated Mobile Pages (AMP) helpt Google websites de laadtijd te verlagen en hun ranking in Google te verhogen. AMP gebruikt minder code en presenteert mobiele gebruikers een uitgeklede pagina. Er zijn plugins voor de implementatie. Maar daarmee is niet alles geregeld. AMP vraagt aanpassing in de codes voor Google Analytics en advertenties. Ook leidt het tot een kortere bezoekduur en hogere bounce rate. Pas het daarom niet zomaar overal toe. Gelukkig zijn er wel makkelijk te gebruiken tools die de AMP op je site valideren en verbeterpunten aangeven.

Wat zijn Accelerated Mobile Pages (AMP)?

Accelerated Mobile Pages zijn webpagina’s die geoptimaliseerd zijn om zo snel mogelijk te laden op mobiele apparaten. Een AMP-pagina is een uitgeklede versie van de originele pagina. Dit betekent dat een AMP-versie minder functionaliteiten heeft. Vergelijk het met een raceauto. Om sneller te zijn worden raceauto’s gestript van alle mogelijke gewicht. De stoel van de bijrijder gaat er uit, net als het dashboard, etc. De auto wordt sneller, maar minder comfortabel.

Content en links voor Accelerated Mobile Pages

Vervang het gewicht voor een raceauto door laadtijd voor een website. Op een AMP zijn alle codes die de laadtijd vertragen gestript. Daarnaast verhoogt Google de snelheid door AMP op te slaan (te cachen) op haar eigen servers. Dit klinkt mooi, maar heeft ook wat gevolgen om over na te denken. De informatie hoeft hierdoor niet eerst te worden opgehaald bij de aanbieder. Hierdoor zijn niet alle pagina’s geschikt als AMP:

  • ongeschikt: pagina’s met veel interactieve elementen, zoals reserverings- of reviewpagina’s
  • geschikt: pagina’s die men vooral leest, zoals met artikelen en/of nieuws

Op de meeste sites komen beide soorten pagina’s voor. Het is geen probleem om vanuit AMP te linken naar een gewone pagina en omgekeerd. Google zelf heeft AMP ook in eerst instantie gelanceerd voor alleen nieuwscontent. Maar sluit niet uit dat daar in de toekomst andere vormen van content bijkomen.

Verhoogt AMP je Google Ranking?

Een snelle laadtijd verhoogt de gebruikerservaring en betekent een hogere positie in Google. Met meer bezoek en conversie als gevolg. Een laagdrempelige manier om pagina’s sneller te laten laden is het gebruik van AMP. Google zegt dat gebruik van AMP geen rankingfactor is. Het zou dan alleen indirect effect hebben op de ranking. Namelijk doordat het de laadtijd van de website versnelt.

Er zijn echter ook signalen dat AMP wel degelijk een rol speelt of gaat spelen in de Google ranking. Het is nog even gissen. In Amerika domineren accelareted mobile pages sinds vorig jaar de mobiele zoekresultaten rondom het nieuws. In Nederland loopt het nog niet zo’n vaart, al neemt ook hier het aandeel van AMP in de zoekresultaten toe. Zoals hieronder is te zien:

AMP domineert zoekresultaten VS en in mindere mate Nederland

AMP Pagina’s in zoektresultaten nieuws VS en Nederland

Waar het gaat om inzet van AMP om je Google ranking te verbeteren, kunnen er twee redenen zijn om dat te doen:

  • je gaat ervan uit dat AMP al een rol speelt als rankingfactor, of dat gaat doen
  • je wilt de laadtijd van je website versnellen.

Met betrekking tot het twee punt is het goed te vermelden dat AMP niet de enige manier is om een website sneller te maken. Met genoeg technische kennis kan dat ook zonder AMP. Een volledig geoptimaliseerde pagina is zelfs sneller dan een AMP-versie. Wel is AMP een laagdrempelige manier om de laadtijd te verbeteren als je de kennis niet in huis hebt.

Voordelen AMP in social media

Het protocol voor Accelerated Mobile Pages is open. Sociale netwerken als Facebook, LinkedIn, Twitter en Pinterest gebruiken het ook. Met de inzet van Accelerated Mobile Pages versnel je ook de laadtijd voor bezoekers van social media. Wat weer positief is voor je bezoekersaantallen. Al geldt ook hier de opmerking dat je met genoeg technische kennis je site sneller kunt maken dan met AMP.

Verschil tussen responsive en AMP

De meeste websites zijn responsive. Wat is dan het verschil tussen een responsive website en een site met AMP? Mijn website is responsive. Dat wil zeggen:

  • de elementen passen zich aan naar de omvang van het scherm
  • de hoeveelheid code die wordt geladen blijft bij alle schermgroottes hetzelfde

Wat AMP doet is:

  • de hoeveelheid code verkleinen als je de site bekijkt op een mobiel apparaat

AMP laat veelal de tekstuele elementen intact, en ‘bespaart’ op interactieve- en opmaakelementen. Wat het effect is verschilt per site. Om een indicatie te geven hieronder screenprints van een blogartikel op mijn site. In beide gevallen vanaf een mobiele telefoon. De eerste is met AMP, de tweede zonder.

Screemshots van blogartikelen op Accelerated Mobile Page

Blogartikel met Accelerated Mobile Pages (AMP)

Screemshots van blogartikelen op responsive pagina zonder AMP

Blogartikel gewone responsive pagina

Zoals verwacht gaat met AMP vooral opmaak verloren. Herkenbare elementen uit mijn huisstijl zijn verdwenen. Dat leidt er dan weer wel toe dat bezoekers met AMP maar drie keer hoeven te scrollen om de eerste alinea te lezen, waar dit bij de gewone responsive pagina vier keer is.

AMP effect op doorkliks en conversies binnen de site

AMP is erg gericht op snelheid. En het vraagt daarbij best wat offers ten aanzien van uiterlijk en interactie. De reden waarom Joost de Valk, de man achter de WordPress Plugin Yoast, wel wat kritische kanttekeningen plaatst bij AMP. Bij mijn blog leidt AMP ertoe dat:

  • actiebuttons veranderen in nauwelijks te herkennen links
  • suggesties voor andere artikelen niet worden getoond
  • de mogelijkheid tot reageren niet wordt weergegeven
  • het formulier om in te schrijven voor de nieuwsbrief niet wordt getoond
  • de optie om te zoeken op trefwoord in de site vervalt
  • advertenties niet zichtbaar worden voor de bezoeker

Kortom: AMP zorgt wellicht wel voor meer doorkliks naar je site. Het maakt het ook een stuk uitdagender om de bezoeker vervolgens op je site te houden.

Advertenties tonen in Accelerated Mobile Pages

Bovenstaande punten ontstaan doordat AMP niet standaard scripts van derden laadt. En daarmee ook geen advertentiescripts. Om het weergeven van advertenties toch mogelijk te maken, is er het ‘amp-ad’ element. Dit laadt de JavaScript van de advertentienetwerken in een Iframe sandbox. Nadeel is dat niet alle advertentienetwerken op deze techniek zijn aangesloten. Om advertenties te kunnen tonen op AMP moet je een stukje code aan je html toevoegen.

AMP gebruiken op je eigen website

Voor de bekende CMS-systemen zoals Drupal, Typo3 en WordPress zijn AMP-plugins beschikbaar. Voor deze website gebruik ik de WordPress plugins AMP van Automatic (de ontwikkelaar van WordPress). Deze werkt prima, maar is beperkt in aanpassingsmogelijkheden. Alleen de kleuren van de achtergrond en titelkop kunnen worden aangepast. Met de plugin AMP for WP  heb ik de AMP-layout verder aangepast en de site geoptimaliseerd.

Gebruik je een kleiner CMS waar nog geen plugin voor beschikbaar is of werk je nog in HTML en CSS? Dan zul je een webbouwer moeten inschakelen. Tenzij je zelf voldoende kennis hebt.

Accelerated Mobile Pages optimaliseren voor SEO

Google indexeert standaard de originele pagina. Google indexeert pagina’s door links te volgen. Zonder een link naar de AMP-versie gaat Google die niet vinden. Verwijs daarom naar de AMP-versie door op de originele pagina een verwijzing in de head-sectie van de HTML op te nemen:

<link rel=”amphtml” href=”https://www.voorbeeld.nl/url/amp-versie.html”/>

Nu Google de pagina weet te vinden, zal de Google-spider zien dat deze exact dezelfde content bevat als de originele pagina. Er is sprake van duplicated content en dat is slecht voor je seo. Kort gezegd komt het er op neer dat Google niet twee dezelfde pagina’s aan de bezoeker wil tonen, en daarom een keuze moet maken. In feite gaan beide pagina’s elkaar beconcurreren op een plek in de zoekresultaten. Voorkom dit door Google via de head-sectie van de HTML te vertellen welke van de pagina’s geïndexeerd moet worden:

<link rel=”canonical” href=”https://www.voorbeeld.nl/url/naar/originele/html-versie.html”/>

Vaak zul je ervoor kiezen de originele pagina te laten indexeren. Tenzij de AMP-versie zoekverkeer een betere gebruikerservaring biedt. Besef dan wel dat de AMP-versie ook getoond wordt op laptops en tablets! Als je originele pagina laat indexeren, zal Google automatisch de AMP-versie tonen bij bezoek vanaf een mobiel apparaat.

Google Analytics voor Accelerated Mobile Pages

Wat wel aandacht verdient is de registratie van bezoek via AMP. Je moet hiervoor een aantal dingen instellen in de code van je site. Waaronder aanpassingen aan de Google Analytics Tracking code. Bovendien wordt slechts een beperkt aantal gegevens verzameld.

Maak in Analytics een apart segment aan voor pagina’s met ‘/amp/’ in de url (download hier de configuratie). Je kunt dan zien hoeveel en welke mensen de AMP-versie bezoeken. Wat de precieze url is wordt bepaald door de manier waarop de AMP-link aan de site is toegevoegd. Google adviseert zelfs een compleet aparte property te maken voor AMP. Die laatste optie maakt het wel moeilijker om resultaten van originele pagina’s en AMP-versies te vergelijken.

Nederlandse ervaringen met AMP

Vanaf maart 2016 gebruiken de sites Androiplantet.nl en Iphoned.nl AMP voor hun nieuwssectie. De ervaringen van de organisatie achter deze sites, BigSpark, is te lezen op Marketingfacts.nl. In het mobiele verkeer is een duidelijke verschuiving te zien binnen de nieuwssectie. Nu is circa 50% van het mobiele verkeer afkomstig uit AMP. Ook andere grotere uitgevers van nieuwssites zien het aandeel verkeer uit AMP stijgen. Verder doet AMP in ieder geval wat het moet doen: er is een daling in de laadtijd van 2 seconden voor de originele pagina naar 0,76 seconden voor de AMP-versie.

Minder onderscheid, korter bezoek en meer bounces met Accelareted Mobile Pages

BigSpark constateert dat het door de beperkte opmaakmogelijkheden wel lastiger wordt je te onderscheiden als site. Ook zien ze opvallende verschillen tussen de cijfers van de AMP en de originele pagina:

  • de gemiddelde bezoekduur op de AMP is circa een minuut korter dan op de originele pagina.
  • het bouncepercentage op de AMP is circa 85%, waar dat bij de originele pagina rond 65% zit

Testen hoe je site er uitziet met Accelerated Mobile Pages

Hoe een AMP-versie eruit ziet kun je snel zien door ‘/amp’ achter de url te plaatsen. Vergelijk het verschil tussen de url’s https://www.androidplanet.nl/nieuws/lg-v30-features/ en https://www.androidplanet.nl/nieuws/lg-v30-features/amp/.

AMP kent strikte regels. Veel dingen mogen niet en/of moeten aangepast worden uitgevoerd. Hoe controleer je nu of AMP goed is toegepast? In Google Chrome kan dit eenvoudig:

  1. voeg achter de URL van de pagina die je wilt testen ‘#development=1’ toe
  2. druk vervolgens op enter of vernieuw de pagina
  3. ga op de pagina staan en klik op de rechtermuisknop
  4. kies voor ‘inspecteren’
  5. kies in het scherm dat verschijnt voor ‘Console’

Wanneer de url van de pagina uit het voorbeeld wordt aangepast naar https://www.androidplanet.nl/nieuws/lg-v30-features/amp/#development=1 en de stappen worden toegepast is dit het resultaat:

AMP online controle met keuzemenu inspector en aanwijzingen

 

 

Juist toepassen van AMP online controleren

In dit voorbeeld is te zien dat de ‘AMP Validation Succesful’ was. Een andere controlemogelijkheid is het gebruik van de Chrome Extensie ‘AMP Validator’. Deze extensie is gratis te downloaden.  Als geen gebruik wordt gemaakt van AMP is het icoontje grijs. Wordt AMP wel gebruikt dan kleurt het icoontje groen. Verschijnt er een vierkantje met een getal bij, dan zijn er waarschuwingen of fouten met betrekking tot de code. Klik op het icoontje, en de waarschuwing(en) / fout(en) worden getoond, zoals hieronder:

Controle van Accelerated Mobile Pages met AMP Validator in Chrome met aanwijzingen

Validatie AMP en mogelijke verbeterpunten met Google Chrome AMP Validator

Tenslotte is het ook mogelijk verbeterpunten in AMP op te sporen als de pagina’s zijn geïndexeerd via Google Search Console.

AMP standaard in ontwikkeling

De AMP-techniek is nog jong. Het heeft voordelen maar ook zeker aandachtspunten. De implementatie is wat lastiger en gaat verder dan het installeren van een plugin. Bovendien heeft het effect op het gedrag van je gebruikers, je advertenties en daarmee op je inkomsten. Zomaar je hele site omzetten naar AMP is geen goed plan. Bekijk welke secties veel mobiel verkeer ontvangen en weinig interactie met de bezoeker nodig hebben. Bijvoorbeeld de nieuwspagina’s. Dat zijn goede kandidaten om mee te starten. Verder is AMP vooral een techniek om in de gaten te houden.


Over de auteur

Nick Nijhuis vergroot als marketingcoach de opbrengsten uit online marketing. Daarnaast is hij hogeschooldocent en projectleider op het gebied van digital marketing.