Skip to main content

Google AMP project

17 feb. 2016

Ik ben de laatste 1-2 jaar veel bezig geweest met het zo duidelijk en direct mogelijk uitspelen van content naar website/app gebruikers. We hebben vooral veel geëxperimenteerd met journalistieke longreads in zo puur mogelijk vorm weer te geven op mobiele webpagina's. Toen ik vorig jaar iets las over Google's AMP (Accelerated Mobile Pages) project was ik meteen geïnteresseerd omdat dit project zich focust op het zo snel en schoon mogelijk tonen van content (artikelen) op mobiele devices.

Maar wat is het AMP project precies en wat kan je ermee? Zoals gezegd is het doel van het AMP project om web content zo snel en efficiënt mogelijk te kunnen tonen op mobile devices. Hiervoor heeft Google een framework ontwikkeld waarmee de html van webpagina's aangepast kan worden. Het AMP framework maakt gebruik van standaard web technieken en is daarom vrij makkelijk in te zetten. Het framework legt wel een aantal restricties op aan de html van de webpagina. Zo is custom Javascript niet toegestaan evenals verscheidene html elementen (zoals <input>). Ook enkele CSS rules zijn verboden. Voor sommige html elementen is een vervangende versie aanwezig (zoals <amp-img> in plaats van <img>). Het uitsluiten van Javascript en formulier velden maakt wel duidelijk dat het Google gaat om pure content (artikelen), dus zonder formulieren of animatie of andere zaken die niet puur op de content gefocused zijn. Het inzetten van AMP pagina's is dan ook alleen zinvol voor webpagina's die statische content tonen. Dit zijn (niet toevallig) ook pagina's die het vaakst gedeeld worden via social media (denk aan nieuws artikelen of product detail pagina's uit een webshop). Google's insteek is dan ook dat dit soort pagina's wanneer ze geopend worden vanuit een social media platform zo snel mogelijk gerenderd worden. Wie moet er niet regelmatig (te) lang wachten op het laden van een webpagina die iemand via Facebook op Twitter gedeeld heeft? AMP wordt hiervoor onder andere al gebruikt door Twitter en LinkedIn. Twitter en LinkedIn kijken als iemand een pagina deelt of hiervan een AMP versie van bestaat en zo ja dan wordt deze uitgespeeld aan iedereen die de gedeelde link opent.

Code

En nu naar de code. Minimaal moet een AMP pagina aan de volgende regels voldoen:

  • <!doctype html>.
  • <html ⚡> tag (<html amp> mag ook).
  • <head> en <body> tags (optioneel in gewone HTML).
  • <link rel="canonical" href="{url}" /> waar {url} wijst naar de gewone html versie van de pagina of naar zichzelf.
  • <meta charset="utf-8"> als eerste element van <head>.
  • <meta name="viewport" content="width=device-width,minimum-scale=1"> met bij voorkeur ook initial-scale=1.
  • <script async src="https://cdn.ampproject.org/v0.js"></script>.
  • De AMP boilerpolate code (zie code voorbeeld hieronder) moet in de <head> staan.
AMP boilerplate
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

Content toevoegen

De meeste gewone html elementen kunnen gewoon gebruikt worden zoals gebruikelijk. Sommige zijn echter vervangen, de belangrijkste zijn de volgende:

  • Img : Vervangen door amp-img, height en width zijn verplicht
  • Video : Vervangen door amp-video
  • Audio : Vervangen door amp-audio
  • Iframe : Vervangen door amp-iframe 

Sommige elementen zijn geheel verboden zoals onder andere:

  • Object
  • Embed
  • Input
  • Script : Alleen executable scripts zijn verboden, andere types (zoals zoals application/ld-json) zijn wel toegestaan
Responsive image
<amp-img src="responsive.jpg" width="640" height="480" layout="responsive"></amp-img>
Fixed size image
<amp-img id="img1" src="fixed.jpg" width="264" height="96"></amp-img>

Valideren

Omdat er vrij veel regels aan een AMP pagina zitten is het raadzaam om te valideren of alles goed staat voordat de pagina live gezet wordt. Hiervoor kan achter de URL (dus ook in je lokale development omgeving) #development=1 geplaatst worden. Via de Console (via Development tools van je browser) kan je nu zien of je pagina valide is en zo nee wat er nog niet goed gaat.

Vindbaar maken

Als je normale HTML pagina's vervangt door AMP is er in principe niks meer nodig om je pagina gevonden te laten worden. Wel is het natuurlijk raadzaam om de gebruikelijke metadata toe te voegen voor SEO optimalisatie. Het is wel zeer raadzaam om het type content aan te geven (nieuws artikel, blog, recensie, etc.) door middel van bijvoorbeeld microdata of JSON-LD, Google gebruikt deze informatie om bepaalde types content op speciale manieren aan de gebruiker te tonen. Zie onderstaand voorbeeld voor structured data van een nieuwsartikel.

Structured data voor nieuws artikel
<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    "headline": "This is a news article title",
    "datePublished": "2016-02-17T12:02:41Z",
    "image": ["news-image.jpg"]
}
</script>

Als je een AMP pagina inzet als alternatief naast je 'normale' HTML pagina's dan moet er een link naar de AMP pagina ingevoegd worden (de AMP pagina zelf heeft dan weer een canonical meta link naar de HTML pagina), zie onderstaande voorbeelden.

Link naar AMP pagina
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
Link naar HTML pagina
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">

Conclusie

Als je veel statische content op je site hebt staan die veel gedeeld wordt is het zeker raadzaam om te experimenteren met AMP, je kan beginnen met een paar pagina's en kijken welk effect dit heeft op je site bezoek. Deze blog pagina is zelf ook als AMP versie te bekijken.

Google zou AMP pagina's al hoger moet ranken in de zoekresultaten dus SEO technisch heeft het ook voordelen, hoe groot deze zijn moet echter nog blijken.

Dat Twitter en LinkedIn zich al achter het AMP project geschaard hebben laat zien dat het zeker een toekomst heeft. Facebook (Instant Articles) en Apple (Apple News) zijn echter bezig met een eigen implementatie van AMP achtige pagina's, dit kan betekenen dat AMP straks eindigt als weer een half ondersteunde 'standaard'. Voor nu lijkt het dus wel de moeite waard om AMP in te zetten als veel pure content op je site hebt die vaak gedeeld wordt via Social Media. Veel grote journalistieke site (BBC, ABC, Wall Street Journal, etc.) maken dan ook al gebruik van AMP.