Wat je moet weten over AMP HTML (update)

Update uitgevoerd in januari 2017. Origineel is de blogpost van 29 januari 2016. Onderstaande grafiek geeft aan, waarom je best kan voortlezen.

Reeds tijdens mijn presentatie voor de WordPress Antwerp meetup (26/11/15!) heb ik uitvoerig gesproken over de naderende uitrol van AMP HTML door o.a. Google (waar ik reeds sinds oktober 2015 hiermee experimenteer). Ht blijft gek dat ik nog steeds webdevelopers en marketeers spreek, die er nog nooit van gehoord hebben…

De strijd om de mobiele surfer is namelijk op verschillende vlakken aan het losbarsten: Apple en zijn closed garden ecosysteem met Apple News met daarnaast Facebook met zijn visie van de alles-in-1 converserende mobiele app (zoals WeChat in China).

Wat is AMP HTML?

Accelerated Mobile Pages (AMP HTML) is een nieuw open source versie van de gekende HTML-code met als doel het versnellen van de internetervaring op mobiele toestellen. Momenteel is het verkeer op de meeste websites bijna 50% vanop mobiele toestellen. 3G/4G snelheden gaan steeds sneller en toch laden websites trager en trager in.

Dit komt voornamelijk door het steeds zwaarder worden van websites en daarnaast een steeds groter aantal van trackingscripts, die op vele websites worden geladen.

Meer en meer gebruikers gaan dan ook adblockers gebruiken om hun internetervaring terug sneller te gaan maken (zie mijn blogpost over het meten van adblockers). De beste bescherming tegen het opkomen van adblockers is er terug voor zorgen, dat de internetervaring op mobiele toestellen sneller wordt.

Een consortium van techbedrijven staat dan ook achter deze nieuwe AMP standaard met naast Twitter, Pinterest, WordPress en Linkedin ook een zekere speler Google. Deze bedrijven hebben er natuurlijk baat bij, dat ook mobiel hun ads steeds getoond gaan worden.

Ook enkele grote mediaspelers zijn reeds mee op de kar gesprongen en bij de The Guardian kan je een mooie implementatie terugvinden. Maar het is bijvoorbeeld nog wachten op de AMP implementatie van HubSpot voor zijn online blogplatform.

Hoe werkt AMP HTML?

AMP HTML is een uitgeklede versie van de HTML-standaard, die zich richt op het versnellen van nieuwsberichten, blogposten,… Developers krijgen hiervoor enkele specifieke guidelines mee:

  • Geen support voor (third party) javascript code.
  • Geen input elements mogelijk, dus geen formulieren of blogcomments.
  • Geen externe stylesheets mogelijk en maar 1 CSS style tag in de head.
  • Enkel inline CSS styling mogelijk.
  • CSS style rules moeten onder 50kb blijven.

De code is dus gelijkaardig aan de gekende HTML-code, maar heeft wat andere tags.

Meer informatie kan je terugvinden op de Github AMP repository.

Wil je toch niet-ondersteunde grafieken, javascript tools,… gaan insluiten, dan kan je gebruik gaan maken van een specifiek AMP iframe element.

AMP HTML testen?

Daar AMP HTML vele limieten heeft, is er nu ook een mooie Google AMP HTML testtool, waarmee je mooi de AMP-versie van je blogpost kan gaan testen.

AMP HTML en SEO impact?

Google zet zwaar in op die AMP-project. In de Google Search Console (Webmastertools) kan je bijvoorbeeld reeds een rapport vinden met de gevonden AMP pagina’s van je website en hun fouten (je ziet dat ik nog enkele fouten moet oplossen).

In de code van deze blogpost zie je mooi hoe de juiste SEO-implementatie voor AMP HTML dient te gebeuren.

In de gewone blogpost staat een rel-link naar de AMP-versie:

Op de AMP-pagina staat een canonical-link naar de gewone blogpost, zodat er geen gevaar is voor duplicate content:

Voor SEO-mensen, die Screaming Frog gebruiken een tip over het vinden van AMP pagina’s op een website.

AMP HTML meten?

Daar er geen Javascript uitgevoerd wordt, is het gebruik van Google Analytics ook niet mogelijk. Daar Google medepartner is van dit project, is er natuurlijk wel een mogelijkheid voor het meten van verkeer op AMP-pagina’s.

Sinds december 2016 kan je nu een specifieke AMP HTML Google Tag Manager container aanmaken en gebruiken. Dit is nu ook de methode dat ik alles meet. Daarnaast kan je binnen WP gebruik maken van enkele plugins (zie verder).

Zit daar wat verkeer op?

Sinds januari 2016 heb ik AMP HTML geconfigureerd op deze blog. Het valt duidelijk op in de statistieken, dat de grote launch van AMP HTML begin oktober is gebeurd. Ondertussen stijgt het verkeer steeds meer en meer.

Ik hoor dan ook geregeld mensen, die het bliksemicoontje in de mobiele zoekresultaten van Google (of in de Linkedin app bvb.) ondertussen herkennen en weten dat die sites veel sneller gaan.

In mijn Google Analytics statistieken is dit dan ook sterk merkbaar. AMP HTML (naar /AMP blogposten dus) is nog maar een klein percentage van mijn bezoekers, maar dit stijgt wel elke dag verder.

AMP HTML in WordPress configureren

Automattic is 1 van de partners van het AMP HTML project. Wie Automattic niet kent, dit is het moederbedrijf achter WordPress.com (zie dit boek over hun manier van remote werken).

Er is dan ook reeds snel een AMP plugin for WordPress gelanceerd. De huidige versie op de plugindirectory van WordPress is een eerste versie en voor een betere versie, kan ik de versie op hun Githubpagina aanraden. Ook de mensen van Yoast zitten mee in de discussies trouwens.

Update januari 2017
Ondertussen heb ik volgende configuratie, die ik op al mijn websites gebruik:
1. Officiële AMP plugin voor de basics
2. AMP for WP plugin voor de configuratie, theme en toevoegen van ads. Deze geeft je ook de kans om eenvoudig Analytics te gaan activeren.

Bekijk zeker de /AMP versie van deze blogpost.

Mijn mening over AMP HTML?

Van ver lijkt deze nieuwe standaard een nobele manier om het mobiele internet sneller te maken. Natuurlijk spelen er grote andere belangen achter de schermen mee:

  • AMP HTML wordt gezien als de tegenzet van Google tegen de lancering van Instant articles door Facebook.
  • Google (en ook Facebook) zijn wereldwijde dekking aan het uitrollen via luchtballonnen, satellieten, solar-vliegtuigen,… Elke bandbreedte die ze kunnen besparen bij doorsturen mobiele internetpagina’s, is natuurlijk mooi meegenomen.
  • De verschillende partners zorgen er natuurlijk mee voor dat zijn advertenties via hun advertentieplatformen mooi doorkomen.
  • Vanuit gebruikersstandpunt is het een goede evolutie (zoals ik hoor bij vele gebruikers, die AMP zelf niet kennen). Vanuit webmaster standpunt is het een ander verhaal, daar bijvoorbeeld de sharing van je url niet goed zit.

Er zijn dan ook meer en meer tegengeluiden over hoe o.a. Google door zijn machtspositie dit nu doordrukt voor zijn eigen redenen.


Gerelateerde berichten

Herman Maes - online marketeer seo freelancer

Herman Maes

Online marketeer en (tech)blogger sinds 2002. Freelancer (SEO en Digital marketing) met Dailybits als SEO/Hubspot/Marketing Technology Teamlead en thuis de papa van een zoon en een dochter.

Schrijf je in op de maandelijkse Dailybits mailing met een behind-the-scene blik.

13 comments

Submit a comment

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *