AMP (Accelarated Mobile Pages) in Joomla: Alles wat je moet weten

logo pdb
Ryte.com (voorheen On-page.org) is een van de beste on-page SEO tools, aanbevolen door Joomlaseo.com (zie onze review). Gratis voor 1 account (voor altijd)!!!

Google heeft een tijdje geleden het AMP project (Accelerated Mobile Pages) opgestart. Het doel hiervan is om er voor te zorgen dat mobiele pagina's veel sneller laden. In de tussentijd is het project een stuk verder en heeft zie je al best vaak AMP pagina's in de mobiele zoekresultaten staan.

Tot voor kort toe was er nog geen gemakkelijke manier om Joomla geschikt te maken voor AMP, maar sinds een tijdje wel. Weeblr (ook bekend van hun extensies SH404SEF en Josetta) heeft de plugin wbAMP gepubliceerd, voor AMP support in Joomla. Eerst even de nodige achtergrondinformatie:

Google AMP achtergrond

Het is een bekend probleem dat websites op mobiele apparaten minder snel laden door issues met bv connectiviteit (slechte wifi of 3G / 4G) of problemen met het apparaat zelf. Daarnaast laden ook responsive websites allerlei elementen in die toch vaak niet bekeken worden. Een sidebar verwdijnt op mobiel vaak helemaal naar beneden, dus die kan eigenlijk beter weggelaten worden. Om dit soort problemen op te lossen is het AMP project gestart: specifiek voor het bouwen van zeer snelle mobiele pagina's. Let wel: het levert behoorlijk minimalistische pagina's op, en er zijn genoeg mensen die zich afvragen of dit qua UX niet eigenlijk een stap terug is.... Maar ja, als Google het wil moet je eigenlijk mee.

Web Hosting

De AMP-geoptimaliseerde pagina wordt gebouwd als een gestripte pagina van de desktop versie, met slechts een minimum aan resources en content-elementen. Je biedt dan naast je "gewone" pagina's ook een gestripte versie aan. Je mag bijvoorbeeld geen formulieren gebruiken. De verdere technische vereisten die op de AMP website vermeld zijn, zijn de volgende:

  • Allow only asynchronous scripts
  • Size all resources statically
  • Don’t let extension mechanisms block rendering
  • Keep all third-party JavaScript out of the critical path
  • All CSS must be inline and size-bound
  • Font triggering must be efficient
  • Minimize style recalculations
  • Only run GPU-accelerated animations
  • Prioritize resource loading

Daarnaast zorgt Google zelf nog eens voor efficiente caching middels een eigen CDN. Vooral deze laatste stap zorgt ervoor dat het laden supersnel gaat.

Bepaalde pagina's (vooral je statische pagina's) krijgen dan naast de volledige versie een AMP versie voor mobiel gebruik. Twee pagina's met dezelfde content kan to duplicate content issues leiden en daarom moet de AMP versie een canonical tag hebben die verwijsd naar de volledige versie. Andersom: om Google te informeren dat er sowieso een AMP versie bestaat moet de volledige versie een rel="amphtml" tag hebben, verwijzend naar de mobiele versie. Een voorbeeld:

Stel, we hebben een desktop version op http://example.com/full-version en een AMP versie op http://example.com/full-version/amp. De volledige versie moet dan naar de AMP versie verwijzen:

<link href="http://example.com/full-version/amp" rel="amphtml" />

De AMP versie moet juist een canonical hebben naar de volledige versie:

<link rel="canonical" href="/http://example.com/full-version" />

Niet alle pagina's zijn trouwens geschikt voor AMP optimalizatie. Dynamische pagina's als formulieren, winkelwagentjes en dergelijke kunnen minder goed of niet functioneren. Gewone statische pagina's zijn de beste kandidaten.

Web Hosting

AMP in het wild

Toen ik deze blog oorspronkelijk schreef (Februari 2016) was AMP nog maar langzaam aan het uitrollen. In Nederland is het zelfs pas vanaf augustus 2016 beschikbaar. De laatste tijd (dit blog is volledig herschreven in december 2016) zien we steeds meer AMP in de zoekresultaten. Het meest prominent is de carroussel bij bepaalde veel voorkomende zoektermen. Deze carroussel staat dan boven de gewone zoekresultaten, wat deze een stuk naar beneden duwt. Stel, we zoeken naar informatie over Obama. Dan zie je iets als dit:

carroussel

Deze carroussels worden nu nog vooral in beslag genomen door grote nieuwsaanbieders. Je ziet onder andere Nu.nl, Volkskrant, NOS, enzovoorts. Allemaal gebruiken ze AMP al dus. Op deze termen zal het niet meevallen om er tussen te komen staan. Echter, ook tussen de gewone zoekresultaten vind je al vaak AMP resultaten, te herkennen aan een icoontje met een bliksemschicht en het woord AMP. Zie bijvoorbeeld het tweede resultaat:

amp icon

Probeer het maar eens op je mobieltje (op desktop zie je dit niet). Het zal je mogelijk opvallen hoeveel resultaten er al tussen staan...

AMP is echt snel!

De techniek op zich maakt al hele lichte en snelle pagina's, maar de caching door Google zelf zorgt ervoor dat ze helemaal snel laden. Laten we eens een voorbeeld bekijken, bijvoorbeeld de Weeblr blogpost waarin de AMP plugin is aangekondigd. Het gata dan om 3 versies: De gewone HTML pagina, de AMP versie en de door Google gecachete versie:

  • https://weeblr.com/blog/accelerated-mobile-page-for-joomla -> Gewone versie
  • https://weeblr.com/blog/accelerated-mobile-page-for-joomla/amp -> AMP versie
  • https://google.com/amp/weeblr.com/blog/accelerated-mobile-page-for-joomla -> Google hosted /cached versie (niet toegankelijk op desktop, dan wordt je geredirect)

Zoals je ziet als je ze bekijkt is de AMP versie een hele kale versie met nauwelijks modules en soms zelfs geen menu. De content is verder identiek. Laten we eens kijken hoe goed de performance is van de verschillende versies:

Gewone versie in GT-metrix:

html version performance

AMP versie in GT-Metrix:

amp version performance

Google hosted versie in GT-Metrix:

google version performance

Ik weet niet zeker of de laatste test helemaal goed ging in GTmetrix, maar het effect lijkt me duidelijk: minder en lichtere resources en veel snellere laadtijden!

Moet ik AMP nu al gaan gebruiken????

Dit is de hamvraag natuurlijk. Wel of niet gebruiken? Ook al zit Google de techniek flink te pushen, het zou ook best kunnen zijn dat over 1 of 2 jaar het project weer afgeblazen wordt, we hebben het vaker gezien. Ook niet alle SEO profs zijn het er onderling over eens. Zo staat op de SEMrush website een recent artikel waarin de conclusie is dat het voor responsive sites niet nodig zou moeten zijn, of zelfs onwenselijk, zie (www.semrush.com/blog/to-amp-or-not-to-amp-what-is-best-for-your-website). Aan de andere kant zijn er ook veel SEO-ers die van mening zijn dat het gezien de signalen die Google afgeeft wel degelijk al zin heeft en mogelijk al snel een ranking-voordeel kan opleveren. Als je concurreert met sites als Nu.nl en de Volkskrant is waarschijnlijk zelfs een must, anders mis je zichtbaarheid in de carroussel.

Verder wordt het nu vooral aangeraden voor sites met veel nieuws of blog-artikelen en tegenwoordig ook sites met recepten. Een bedrijf als Ebay heeft het trouwens ook al op veel van zijn ecommerce pagina's aangezet. Trouwens, kijk ook eerst naar het gedrag van je bezoekers: bekijken ze je site meestal op desktop, dan is de prioriteit vrij laag, maar bij vooral mobiele bezoekers is de urgentie al hoger.

Hoe dan ook, vooral bij kleinere websites is gewoon nog even afwachten waarschijnlijk helemaal geen slecht idee...

AMP support in Joomla

Een paar maanden geleden is de wbAMP plugin van Weeblr uitgebracht. Dezee levert AMP support in Joomla. Je kunt dit bijvoorbeeld in actie zien op de Weeblr website. De blogpost gewijd aan het uitkomen van de plugin heeft al een AMP versie:

Zoals je ziet heeft de AMP versie een minimale look en feel met nauwelijks modules en zelfs geen menu. Dit is hoe de plugin werkt, vooral de component wordt getoond, en modules worden gestript. Binnen de plugin kunnen wel simpele zaken worden toegevoegd, zoals een simpele header en footer en eventueel een advertentieblok. Het verschil in performance tussen de twee URL's wordt snel duidelijk bij het runnen van een performance test:

Volledige versie in GT-metrix:

before amp

AMP versie in GT-Metrix:

after amp

Installeren en configuren van de wbAMP plugin

De plugin is beschikbaar in een gratis community versie en een betaalde pro-versie. De pro versie heeft wat meer opties en K2 support. Na installaties zijn er 2 of 3 plugins geinstalleerd. De plugins K2 wbAMP support en com_content wbAMP support hebben geen opties, ze moeten simpelweg aan staan. De plugin genaamd wbAMP is de plugin die alles controleert. Na installatie staan de plugins standaard aan, maar ze doen nog niks, je moet specifiek aangeven welke pagina's een geoptimaliseerde versie krijgen:

joomla amp plugin wbamp

Om te selecteren welke pagina's geoptimalizeerd moeten worden ga je naar het Select pages tabje. Met de help-text naast de opties is nel duidelijk hoe je de settings moet aangeven. Om bijvoorbeeld alleen statisch Joomla artikelen te optimalizeren (com_content), pas je de volgende instellingen toe:

wbamp com content rules

Daarnaast kun je met de andere tabjes nog meer instellen:

  • Meta data: zet een header en een header image en stel bepaalde publisher informatie in
  • Analytics: stel je Google Analytics web property in
  • Custom elements: configureer een menu, een footer module, social media buttons
  • Ads Networks: toon een advertentieblok
  • Advanced: vul je update keys in voor automatische updates

Hierna krijg je voor je ingestelde pagina's een geoptimaliseerde versie met een minimale look, zoals bijvoorbeeld zo:

wbamp template

Je ziet, hij is behoorlijk kaal, maar hij laadt razendsnel, en daar gaat het om. Daarnaast kun je nog wel bepaalde zaken aanpassen middels overrides.

Trouwens, je kunt een WbAMP subscriptie krijgen bij Weeblr.com met 20% korting:

Coupon 5RXHD-NYJNF-GFJ7H voor 20% discount

Sinds november 2016 is ook een AMP-plugin uitgebracht door de makers van Jsitemap, te weten Jamp. Meer informatie vind je hier: www.storejextensions.org/extensions/jamp.

Valideer je syntax

Je syntaxmoet wel valide zijn, check dit goed, anders worden je pagina's niet geindexeerd! Je kunt dit doen door je URL in te vullen op www.search.google.com/search-console/amp. Of je gebruikt de Chrome AMP Validator.Deze is erg handig. Ten eerste detecteert het of er een AMP versie is van gewone pagina's en daarnaast checkt het de validiteit van de AMP pagina:

chrome validator

Als de syntax verder goed is zal Google je AMP pagina's vanzelf vinden en inderen door de rel=amphtml code,maar je kunt ook een speciale AMP sitemap aanbieden. Je kunt er een maken met Jsitemap.

Search Console en Analytics

Check dan na een paar dgen / weken de voortgang in Google Search Console. Je kunt de status van je pagina's bekijken onder Search Appearance >> Accelerated Mobile Pages:

search console

Hopelijk vind je dan geen fouten. Om vervolgens te zien hoe goed je pagina's het doen in de Google zoekresultaten ga je naar Search Traffic >> Search Analytics en zet je de filter optie onder Search Appearance op AMP non-rich results:

search analytics

Ook in Google Analytics kun je je statistieken bekijken: zorg dat je Analytics UA-code in de Weeblr plugin geplaatst wordt en je pagina's worden bijgehouden. Google adviseert om een aparte property in Analytics in Analytics aan te maken voor AMP trouwens.

Bevindingen op Joomlaseo.com

Ik heb AMP geinstalleerd in Augustus 2016.Aangezien mijn site voor 85-90% desktop bezoekers heeft was het niet een must voor mij, maar ik wilde er vooral mnee experimenteren, en op zich valt mijn site in de goede categorie. Ik krijg normaal al weinig mobiele bezoekers, dus nu ook niet veel AMP bezoekers, maar het begint te komen. Dit zie ik in Search Console:

 joomlaseocom results

Grappig om te zien welke oekwoorden vooral AMP bezoek opleveren ;) Nou, tot zover, dit is waarschijnlijk mijn langste blogpost ooit. Succes met je eigen experimenten...

Deze blogpost is oorspronkelijk geschreven in February 2016 maar is volledig herschreven in December 2016.

 

Over deze site

Joomlaseo.com is volledig gebouwd en geschreven door Simon Kloostra, SEO Specialist en Webdesigner uit Utrecht. Ik heb ook een boek geschreven en blogs voor bedrijven als OStraining, TemplateMonster, SEMrush en dergelijke.

Recommended by Joomlaseo.com