Wat je moet weten over AMP HTML

Reeds tijdens mijn presentatie voor de WordPress Antwerp meetup heb ik uitvoerig gesproken over de naderende uitrol van AMP HTML door o.a. Google (waar ik reeds sinds oktober hiermee experimenteer).

De strijd om de mobiele surfer is namelijk op verschillende vlakken aan het losbarsten: Apple met zijn closed garden ecosysteem met o.a. Apple News en 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.
amp html partners

Ook enkele grote mediaspelers zijn reeds mee op de kar gesprongen en bij de The Guardian kan je een mooie implementatie terugvinden.

Onderstaande Whiteboard friday video van Moz brengt alles mooi samen in enkele minuten.

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.
  • Geen 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 gelukkig direct een goede in-browser-validator voorzien. Door het toevoegen van #development=1 achteraan een url, krijg je in de console van de developertools van je browser de nodige foutmeldingen.
AMP html validator console

Google heeft reeds enige tijd zijn Structured Data Testing Tool voor het nakijken van (rich snippet) markup in de code van je pagina. Deze Google Testtool biedt nu ook ondersteuning voor AMP HTML.
Structured Data Testing Tool Google AMP html

Daarnaast is deze technicalseo.info testtool ideaal voor het controleren van een groot aantal pagina’s.
AMP html testtool

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 wat werk heb).

Search_Console_-_Accelerated_Mobile_Pages_-_http___www_dailybits_be_

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:

Google heeft ook aangegeven, dat ze vanaf februari AMP-pagina’s willen gaan hoger tonen in mobiele zoekresultaten.

Google will begin sending traffic to AMP pages in Google Search as early as late February, 2016.

google amp html

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.

Via Github kan je deze pixelcode terugvinden voor het aanroepen van Google Analytics (vervang natuurlijk de UA-code door je eigen code). Ikzelf heb wel een aanpassing aan het voorbeeld gemaakt, door de $CANONICAL_URL parameter te vervangen door de $AMPDOC_URL parameter, zodat ik in Google Analytics de AMP-pagina’s heb zitten en daarop kan filteren.

Een verdere Analytics API for AMP wordt uitgewerkt.

AMP HTML voor grote publishers

Een belangrijke uitbreiding omtrent AMP HTML is de uitbreiding voor de implementatie van een paywall (zie deze Github).
AMP html paywall

AMP HTML en WordPress?

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.

Deze plugin draait nu reeds enkele weken op mijn blog, maar ik moet me eens in de templatefiles gooien om alles er beter te gaan laten uitzien. Van een willekeurige Dailybits-blogpost kan je nu de AMP-versie vinden door het toevoegen van /amp/ in de url.

Wat_je_moet_weten_over_AMP_HTML_by__dailybits

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.

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. Zelfstandige in bijberoep met Daily Bits sinds 2012. Overdag SEO/Hubspot/Marketing Technology Teamlead en thuis de papa van een zoon en een dochter.

9 comments

Submit a comment

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