Accelerated Mobile Pages: html-code op dieet

Accelerated Mobile Pages (AMP) is Google's nieuwste ontwikkeling binnen mobiele seo en gaat een behoorlijke impact hebben. In dit artikel vertelt seo-specialist Freek de Jong alles over AMP: de voor- en nadelen en de implementatie ervan.

Tekst: Freek de Jong

Wat zijn Accelerated Mobile Pages?
Trage websites zijn al jaren een doorn in het oog van Google. Naast dat het voor een negatieve gebruikerservaring zorgt (40 procent van de bezoekers op mobiel klikt weg wanneer een website langer moet laden dan 3 seconden) was het voor Google vooral ook een spelbreker voor de advertentie-inkomsten. Ads die traag inladen waren voor gebruikers reden om adblockers te installeren. Meer adblockers, betekent minder advertenties en dus minder inkomsten voor Google. Wat resulteerde in een mobiele snelheid optimalisatie, oftewel Accelerated Mobile Pages (AMP).

In het kort is AMP een stuk html-code op dieet. Een uitgeklede variant van uw huidige website die alleen de broodnodige informatie bevat om een webpagina snel in te kunnen laden. Dit zorgt niet alleen voor een betere gebruikerservaring, maar ook voor voorrang tegenover niet-geoptimaliseerde webpagina’s. U krijgt een top spot in de SERP. Daarover later meer, eerst gaan we uitzoeken hoe u aan de slag gaat met AMP.

Hoe werkt AMP?
Een accelerated mobile page bestaat in de basis uit de onderstaande drie elementen.

AMP HTML
Deze variant op de reguliere html heeft aangepaste tags, eigenschappen en een boel restricties. Maar als u bekend bent met html, zult u hier geen problemen mee hebben. Meer info over de restricties en vereisten staan op de AMP projectwebsite. Voorbeeld hiervan is dat een afbeelding niet meer gebruik maakt van een <img> tag, maar van de speciale <amp-img> tag.

AMP JS
Het voornaamste voordeel van dit Javascript framework is dat elementen a-synchroon worden ingeladen, waardoor onder andere elementen boven de vouw voorkeur krijgen boven de rest van elementen. Ook komt eerst de volledige inhoud er te staan voordat afbeeldingen, i-frames etc. worden ingeladen.

AMP CDN
Dit optioneel Content Delivery Network, cached uw webpagina’s en verbetert automatisch de prestaties. Geen zorgen, ook voor de cache pagina’s is tracking en analytics mogelijk. Let wel op, javascript van externe bronnen zijn niet toegestaan, voorbeelden hiervan zijn comments en formulieren.

Zoals u ziet zijn er behoorlijk wat restricties waar u rekening mee moet houden. Een ander voorbeeld is dat alle CSS in AMP in-line moet zijn en niet groter mag zijn dan 50kb.

Nog een belangrijke vereiste is dat elementdimensies moeten worden aangegeven. Op deze manier kan het raamwerk van de pagina al worden ingeladen voordat de afbeelding er daadwerkelijk staat. U kent het wel, zo’n pagina die na 7 seconden lezen nog naar beneden verspringt wanneer die te grote afbeelding eindelijk is ingeladen.

Samengevat, AMP kan snel ingeladen worden door een beperkt aantal beschikbare html tags, in-line CSS (niet groter 50kb), gestandaardiseerd JS, gstatic cache, a-synchroon inladen en rendering.

Relatie tussen html-webpagina en AMP
Om de relatie tussen de reguliere webpagina en de AMP-variant weer te geven is het van belang dat u middels een rel=”canonical” in de code de correlatie tussen de amp en reguliere html-variant aangeeft. Vanaf de reguliere pagina plaatst u een rel=”amphtml” naar de desbetreffende AMP. Dit gebeurt tevens vanaf de cache variant.

In het geval dat er alleen een AMP aanwezig is en geen reguliere html-pagina,  dient de AMP een rel=”canonical’ naar zichzelf te krijgen.

AMP & advertenties
Eén van de redenen voor het starten van het AMP-project waren advertentie-inkomsten. Dit is dan ook iets waar een goede samenwerking met de advertentieplatformen is opgezocht. Meerdere populaire advertentienetwerken maken al gebruiken van de AMP ad-extensie waardoor uw advertenties ook zeer snel ingeladen zullen worden.

Analytics-implementatie in AMP
Om dubbele metingen te voorkomen in Google Analytics zijn er twee manieren om uw bezoekers te tracken.

- AMP-pixelelement: een simpele tag waarmee u dezelfde zaken kunt meten als een reguliere meetpixel.

- AMP-analyticscomponent: deze wijze is wat verder gevorderd, maar zal waarschijnlijk veelal geïmplementeerd worden, omdat er meer configuraties mogelijk zijn.

AMP-validatie
Gaat u zelf met AMP aan de slag, gebruik dan de verificatie in Google Search Console. Hier is uiteindelijk terug te vinden of dat uw AMP’s worden opgepikt door Google. Dit is te vinden onder het kopje ‘zoekopmaak’ en dan ‘Accelerated Mobile Pages’. Let op, het kan enkele dagen duren voordat deze ook terug te zien zijn in Search Console.

Een tweede verificatievorm is de Chrome Developer Tool. Voeg ‘#development=1’ toe aan het einde van de AMP url en open middels ctrl+shift+I de developer tools en ga naar het kopje Console. Hierin wordt weergegeven of dat de AMP succesvol gevalideerd is.

Wat betekent AMP voor mijn website?
In Amerika en de UK zijn de AMP’s al volop actief. Zo hebben grote spelers als de BBC, The Guardian en The Washington Post dit al geïntegreerd in hun cms. Bekijk hier een voorbeeld van een AMP-pagina van The Guardian. Al zijn huidige nieuwsartikelen bevatten een AMP-variant.

Wat hebben al deze grote spelers gemeen? Het zijn allemaal publishers, sites die bovenop het nieuws zitten en daarom veelvuldig terugkomen in de nieuwscarrousel. Zie onderstaand voorbeeld van de BBC over de Brit Awards. Hierbij wordt ook al een AMP-logo getoond die aangeeft dat de pagina een geverifieerde AMP is.

In Nederland zijn de eerste AMP-pagina’s nog niet opgedoken, maar dit zal een kwestie van tijd zijn. AMP is op dit moment actief in twaalf landen wereldwijd. Bent u zelf een publisher (via blogs, online magazines), dan is het zeker aan te raden om al aan de slag te gaan met AMP.

Bent u geen site die inspeelt op actualiteiten, dan is het belang op dit moment minder groot. Dan is het vooral aan te raden om er rekening mee te houden in uw strategie, door de benodigde cms-functionaliteiten in te laten bouwen. Aan te raden is om u in eerste instantie te beperken tot de statische pagina’s. Heeft u een Wordpress-pagina, dan is het mogelijk om hiervoor een plugin te installeren.

Accelerated Mobile Pages zijn pas het begin van Google’s ontwikkeling richting schonere code, hogere pagespeed en meer gebruikersvriendelijkheid. Bekijk goed wat de consequenties zijn voor uw huidige website en zie het als een kans om op termijn uzelf te onderscheiden van concurrenten die achterblijven.

Freek de Jong is seo-specialist bij Tribal Internet Marketing.