Inhoudsopgave
Stel je de volgende situatie voor: je staat op een bus te wachten in een afgelegen dorp en besluit om de tijd te doden snel even je facebook te checken op je smartphone. Het netwerk is 3G dus alles laadt wat traag. Tussen de berichten in je feed staat een update van een blog die je volgt over je favoriete hobby. Je klikt op de link om meer te lezen. Het scherm is wit en er verschijnt een laad-icoontje. Je wacht 5, 6, 7, 8 seconden… nu lijkt er eindelijk iets te komen… Een paginagrote advertentie. Je tikt die geërgerd weg. De tekst van het artikel begint nu langzaam te laden. Je scrolt naar beneden om verder te lezen… maar tijdens het scrollen verspringt je scherm plots een stuk omhoog omdat een advertentie erdoor komt en een half scherm voor zich opeist. Je weet niet meer waar je bent in het artikel en sluit uit frustratie daarom maar je scherm.
Eenmaal op de bus besluit je om een adblock-app te installeren om toch maar van die vervelende reclame verlost te zijn.
Besluit: in plaats van te genieten van de rijke en entertainende bron van informatie die het wereldwijde web in wezen is, heb je eigenlijk alleen maar frustratie gevoeld door het trage laden en de vervelende advertenties. Precies dat probleem heeft Google willen oplossen door middel van het AMP-project, of het Accelerated Mobile Pages Project.
Wat is AMP?
Accelerated Mobile Pages zijn html-varianten van pagina’s die razendsnel kunnen geladen worden op mobiele schermen. AMP-pagina’s zijn altijd statische webpagina’s: daarmee bedoelen we pagina’s die ervoor iedereen hetzelfde uitzien en vaak alleen uit HMTL-code bestaan. (Dynamische webpagina’s daarentegen worden weergegeven op basis van parameters die voor elke gebruiker anders kunnen zijn, bijvoorbeeld een filterresultaat op een webshop.)
AMP-code werkt dus enkel op statische pagina’s en bestaat uit AMP HTML enerzijds en HTML JS anderzijds.
- HTML-AMP is HTML-code uitgebreid met AMP-specifieke tags. Een voorbeeld: in plaats van de standaard HTML-tag voor beelden, <img>, krijg je nu de tag <amp-img>. Deze tag zorgt ervoor dat de hoogte, breedte en aspect ratio van beelden vastgelegd wordt nog voor het beeld zelf geladen wordt.
- Daarnaast is er AMP JS (AMP JavaScript). Dat gedeelte beheert het laden van de pagina en zet alles in het werk om de laadsnelheid van de mobiele pagina te verhogen. Dankzij AMP JS kan zogenaamde third party content, bijvoorbeeld advertenties, de pagina niet langer verhinderen om te laden. Ook wordt trage CSS-code geblokkeerd en wordt de lay-out van de pagina vastgelegd nog voor alle elementen geladen zijn.
Door op die manier minimale HTML-code en bepertke JavaScript te gebruiken, kunnen AMP-pagina’s gehost worden in het cachegeheugen van Google AMP Cache. Deze data kan Google onmiddellijk aan de bezoeker serveren als hij of zij op de link klikt.
AMP is een open source project. Het is ontstaan als reactie op Instant Articles van Facebook, waarmee je content sneller kan aanbieden aan de gebruiker. Facebook wil hiermee auteurs aansporen om hun content rechtstreeks op facebook te plaatsen en niet eerst op de eigen website. Dat is niet ideaal want zo werk je uiteraard niet meer aan de uitbouw van je eigen website en genereer je geen bijkomend verkeer.
Naast bedrijven als Google en Twitter hebben onder andere enkele vooraanstaande nieuwssites zoals BBC, Financial Times, The Washington Post en Time aan het project meegewerkt. Ook WordPress is op de AMP-kar gesprongen en ontwikkelde een AMP-plugin.
Wat zijn de voordelen van AMP?
AMP zorgt ervoor dat je website razendsnel laadt op mobiele schermen en verbetert dus aanzienlijk de gebruikerservaring van de mobiele surfer.
In het voorbeeld hierboven is de gebruiker zo gefrustreerd dat hij de pagina verlaat voor hij de volledige inhoud gezien heeft. Dat is een “lose-lose-situatie” voor alle partijen: de lezer krijgt zijn pagina niet te zien, de maker van de pagina kan zijn lezer niet op zijn website houden en de adverteerder heeft alleen maar frustratie veroorzaakt met zijn of haar advertenties.
Nog erger is het wanneer de surfer een adblock-extensie installeert. Daardoor verliest de website inkomsten van adverteerders, kan de adverteerder zijn boodschap niet overbrengen en laadt de website voor de lezer nog trager, want de advertenties moeten eerst gescand en uitgefilterd worden vooraleer de pagina kan geladen worden.
Met AMP sla je eigenlijk drie vliegen in één klap. De gebruiker is tevreden met de supersnelle laadtijden van zijn favoriete content, de maker van de website is tevreden want de gebruiker zal terugkeren voor meer, en de adverteerder weet zeker dat zijn advertentie gezien wordt zonder extra frustratie te creëren.
Door AMP te installeren zal Google je ook hoger ranken in de zoekresultaten. Surft de meerderheid van je websitebezoekers via een smartphone, dan doe je er dus goed aan AMP-code aan je webpagina’s toe te voegen.
Wat doet AMP precies?
De gecombineerde HTML- en JavaScriptcode zorgt ervoor dat:
- de lay-out van de pagina vastligt vooraleer de afzonderlijke elementen geladen zijn,
- zogenaamde third party content, zoals advertenties of tweets, pas het laatst van al verschijnen en het laden van de pagina niet kunnen vertragen of verhinderen,
- de elementen boven de ‘fold’ (het eerste ‘scherm’ van de pagina) het eerst verschijnen; ook bij het scrollen wordt telkens voorrang gegeven aan de data die de lezer op dat moment op het scherm te zien krijgt,
- ingewikkelde CSS-bestanden, die de pagina zwaarder maken om te laden, geblokkeerd worden,
- animaties geblokkeerd worden, met uitzondering van animaties die elementen transformeren (vergroten of verkleinen) of die de transparantie aanpassen,
- third party content in vooraf vastgelegde iframes terecht komt, zodat de pagina niet voortdurend verspringt tijdens het laden,
- advertenties niet langer je volledige scherm in beslag kunnen nemen,
- enz.
Voorbeeld van AMP-html
Het resultaat van al die aanpassingen is dat de pagina bliksemsnel laadt. Wil je het testen? Surf dan op je smartphone naar ‘https://g.co/ampdemo’ en typ bijvoorbeeld de zoekterm ‘Obama’ in. Kies één van de ‘Top stories’ die bovenaan je scherm verschijnen en sta versteld van de laadsnelheid van de pagina. Als je naar beneden scrolt, verspringt de pagina niet en advertenties laden het laatst van allemaal.Het grote voordeel van AMP is dat het op alle platformen toepasbaar is. Alle browsers en apps kunnen de code lezen. Je hoeft er niets voor te installeren en er zijn geen meerdere versies van een website nodig.
Zijn er ook nadelen?
Die zijn er helaas ook. Zo kan je bepaalde dynamische widgets niet meer toevoegen aan je pagina, zoals een inschrijvingsformulier voor een elektronische nieuwsbrief of een facebook vind-ik-leuk-knop.
Ook zou AMP wel samenwerken met Google Analytics, maar (nog) niet met andere platformen die de prestaties van je websites meten.
Een andere bezorgdheid is dat het moeilijk is om terug te keren eens je AMP-code toegevoegd hebt. Dat probleem kan je echter makkelijk omzeilen door middel van een URL redirect.
Wij denken echter dat Google AMP in de toekomst meer en meer zal pushen, en dus AMP-pagina’s systematisch hoger zal ranken dan niet-AMP-pagina’s. Om je SEO-optimalisatie te ondersteunen, doe je er dus goed aan de gratis plugin te downloaden en te installeren.
Hoe AMP installeren?
-
Download en installeer de AMP-plugin
De AMP-plugin zorgt ervoor dat al je berichten een AMP-compatibele versie krijgen, die toegankelijk zijn via de toevoeging /amp/ aan het einde van de URL.
www.mijnwebsite.com/post-nummer-een/
wordt dan
www.mijnwebsite.com/post-nummer-een/amp/
Je kan het even testen: de amp-versie is een soort van gestripte versie van de oorspronkelijke pagina. Voorlopig werkt de plugin enkel voor berichten en niet voor pagina’s of voor archieven, maar volgens WordPress wordt er momenteel gewerkt aan compatibiliteit voor pagina’s.
-
Activeer AMP
Ga naar Uiterlijk > AMP om een preview te zien van hoe je bericht eruitziet in de AMP-versie. Je kan hier de tekstkleur en achtergrondkleur van de header wijzigen. Klik op ‘Opslaan’. Vanaf nu kan je elk bericht op je website bezoeken door achteraan de URL “/amp/” toe te voegen.
Wat is er nu achter de schermen gebeurt? In je HTML-files vind je nu de code “<link rel=”amphtml”…” terug. Dat stukje code vertelt je browser dat hij de AMP-versie van je pagina moet laden. Het is dus niet de plugin die zal bepalen of de AMP-versie van de website getoond wordt, maar wel de browser.
Krijg je een “Page not found” boodschap? Dat betekent dat je de permalinks van je blog even moet vernieuwen. Ga daarvoor naar Instellingen > Permalinks en klik op ‘Opslaan’. Je hoeft niets aan te passen: deze handeling zal automatisch alle links updaten.
AMP in de Google Search Console
Je kan nagaan hoe je AMP-pagina eruitziet in de Google Search Console. Ga daarvoor naar “Zoekopmaak” en kies “Accelerated Mobile Pages”. Verschijnt er niets, geen nood: het kan een tijdje duren vooraleer de zoekrobot je AMP-berichten heeft geïndexeerd. Probeer het later nog eens.
