Het web is constant in ontwikkeling en voor veel ondernemers betekent dit dat ze constant op de hoogte moeten blijven van veranderingen bij Google. Als je je niet aanpast, kan dat betekenen dat je snel achter de zaken aanloopt. Google AMP, het mobiele initiatief om het internet te versnellen, nadert zijn eenjarig jubileum. Omdat het al veel stabieler is dan pakweg 6 maanden geleden, dachten we dat nu het juiste moment is om enkele stappen te delen over hoe je kan beginnen met Google AMP binnen WordPress. Ook bespreken we de voor- en nadelen van dit nieuwe platform.

Wat is Google AMP?

Google AMP (Accelerated Mobile Pages Project) werd oorspronkelijk gelanceerd in oktober 2015. Het project is gebaseerd op AMP HTML, een nieuw open framework dat volledige is opgebouwd uit bestaande webtechnologieën en waarmee websites lichtgewicht webpagina’s kunnen bouwen. Simpel gezegd is het een manier om een uitgeklede versie van je huidige webpagina te tonen.

Vanaf de eerste dag was snelheid een van de belangrijkste speerpunten van AMP. Het is misschien wel een van de meest frustrerende dingen van het mobiele internet – uit recent onderzoek van Google blijkt dat 53% van de mensen een website verlaat als de site niet binnen 3 seconden laadt. Dat is slecht nieuws voor iedereen: gebruikers, bedrijven, uitgevers, websites en het mobiele web als geheel. – David Besbris, AMP-projectleider bij Google

Volgens het meest recente State of the Online Retail Performance-rapport van Akamai is elke tiende van een seconde van belang. Zelfs een lichte toename in paginalaadtijd naar 2,8 seconden zorgde voor een daling van het conversiepercentage met 2,4%.

conversiepercentages op mobiel

Correlatie tussen snelheid en conversiepercentages op mobiel

Veel grote bedrijven hebben het afgelopen jaar Google AMP geïntroduceerd, zoals WordPress, Reddit, eBay, Pinterest, Washington Post, Wired en Gizmodo. Volgens Google zag Slate een stijging van 44% in maandelijkse unieke bezoekers en een 73% toename in bezoeken per maand voor elke unieke bezoeker.

Wanneer een pagina wordt weergegeven via AMP in Google, staat het AMP-symbool ernaast, zoals je hieronder kan zien in de demo van New York Times. Let op: om dit te testen moet je op een mobiel apparaat zijn. Je kan ook de device-emulator van Chrome devtools gebruiken. Met gestructureerde gegevensmarkering kan Google je content prominenter presenteren in de zoekresultaten. AMP-artikelen met de juiste mark-up-eigenschappen kunnen bijvoorbeeld de felbegeerde carrouselplek in SERP’s krijgen, zoals hieronder wordt weergegeven.

Google AMP-carrousel

Google AMP-carrousel

En hier is een voorbeeld van hoe een AMP-pagina eruitziet op de website van The New York Times. Zoals je ziet is het erg eenvoudig en simpel, wat precies het doel is van AMP. Dit zorgt ervoor dat de pagina snel laadt en een betere gebruikerservaring biedt.

Voorbeeld Google AMP-pagina

Voorbeeld Google AMP-pagina

Zoals met elk nieuw platform moet je de voor- en nadelen afwegen en beslissen of dit de juiste zet is voor je bedrijf en/of website.

Voordelen van Google AMP

Nadelen van Google AMP

Vanaf februari 2017 is Google AMP begonnen met het weergeven van URL’s van de uitgever. Daarvoor werd alleen de versie van Google weergegeven, die uit de cache werd getoond. Dit leverde echter zorgen op vanuit een branding-perspectief. Gelukkig realiseerde Google zich dit ook en voerde een verandering door. Het URL-veld van een browser blijft nu een Google-URL weergeven. In het AMP-headergedeelte wordt echter een link- of kettingpictogram weergegeven, wat ook wel de ‘anker’-knop wordt genoemd. Als je hierop klikt, wordt de directe URL van de uitgever weergegeven, zodat deze gemakkelijk gekopieerd en geplakt kan worden. Dit is nog steeds geen perfecte oplossing, maar het is beter dan niets.

Hier is nog een voorbeeld van het verliezen van branding.

Het is ook belangrijk om op te merken dat als de enige mobiele versie van een pagina op je website een AMP-versie is, Google nog steeds de desktopversie voor indexering zal gebruiken, zelfs wanneer Google de index overzet naar de mobile-first-index.

Hoe Google AMP in te stellen in WordPress

Gelukkig is het nu een stuk eenvoudiger om Google AMP in WordPress te implementeren dan zes maanden geleden. Er is veel vooruitgang geboekt met WordPress-plug-ins en het platform als geheel. Vergeet echter niet dat je je code moet valideren bij Google om de AMP-versie van je site in SERP’s te laten zien. Een plug-in verandert je bericht in een AMP-versie, maar het besluit ligt altijd bij Google om de AMP-versie te tonen.

In principe werkt het zo dat je WordPress-bericht een andere URL krijgt toegewezen. Dit wordt allemaal automatisch afgehandeld door de WordPress plug-in. Normaal gesproken wordt /amp of /?amp aan je bericht toegevoegd. Hier is een voorbeeld:

Oorspronkelijke URL blogartikel: https://domein.nl/blogartikel
AMP-URL blogartikel: https://domein.nl/artikel/amp/

Google AMP WordPress-plug-ins

Er zijn momenteel 2 populaire WordPress-plug-ins die je kunnen helpen bij het instellen van Google AMP. De eerste is de gratis officiële AMP-plug-in die door het team van Automattic is ontwikkeld.

google amp wordpress plugin

Officiële Google AMP-plug-in van Automattic

Op het moment van schrijven heeft deze meer dan 200.000 actieve installaties met een score van 3.5 van de 5 sterren. Je kan deze downloaden vanuit de WordPress-bibliotheek of door te zoeken vanuit je WordPress-dashboard onder ‘Add New‘ in het plug-ins tabblad. Je kan het uiterlijk aanpassen onder de ‘Appearance AMP’-editor (zoals hieronder te zien is). Met deze plug-in heb je echter beperkte opties en de toepasbaarheid van de plug-in is grotendeels afhankelijk van je kennis over het implementeren van extra filters voor features als Adsense of Analytics.

WordPress AMP-stijlen

WordPress AMP-stijlen

Het is ook belangrijk om op te merken dat de plug-in alleen artikelen ondersteunt en geen pagina’s, hoewel er is aangekondigd dat dit in de nabije toekomst verandert. Hieronder zie je een voorbeeld van hoe ons WordPress-artikel er na de installatie van de plug-in uitziet.

WordPress AMP-voorbeeld

WordPress AMP-voorbeeld

Als je makkelijk extra functies toe wil voegen, dan kan je het best eens kijken naar de plug-in AMP for WP. Dit is in feite een geavanceerdere versie van de officiële AMP-plug-in en komt met extra functies en support. De plug-in is ontwikkeld door Ahmed Kaludi en Mohammed Kaludi, die een succesvolle WordPress-themawinkel runnen.

AMP for WordPress-plug-in

AMP for WordPress-plug-in

Op het moment van schrijven heeft de plug-in meer dan 70.000 actieve installaties met een score van 4.6 van de 5 sterren. Je kan deze downloaden vanuit de WordPress-bibliotheek of door te zoeken vanuit je WordPress-dashboard onder ‘Add New’ in het plug-ins-tabblad. Met deze plug-in kan je je Google AMP-configuratie op veel verschillende manieren wijzigen. Ook biedt de plug-in ondersteuning voor pagina’s. Hieronder bespreken we de aanpassingen en functies die je kan maken vanuit het dashboard van de AMP-plug-in.

We gebruiken deze plug-in zelf ook bij Kinsta! Je kan AMP aan het werk zien in dit artikel als je gaat naar https://kinsta.com/blog/google-amp/amp/. (Update: vanaf begin september hebben we geen AMP meer op onze site. Bekijk onze casestudy over waarom we kozen om Google AMP uit te schakelen). Hieronder vind je een voorbeeld van hoe een Kinsta blogpost eruitziet in de SERP’s. Je kan het AMP-logo duidelijk zien.

Voorbeeld van Kinsta AMP in SERP's

Voorbeeld van Kinsta AMP in SERP’s

General

In het ‘general’-tabblad, kan je een logo toevoegen, je website aanpassen en kiezen of je AMP ook voor pagina’s wil inschakelen. Afhankelijk van je site en verkeer, wil je AMP misschien alleen inschakelen op je blog (artikelen).

Algemene opties voor versnelde mobiele pagina's

Algemene opties voor versnelde mobiele pagina’s

Homepage

Onder ‘Homepage’ kan je kiezen of je support voor je homepage in- of uitschakelt. Verder kan je de thumbnail-grootte kiezen en bepalen wat er gebeurt als bezoekers op het logo klikken (naar de AMP- of niet-AMP-versie van je site gaan.

AMP homepage

AMP homepage

Page Builder

Onder ‘Page Builder’ kan je het gebruik van AMP-widgets toestaan.

AMP page builder

AMP page builder

Design

Onder ‘Design’ kan je de post-builder opstarten of kiezen uit vooraf ontworpen sjablonen. U kunt HTTPS inschakelen voor zoeken en ook een knop Nu bellen toevoegen. Verder is hier de mogelijkheid om aangepaste CSS in te voegen. Op onze site voegen we bijvoorbeeld de volgende code toe om de kleur van de header aan te passen:

.amp-wp-header {background-color:#5CC0C0;}
AMP design

AMP design

Single

Onder ‘Single’ kan je sociale pictogrammen inschakelen, links uitschakelen, biografie van auteurs laten zien en zelfs de instellingen voor gerelateerde berichten wijzigen.

AMP single post

AMP single post

Advertisement

In het scherm van ‘Advertisement’ kan je AdSense inschakelen en de locatie van advertenties kiezen. Deze plug-in biedt een van de gemakkelijkste manieren om Adsense aan Google AMP toe te voegen. Voor de lezers onder jullie die afhankelijk zijn van advertenties kan dit een zeer nuttige functie zijn (voorgestelde lezing: Hoe Google AdSense toe te voegen aan WordPress).

AMP advertisement

AMP advertisement

AMP Menu

Onder ‘Menu’ kun je kiezen of je /amp/ aan het einde van de menu-URL’s wilt toevoegen. Misschien wil je dat je bezoekers op de AMP-versie van je site blijven wanneer ze een menu-item aanklikken. Mocht dat zo zijn, dan kan je dat hier inschakelen.

AMP menu

AMP menu

Social

In het menu van ‘Social’ kan je de sociale netwerken toevoegen waarvan je wil dat ze tevoorschijn komen. Voor Facebook moet je een gratis App ID registreren.

AMP social

AMP social

SEO

Het SEO-scherm is waarschijnlijk een van de belangrijkste, omdat deze betrekking heeft op hoe Google je website ziet en je AMP-content rankt. We raden aan om de optie ‘Meta Description’ aan te zetten. Als je de Yoast SEO-plug-in gebruikt, raden we aan de opties ‘Meta Tags from Yoast’ en ‘Yoast Description in ld+jason’ in te schakelen.

AMP seo options yoast

AMP SEO options

Analytics

Op het Analytics-scherm kan je trackingscripts toevoegen van Google Analytics en Google Tag Manager. Als je bezoekersstatistieken up-to-date wil houden, dan is dit een cruciale stap.

AMP analytics

AMP analytics

De plug-in ondersteunt daarnaast Segment Analytics, Piwik Analytics, Quantcast Measurement, comScore, Effective Measure, StatCounter, HitStats Analytics, Yandex Metrika en Chartbeat Analytics.

Structured Data

Op het scherm ‘Structured Data’ kan je het standaard gestructureerde-gegevenslogo en artikelafbeelding vervangen.

AMP structured data

AMP structured data

Contact Form

In dit ‘Contact Form’-scherm kan je kiezen of je ondersteuning voor Contact Form 7 wil inschakelen.

AMP contact form

AMP contact form

Notifications

In dit scherm kan je een cookiewaarschuwing inschakelen. Dit kan handig zijn voor mensen uit landen met strengere privacywetten.

AMP notifications

AMP notifications

Comments

Op deze pagina kun je ondersteuning inschakelen voor externe reactiesystemen, zoals Disqus en Facebook Comments.

Downtime en WordPress problemen? Kinsta is de hosting oplossing speciaal ontworpen om jou tijd te besparen! Bekijk onze kenmerken
AMP comments

AMP comments

Advanced Settings

Onder ‘Advanced Settings’ kan mobiele omleidingen inschakelen. Houd er rekening mee dat normaal gesproken AMP alleen wordt ingeschakeld voor mobiele gebruikers die vanuit SERP’s naar je website gaan. Als een mobiele gebruiker rechtstreeks naar je site surft, krijgt deze geen AMP-versie te zien, tenzij je een omleiding inschakelt. Je kan hier ook een aangepaste HTML invoeren en wijzigen wat er gebeurt als bezoekers klikken op de link in de footer.

AMP advanced settings

AMP advanced settings

Extensions

De ontwikkelaars bieden ook premium extensies aan waarmee je tegen betaling de functionaliteiten van de plug-in uit kan breiden. Sommige populaire opties die het overwegen waard zijn, zijn e-mailopties, CTA-buttons en ondersteuning voor aangepaste berichttypen.

AMP extensions

AMP extensions

En zo ziet onze post eruit met de AMP for WP-plug-in, wanneer we die uitvoeren op ons Kinsta-blog.

Voorbeeld AMP for WP

Voorbeeld AMP for WP

De ontwikkelaars van AMP for WP hebben onlangs ook een nieuwe plug-in uitgebracht, genaamd AMP WooCommerce, waarmee je AMP kan toevoegen aan je ecommerce-website.

amp woocommerce

AMP WooCommerce plug-in

Jouw Google AMP-code valideren

Nadat de Google AMP-configuratie op je WordPress-site is gelukt, moet je ervoor zorgen dat je code wordt gevalideerd. Als dit niet het geval is, zal Google de AMP-versie niet weergeven in SERP’s. Een manier om dit te testen is om je WordPress-site door de Google AMP Validator-tool te halen. Onderaan de pagina zal je vervolgens te zien krijgen of je code gevalideerd is.

google amp validator

Google AMP validator

Je kan ook de gratis Chrome AMP-extensie downloaden die elke pagina voor je valideert. Als je website een rode kleur krijgt, dan kan je erop klikken om de foutmeldingen en waarschuwingen op de pagina te zien.

Google AMP-fouten

Google AMP-fouten

Mocht het niet gelukt zijn om je pagina te valideren, dan krijg je waarschijnlijk zoiets te zien: ‘Not a valid AMP page.’ In het onderstaande voorbeeld was dit te wijten aan het gebruik van oude en niet langer ondersteunde HTML-tags, <deltime> en <instime>. Er is een volledige lijst met door AMP ondersteunde HTML-tags beschikbaar. Ongeldige AMP-pagina’s hebben geen AMP-specifieke functies in de zoekresultaten van Google.

Geen geldige AMP-pagina

Geen geldige AMP-pagina

Je kan je site ook controleren op problemen met AMP in Google Search Console in de sectie ‘Search Appearance’. Het is belangrijk om te weten dat veel gebruikers grote vertragingen hebben gemeld met AMP-rapportage in Google Search Console. Dit is waarschijnlijk omdat het nog steeds een vrij nieuw platform is en crawlen niet zo vaak voorkomt.

google search console amp

Versnel rapport van mobiele pagina’s in GSC

Als je fouten tegenkomt, zal Google je per e-mail op de hoogte stellen dat je de vereiste gestructureerde gegevens moet toevoegen aan je AMP-pagina’s.

amp fouten google search console

AMP-fouten – GSC

Google AMP SEO

Een ander aspect waar je misschien vragen over hebt, is hoe SEO nou precies werkt. Je hebt immers nu twee exemplaren van dezelfde pagina of hetzelfde artikel. Maak je echt geen zorgen over dubbele content: beide plug-ins maken gebruik van canonieke tags met AMP. Canonieke tags vertellen Google dat je desktopversie de oorspronkelijke content is. Google heeft automatisch in de gaten dat de AMP-pagina’s op je website origineel zijn, omdat deze worden geleverd met een header-tag die de Googlebot naar je AMP-pagina verwijst.

Voorbeeld op de originele pagina:

<link rel="amphtml" href="https://domein.nl/amp/">

Voorbeeld op de AMP-pagina:

<link rel="canonical" href="https://domein.nl/">

De AMP for WP-plug-in die we eerder beschreven werkt ook uitstekend samen met de Yoast SEO-plug-in om meta- en OG-tags toe te voegen voor SEO en sociale doeleinden. Zie voorbeeld hieronder.

Google AMP-metatags

Google AMP-metatags

New Relic monitoring met Google AMP

Het is ook belangrijk op te merken dat klanten die gebruik maken New Relic-monitoring – die we ook bij Kinsta zelf gebruiken – te maken kunnen krijgen met een foutmelding, doordat hun Google AMP validator door een extern script niet werkt:

Het 'script'-tag is niet toegestaan, behalve in specifieke formulieren.

Dit komt omdat HTML-pagina’s die zijn geoptimaliseerd voor Google AMP geen JavaScript van derden mogen bevatten. De hierboven genoemde AMP for WP-plug-in biedt gelukkig volledige ondersteuning voor New Relic. Als je de New Relic Browser op AMP-pagina’s wil uitschakelen, volg dan de instructies uit het artikel ‘Browser-monitoring uitschakelen voor specifieke pagina’s.’ Je kan ook gebruik maken van een gratis plug-in, genaamd Disabled NewRelic For AMP.

AMP inschakelen voor externe koppelingen met Cloudflare

Cloudflare heeft een recent gelanceerde functie waarmee je versnelde mobiele links voor externe AMP-links kan inschakelen. Een van de voordelen voor je site is dat AMP-content rechtstreeks in de viewer wordt geladen van de site die naar de content linkte. Nadat de lezer klaar is met het consumeren van je content, wordt je lezer automatisch teruggebracht naar je website bij het sluiten van het artikel. Het zou dus de tijd die een gebruiker op je website zit, kunnen vergroten. Je kan dit inschakelen in het ‘Performance’-dashboard van Cloudflare.

cloudflare accelerated mobile links

Cloudflare Accelerated Mobile Links

Samenvatting

Zoals je hebt kunnen lezen, zijn er een aantal eenvoudige methodes om Google AMP aan het werk te krijgen op je WordPress-site. Is het echt slim om dit te doen? Het antwoord hierop hangt voornamelijk af van wat voor soort WordPress-site je beheert. Als je een online magazine of nieuwssite beheert, kan het verstandig zijn om te kijken hoe je Google AMP op jouw site kan implementeren en AdSense-posities kan testen. Als je in de SaaS-dienstverlening zit, dan kan het je conversies aantasten als je niet voorzichtig bent. Google AMP is zeker een grote verandering, vooral als je al veel mobiel verkeer ontvangt. Ons advies is om te testen, want dat is de enige manier om te weten of het een positieve of negatieve invloed heeft op jouw bedrijf.

Heb je nog andere tips over het gebruik van Google AMP met WordPress? Als dat zo is, horen we het graag hieronder in de reacties. Bekijk ook de officiële AMP-roadmap.


Als je dit artikel leuk vond, dan ga je Kinsta’s WordPress hosting platform ook heel erg leuk vinden! Of het nu gaat om het versnellen van je website of de 24/7 support van ons ervaren WordPress-team. Onze door Google Cloud aangedreven infrastructuur is gericht op automatische schaalbaarheid, prestaties en beveiliging. Laat ons jou het Kinsta verschil tonen! Bekijk onze pakketten