WordPress AMP (Accelerated Mobile Pages) tutorial

Google introduceerde in oktober 2015 het Accelerated Mobile Pages (AMP) project, wat de volgende stap is in de mobiele revolutie.

Google wil met het AMP project zorgen dat websites nog sneller te bereiken zijn op mobiele apparaten, omdat het mobiele web vaak nog traag is en we eigenlijk mobiele gebruikers een betere (snellere) ervaring moeten kunnen geven.

Sinds augustus 2016 is het geactiveerd in Nederland en zijn AMP-pagina’s dus ook zichtbaar geworden in de mobiele zoekresultaten.

In dit artikel kun je lezen wat AMP nou precies is en natuurlijk hoe je AMP kunt instellen op jouw WordPress website.

Wat is AMP?

AMP is een manier om webpagina’s te bouwen voor statische content die supersnel weergegeven kunnen worden. Om een pagina instant te kunnen laden beperkt AMP wat je kunt doen. Zo worden onder andere design-elementen gestript om de snelheid te verbeteren.

AMP-pagina’s zien er eigenlijk dus gewoon uit als een gestripte versie van je normale webpagina’s, maar de content blijft natuurlijk wel altijd goed zichtbaar. Niet alle advertenties zullen te zien zijn op de AMP-versie van een pagina en de analytics code om de statistieken bij te houden werkt ook niet altijd. Alles wordt dus echt volledig gestript om de AMP-versie zo snel mogelijk te houden.

Een AMP-pagina bestaat daarom uit AMP HTML, AMP JS en eventueel ook Google AMP Cache. AMP HTML zorgt ervoor dat er betrouwbare prestaties geleverd worden, de AMP JS-bibliotheek zorgt voor de supersnelle laadtijd van de AMP-pagina’s en eventueel kunnen deze pagina’s geleverd worden door de Google AMP cache.

Je kunt het simpel gezegd allemaal dus als volgt zien. Voor elke pagina op een website kan een speciale AMP-variant gemaakt worden. De AMP-variant bestaat uit statische AMP HTML en AMP JS, wat ervoor zorgt dat rijke content als tekst, afbeeldingen en video’s supersnel geladen worden.

Alle scripts en elementen die het laden traag kunnen maken worden door Google geweerd en vervangen om het AMP-proof te maken. De CSS van je website wordt ook gestript, waardoor de AMP-versie van je website er vaak toch wat anders en kaler uit zal zien. AMP is dus een uitgeklede variant van je website.

Wil je meer weten over het Accelerated Mobile Pages project, dan kun je ook zeker onderstaande video bekijken. Hierin wordt nog eens uitgelegd wat AMP nou precies is.

Wanneer zijn AMP-pagina’s zichtbaar?

Wanneer je AMP op je website activeert ben je natuurlijk ook benieuwd wanneer deze pagina’s zichtbaar zijn voor bezoekers van je website.

Indien een mobiele gebruiker op een link klikt richting je website zal hij gewoon op de normale versie van je website terechtkomen en dus niet op de AMP-versie. Bezoekers kunnen alleen maar op de AMP-versie uitkomen via de zoekresultaten van Google of via een directe link naar de AMP-pagina.

Wanneer Google de AMP-pagina’s in de zoekresultaten weergeeft heb je alleen niet zelf in de hand. Het is een keuze die Google maakt om je AMP-pagina bijvoorbeeld hoger in de zoekresultaten te zetten of op een andere manier weer te geven.

Je kunt AMP-pagina’s in Google herkennen aan het AMP icoontje. Het ziet er als volgt uit.

AMP in de zoekresultaten van Google

Wanneer je vervolgens naar de website gaat zal je zien dat de pagina echt razendsnel geladen wordt en dat je in een soort framework van Google blijft.

Video: WordPress amp instellen op je website

In onderstaande video kun je over mijn schouder meekijken hoe jij AMP kunt instellen op je WordPress website. Daarnaast kun je in deze video ook zien hoe je kunt controleren of je AMP-pagina’s geen foutmeldingen bevatten.

Wil je meer informatie of wil je op je gemak alles kunnen lezen in tekstvorm? Je kunt hieronder verder gaan met het artikel om alles stapsgewijs uitgelegd te krijgen.

WordPress AMP plugin activeren op je website

AMP WordPress plugin

Wanneer je de stap wilt zetten om een AMP-versie van je website te maken, dan kom je bij WordPress al snel uit bij een plugin als oplossing. Automattic heeft een plugin ontwikkeld waarmee je AMP kunt activeren voor je website. De plugin heet natuurlijk gewoonweg AMP.

Zodra je de plugin activeert is er direct een AMP-versie van alle berichten op je website beschikbaar. Je kunt de AMP-versie van een pagina benaderen door /amp/ achter de URL te plaatsen. Voor pagina’s is op dit moment geen ondersteuning, maar hier wordt wel aan gewerkt.

Verder zorgt de plugin er ook voor dat er een meta tag aan je pagina’s wordt toegevoegd, zodat Google deze pagina’s kan herkennen.

Tot slot kun je met deze plugin ook een aantal kleine dingen aanpassen. Wanneer je naar Weergave -> AMP gaat, kun je de koptekstkleur en de kopachtergrond & linkkleur aanpassen en kiezen tussen een light of dark kleurschema.

AMP kleurinstellingen

Het zijn niet heel veel opties en mogelijkheden die je hebt, daarom heb ik het zelf voor Webtalis verder geoptimaliseerd met behulp van een plugin van Yoast.

WordPress AMP verder optimaliseren met Yoast

Glue for Yoast SEO & AMP

De AMP plugin van Automattic is een mooie start om de basis neer te zetten. Met de plugin Glue for Yoast SEO & AMP kun je alles nog verder optimaliseren en aanpassen.

De Glue for Yoast SEO & AMP plugin zorgt ervoor dat Yoast SEO goed geïntegreerd wordt in de AMP-versie van je website en dat de meta-data op de juiste manier wordt geïmplementeerd.

Verder had je bij de AMP plugin niet heel veel opties om de styling aan te passen, maar met behulp van deze plugin krijg je hier een stuk meer opties in. Daarnaast heb je ook nog de mogelijkheid om een Analytics code toe te voegen, zodat je in de statistieken kunt bekijken hoe vaak de AMP pagina’s bezocht worden.

Yoast SEO AMP post types ondersteuning

Wanneer je de plugin hebt geactiveerd en naar SEO -> AMP gaat, dan krijg je de optie om aan te geven aan welke post types Yoast SEO ondersteuning moet geven.

Yoast SEO AMP ondersteuning voor post types

Standaard staan alleen de berichten ingeschakeld, wat prima is omdat er met de AMP plugin nog geen ondersteuning is voor pagina’s.

Je hoeft hier dus eigenlijk niets te veranderen, maar eventueel kun je al wel pagina’s inschakelen met het oog op de toekomst als dit ook beschikbaar komt in de AMP plugin.

Yoast SEO AMP design aanpassen

Wanneer we doorgaan naar het tabblad design zal je wel vrolijk worden. Je krijgt hier alle mogelijkheden om ervoor te zorgen dat de AMP-versie van je website helemaal in de goede huisstijl wordt weergegeven.

Yoast SEO AMP Design instellingen

Je kunt een AMP icoontje toevoegen (je logo), een standaard afbeelding instellen die gebruikt wordt als er geen uitgelichte afbeelding is ingesteld en allerlei kleuren aanpassen.

Verder heb je op de pagina ook nog de mogelijkheid om CSS code en extra code aan de <head> sectie toe te voegen.

CSS en extra code toevoegen voor AMP

Op deze manier kun je onder andere zorgen dat het lettertype hetzelfde is als op de normale versie van je website en eventueel kun je met de juiste kennis nog wat extra design dingetjes aanpassen.

WordPress AMP analytics via Yoast SEO

De AMP-versie van je website is volledig gestript. Het kan dus heel goed dat de Google Analytics code verdwenen is, tenzij je natuurlijk een plugin gebruikt die al ondersteuning voor AMP heeft.

Op het tabblad Analytics kun je daarom eenvoudig handmatig je Google Analytics (of andere analytics) toevoegen, zodat je de statistieken wel goed kunt bijhouden.

WordPress AMP Analytics

Zei ik eenvoudig? Dat is het op zich wel, maar je kunt niet de standaard Analytics code gebruiken, want de code moet wel AMP-proof zijn. Wanneer je de standaard Analytics code probeert toe te voegen zal er niks opgeslagen worden.

De onderstaande Analytics code kun je gebruiken om de statistieken van de AMP-versie van je website te meten. Het enige wat je hier nog aan moet veranderen is natuurlijk de UA-code. Vervang deze voor de UA-code van jouw website om het goed te laten werken.

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

AMP-pagina’s in Google Search Console

Wanneer je eenmaal AMP hebt geactiveerd op je WordPress-website, ben je natuurlijk ook benieuwd of alles goed geïndexeerd wordt door Google.

In Google Search Console kun je dit bekijken door naar je website te gaan en dan naar Zoekopmaak -> Accelerated Mobile Pages. Je krijgt dan netjes een overzicht met het aantal URL’s dat door Google is geïndexeerd en of er fouten zijn gevonden.

Ik kreeg zelf in eerste instantie te zien dat ik twee fouten had op mijn website die niet voldeden aan de eisen van AMP, omdat een enkele CSS aanpassing problemen opleverde en ik ergens een H2 kopje verkeerd had staan.

indexering-status van AMP-pagina's (accelerated mobile pages) in de Google Search Console

Dankzij deze informatie heb ik het meteen kunnen oplossen en is mijn website weer volledig AMP-proof. Je kunt overigens ook altijd een test uitvoeren om te controleren of alles goed werkt, dit kun je doen via de officiële AMP-test website.

Wat je overigens niet moet vergeten is dat Google Search Console altijd wat achterloopt. Het kan dus rustig enkele dagen duren voordat je ziet dat er ook maar iets is geïndexeerd door Google.

Ik hoop dat alles ondertussen een beetje duidelijk is geworden en dat je nu zelf ook probleemloos AMP op jouw WordPress-website kunt activeren indien je hier behoefte aan hebt. Ik zou het persoonlijk wel aanraden, want AMP zal straks steeds vaker in de zoekresultaten naar boven komen.

18 reacties Voeg ook een reactie toe

  1. Hoi Maikel,

    Ten eerste wil ik je bedanken voor al de tips en uitleg die je hier deelt!
    Ik heb AMP toegevoegd. Helaas laat hij de pagina’s niet op een normale manier zien…Search console geeft geen kritiek probleem; alleen dat ingesloten video ontbreekt.
    Wat kan ik doen?

    • Nee, dit heb ik niet getest. Minder plugins hoeft overigens niet per definitie beter te zijn, het gaat ook om de kwaliteit van de plugin. Ik kan hier verder alleen weinig over zeggen bij deze plugin.

  2. Hoi Maikel,
    ik heb je tip en uitleg gelezen en is zeker van toepassing maar zoals eerder gemeld werk ik met Elegant Theme Divi en de Builder. Dus om het uit te proberen zal ik nog even moeten wachten op Elegant Theme.

    bedankt ik ben weer een stukje wijzer geworden wat dit allemaal inhield.
    nogmaals bedankt

  3. Hoi Maikel,

    Goede tip, duidelijk uitleg, zoals we van je gewend zijn 🙂 Ik ben ermee aan de slag gegaan en het werkt allemaal goed. Echter, het is wel belangrijk om te melden dat AMP werkt niet (goed) samenwerkt met bepaalde ‘builder’ thema’s, zoals die van Elegant Themes (Divi). AMP kan de lay-outs van deze thema’s (zelfs de mobiele layouts) niet herkennen en hierdoor ontstaat een nogal rommelige presentatie op de AMP-versies van de pagina’s. Bovendien veroorzaken deze thema’s een groot aantal foutmeldingen in Google Webmaster. Bij Elegant Themes wordt hier aan gewerkt, melden zij, maar voorlopig heb je weinig aan AMP als je gebruik maakt van deze thema’s. Van de andere kant kun je met deze thema’s ook responsive pagina’s maken die je kunt aanpassen voor verschillende mobiele apparaten en die redelijk snel laden. Er is dus nog geen man overboord, maar nog even wachten tot deze thema’s en AMP samen door 1 deur kunnen.

    • Ik maak persoonlijk nooit gebruik van Elegant themes, dus dat was voor mij wat moeilijk testen. Thanks in elk geval voor de toevoeging en ik ben benieuwd hoe snel ze het gaan oplossen.
      Bij de meeste thema’s gaat het gelukkig wel gewoon goed.

  4. Bedankt voor je tip, echter nu werkt de plugin Email before download niet meer omdat het script er waarschijnlijk uit verwijderd is. Is daar een oplossing voor?
    Kan ik bv specifieke berichten uitsluiten van een AMP versie?

    • Niet dat ik weet. Dat zou je aan de maker van de plugin kunnen vragen of dit toch nog op een bepaalde manier mogelijk is. Specifieke berichten uitsluiten is op dit moment niet mogelijk met deze plugin.

Geef een reactie