• Mobile
    wordt gesponsord door
  • Usability & design
    wordt gesponsord door

AMP’s 1 jaar later: waar staan we?

AMP’s 1 jaar later: waar staan we?
, Orangedotcom

Met de aankondiging van Google’s AMP in oktober vorig jaar werd een nieuwe stap gezet in de mobiele revolutie. Het afgelopen jaar hebben zich veel ontwikkelingen voorgedaan rondom AMP’s. Waar staat we nu, hoe serieus moeten we ze nemen en wat kunnen AMP’s voor jou betekenen?

Wat is AMP?

Om te beginnen allereerst een korte recap. AMP staat voluit voor accelarated mobile pages. Het is de naam voor het open source framework dat is ontwikkeld door Google in samenwerking met onder andere Twitter, LinkedIn en WordPress.

Met AMP wil Google het belang aantonen van een snelle mobiele website. Uit onderzoek van Google blijkt namelijk dat je gemiddeld 40 procent van je mobiele bezoekers kwijt bent als een webpagina niet binnen 3 seconden is geladen. Op dit gebied valt er dus voor menig websitebouwer nog wat te behalen. Met de inzet van AMP biedt Google de mogelijkheid op een laagdrempelige manier de mobiele ervaring verder te verbeteren.

Niet alleen Google stelt een optimale gebruikerservaring voor mobiele bezoekers centraal. Zo wordt het AMP-project ook wel omschreven als een tegenreactie op de Instant Articles van Facebook, waarmee het mogelijk is artikelen razendsnel in de Facebook-app in te laden. Daarnaast timmert ook Apple aan de weg met de Apple News-app, waarmee gebruikers nog sneller van het laatste nieuws moeten worden voorzien. Dat het een onderwerp is waarin veel speelt, moge duidelijk zijn.

De techniek achter AMP

Een AMP is een uitgeklede versie van reguliere HTML. Alleen de daadwerkelijk benodigde informatie wordt aan een mobiele gebruiker getoond. Elementen die traag laden, worden vervangen of zelfs geheel geschrapt. Hierdoor wordt er tot 10 keer minder data gebruikt ten opzichte van een reguliere webpagina. Technisch gezien bestaat een AMP uit AMP HTML en AMP JavaScript. Optioneel is AMP Cache. 

  • AMP HTML is een variant op reguliere HTML, een versimpelde versie. Een AMP HTML-bestand herken je aan een bliksemschicht in de code. Hoewel de meeste tags overeenkomen met reguliere HTML-tags, is een aantal tags vervangen of aangepast voor een optimale werking. 
  • AMP JavaScript is een geoptimaliseerde JavaScript-bibliotheek. Alle externe bronnen worden hierin asynchroon ingeladen. Hierdoor kan geen enkel element de weergave van andere elementen blokkeren. Ook zorgt het ervoor dat trage CSS-selectors worden uitgeschakeld. Ten slotte worden scripts van derden niet standaard ingeladen.
  • AMP Cache is een optioneel element en maakt het mogelijk dat AMP's gecached worden door Google. Deze worden vervolgens via een content delivery network (CDN) uitgeleverd. Door gebruik te maken van AMP Cache worden alle JavaScript-bestanden en -afbeeldingen uit dezelfde bron geladen. Daarnaast beschikt de AMP Cache over een validatiesysteem, waarmee gegarandeerd wordt dat de pagina volledig werkt en niet afhankelijk is van externe bronnen.

AMP en advertenties

Als scripts van derden niet standaard worden ingeladen, vraag je je misschien af hoe het dan zit met mobiele advertenties. Kort na de eerste uitrol werden advertenties op AMP’s nog niet ondersteund. Naarmate de ontwikkelingen vorderden, werden hiertoe de eerste opties beschikbaar gesteld. In eerste instantie liep dit niet geheel vlekkeloos. Zo werd de tekst vaak eerder geladen dan de daadwerkelijke advertentie, die pas enkele seconden later verscheen. Inmiddels zijn deze problemen opgelost en zit het antwoord in de zogeheten amp-ad, ook wel 'A4A' (AMP for ads).

Bron afbeelding: Accelerated Mobile Pages project

De amp-ad maakt het enerzijds mogelijk effectieve advertenties te tonen, terwijl anderzijds de gebruikerservaring van de mobiele bezoeker centraal blijft staan. Een grote uitdaging, als je bedenkt dat advertentienetwerken grote invloed kunnen hebben op de laadtijd van websites.

Door middel van A4A laden advertenties op hetzelfde moment als de tekst in. Omdat de ad request op de server wordt gescheiden van de advertentieweergave, behaalt de A4A een snellere weergave. Nog niet alle advertentienetwerken zijn binnen AMP HTML geïntegreerd. Het zal je wellicht niet verbazen dat Googles eigen AdSense en Doubleclick al wel ondersteund worden. Bekijk dus van te voren welke advertentienetwerken er ondersteund worden.

Uiteraard dient de landingspagina achter de amp-ad niet te worden vergeten. Een snel ingeladen advertentie is namelijk fraai, maar valt in het niet wanneer het inladen van de landingspagina lang duurt. Met de speciale AMP Landing Pages wordt dit probleem verholpen. Hierbij is het namelijk mogelijk landingspagina’s dusdanig op te bouwen dat deze met dezelfde snelheid inladen als een AMP.

De uitrol van AMP

De eerste uitrol van AMP’s vond plaats in februari 2016 en richtte zich puur en alleen op Engelstalige nieuwsuitgevers die nauw betrokken waren - en zijn - bij de ontwikkeling van AMP’s. Denk hierbij aan onder andere BuzzFeed, de Wall Street Journal en de Washington Post.

Vanaf dat moment werden AMP-resultaten bovenaan in de search engine results pages (SERP's) in de zogeheten Top Stories Carrousel getoond. Binnen deze carrousel is het mogelijk te swipen tussen andere, relevante nieuwsartikelen, die tevens razendsnel worden ingeladen. 

De uitrol in Nederland heeft even op zich laten wachten, maar in augustus was het dan zover. Uitgevers als De Persgroep, Sanoma en NOS maken gebruik van AMP’s en zijn daarmee in de Top Stories Carrousel aanwezig. De kans dat je al enkele resultaten voorbij hebt zien komen, is dan ook groot.

Verdere ontwikkelingen rondom AMP

Naast de start van de uitrol in Nederland bracht Google afgelopen augustus nog meer nieuws naar buiten. De uitrol is toe aan een volgende stap en AMP’s zullen niet langer alleen in de Top Stories Carrousel getoond. Ook in de reguliere organische zoekresultaten op mobiel worden AMP’s uitgerold. Tel hierbij het feit op dat AMP’s niet langer meer alleen voor nieuwswebsites beschikbaar zijn en je zult begrijpen dat AMP’s langzaamaan voor steeds meer websites toegankelijk worden.

Om ons aan deze ontwikkeling te laten wennen, kun je in de Google AMP sneak preview (uiteraard alleen op mobiel) zien wat Google voor ons in petto heeft. Veelbelovend lijkt het in ieder geval wel, als je kijkt naar het voorbeeld van online handelsplaats eBay, waarbij productpagina’s middels AMP beschikbaar zijn. Het maakt nog eens goed duidelijk wat voor kansen er liggen en hoe deze de komende tijd benut kunnen worden.

Bron afbeelding: Accelerated Mobile Pages project

Het effect van AMP op seo

Al kort na de eerste uitrol vroeg menigeen zich af welke invloed AMP’s hebben op de rankings in de zoekresultaten. Google benadrukt dat AMP’s niet worden voorgetrokken in de zoekresultaten. De Top Stories Carrousel wordt echter wel boven de reguliere zoekresultaten getoond. Het wordt hiermee relatief eenvoudig bovenaan in de zoekresultaten zichtbaar te zijn. Niet alleen je zichtbaarheid neemt hierdoor toe, ook de kans dat het aantal kliks en impressies groeit, is sterk aanwezig. Ten slotte draagt het bij aan een betere user experience.

Een officiële rankingfactor is AMP nog niet. Wel dragen AMP’s bij aan een betere laadsnelheid, wat op zichzelf wel door Google als belangrijke rankingfactor wordt beschouwd. Ook is het bekend dat als er van een pagina twee versies zijn - een reguliere en een AMP - Google de voorkeur geeft aan de AMP-variant. Hoewel AMP’s dus misschien niet van directe invloed zijn op seo, brengen ze indirect zeker voordelen met zich mee.

Implementatie van AMP

De grote, bekende CMS-systemen als WordPress en Drupal bieden plugins aan. Middels deze plugins kun je AMP’s op een relatief eenvoudige manier inrichten. Werk je met een custom CMS, dan komt er meer werk bij de implementatie kijken. De officiële website van het project biedt hiervoor veel ondersteuning en voorbeelden. Houd tijdens de implementatie in ieder geval rekening met de volgende zaken.

  • Als er twee versies van een pagina zijn, regulier en AMP, is het belangrijk de zoekmachine hiervan op de hoogte te brengen. Dit doe je middels "rel=amphtml". In de AMP-versie verwijs je met een canonical naar de reguliere versie.
  • Indien er van een pagina alleen een AMP-versie bestaat, stel je een self-referencing canonical in.
  • Een AMP werkt alleen naar verwachting als de pagina geldig is. Controleer daarom vooraf de validatie van je AMP.

Loop je tijdens de implementatie tegen fouten aan of vraag je je af of jouw AMP’s wel geïndexeerd worden? Vergeet dan Google Search Console niet. Binnen deze console, onder de kop Zoekopmaak, is namelijk het accelerated mobile pages-rapport te vinden. Als Google AMP’s heeft gevonden op je website, worden deze hier getoond.

Je kunt hier dus nagaan of alle AMP’s ook daadwerkelijk geïndexeerd worden. Daarnaast worden er AMP-specifieke fouten weergegeven in het rapport. Deze fouten worden getoond op fouttype. Vervolgens kun je kijken welke pagina’s die fout bevatten. Daarnaast is het ook per pagina inzichtelijk welke fouten er worden gevonden.

AMP en Google Analytics

Uiteraard ben je benieuwd hoe je AMP’s het doen en wil je deze resultaten terugzien in Google Analytics. Voor AMP’s is het echter niet mogelijk het externe JavaScript-trackingcodefragment (analytics.js) te gebruiken, aangezien dit een externe bron is. Dit hoeft niet te betekenen dat je geen statistieken meer kunt meten, want hiervoor is een speciale AMP analytics tag in het leven geroepen. Met behulp van deze tag is het mogelijk statistieken te meten. 

Aangeraden wordt om binnen Google Analytics een aparte property aan te maken waarbinnen je AMP-data gemeten wordt. De statistieken die gemeten worden, zijn beperkt ten opzichte van reguliere webpagina’s. Verwacht wordt dat er steeds meer statistieken beschikbaar worden.

Reactie op AMP

Dat de ontwikkelingen zich redelijk snel opvolgen, is niet zo vreemd. Het aantal AMP’s stijgt namelijk in rap tempo. Werd er afgelopen zomer nog een inschatting gemaakt van zo’n 150 miljoen beschikbare AMP-pagina’s, nu wordt al gesproken over meer dan 600 miljoen pagina's, geschreven in meer dan 200 verschillende talen. De grote internationale uitgevers, die van begin af aan betrokken zijn bij het project, laten weten dat het verkeer uit AMP’s een steeds grotere groep van het totale bezoek vormt.

Maar uit verschillende hoeken komt ook kritiek. Zo klagen verschillende uitgevers over teruglopende advertentie-inkomsten. Hoewel amp-ads in het leven zijn geroepen, blijven de advertentiemogelijkheden beperkter dan op reguliere webpagina’s. Gesproken wordt over zo’n vijftig procent minder inkomsten ten opzichte van een reguliere wegpagina. Om welke uitgevers het hier gaat, blijft echter onduidelijk. Ontevreden uitgevers durven niet met naam naar buiten te treden, uit angst benadeeld te worden door Google.

Ook de oplossing op zichzelf wordt in twijfel getrokken. Want is het aanbieden van snel ladende webpagina’s op mobiel uiteindelijk het hoofddoel, AMP’s pakken nu slechts een klein deel aan. Hoe hard je ook je best doet met het aanbieden van AMP’s, bezoek zal via andere kanalen blijven binnenkomen. De algehele laadsnelheid van je website - het is tenslotte niet voor niets een belangrijke rankingfactor - mag dan ook niet uit het oog verloren worden. 

Toekomst van AMP

Werden de eerste berichten rondom AMP’s ietwat sceptisch ontvangen, inmiddels is het duidelijk dat dit project geen eendagsvlieg is. Het aantal beschikbare AMP’s stijgt in rap tempo en de ontwikkelingen spelen hier continu op in. De aankondiging dat AMP’s niet langer alleen voor nieuwswebsites beschikbaar zullen zijn, is veelbelovend en biedt kansen voor andere websites.

Tijd om AMP’s serieus te gaan nemen is het zeker. Een algehele oplossing is het voorlopig echter nog niet. Middels AMP’s wordt nu nog vooral gefocust op het inladen van specifieke pagina’s. De algehele websitesnelheid schiet hier nog bij in. Interessant blijft het wel en dus blijf ik de ontwikkelingen zeker volgen.

Credits afbeelding: ampproject.org, licentie: Alle rechten voorbehouden

Delen

0
1


Er zijn 1 reacties op dit artikel

  • Leuk stuk. Het klopt inderdaad dat alleen WordPress en Drupal plug-ins aanbieden. Maar zij maken helaas (bijna) alleen gebruik van built-in AMP componenten. Op dit moment zijn het daarom puur statische pagina's zonder enige functionaliteit.

    Zelf heb ik een manier ontwikkeld om binnen het CMS DNN (DotNetNuke) AMP's te ontwikkelen: https://dotnetnuke.nl/Blog/Online-marketing/create-accelerated-mobile-pages-amp-in-dnn. In principe kan die manier voor elk willekeurig CMS worden gebruikt.

    Voordeel van zelf ontwikkelen is dat je ook compontenten zoals amp-sidebar kan gebruiken (het hamburger menu). Nadeel van het gebruiken maken van niet-ingebouwde AMP componenten is dat het, zoals je liet zien in je voorbeeld, echt meer laadtijd kost.

    Leuke bijkomstigheid voor het vindbaar maken van AMP's; ik genereer de link rel="amphtml" met JavaScript op de normale website als er een AMP beschikbaar is. Ook die manier wordt dus goed geïndexeerd en geaccepteerd door Google.

    geplaatst op

Plaats zelf een reactie

Log in zodat je (in het vervolg) nóg sneller kunt reageren

Vul jouw naam in.
Vul jouw e-mailadres in. Vul een geldig e-mailadres in.
Vul jouw reactie in.

Herhaal de tekens die je ziet in de afbeelding hieronder


Let op: je reactie blijft voor altijd staan. We verwijderen deze dus later niet als je op zoek bent naar een nieuwe werkgever (of schoonmoeder). Reacties die beledigend zijn of zelfpromotioneel daarentegen, verwijderen we maar al te graag. Door te reageren ga je akkoord met onze voorwaarden.