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.

[toc]

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.

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 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.

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 je 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

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.

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

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.

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.

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.

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.

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.

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.

Update januari 2020

Hoewel ik nog steeds de logica van AMP-pagina’s snap en wat Google probeert te doen, heb ik ondertussen zelf AMP weer uitgeschakeld op mijn website.

Ik merkte op mijn website geen voordelen van AMP en had graag meer invloed over hoe mensen mijn website zien. Ik wil hier niet mee zeggen dat jij AMP niet moet inschakelen. Het kan heel goed zijn dat jij er met jouw website wel voordelen uit haalt.

Wil je meer informatie waarom ik AMP heb uitgeschakeld en hoe je dit op een goede manier kunt doen? Bekijk dan het artikel Google AMP uitschakelen in WordPress.