Google AMP – Zo implementeer je het in WordPress

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?
• Voordelen van Google AMP
• Nadelen van Google AMP
• Hoe Google AMP in te stellen in WordPress
• Jouw Google AMP-code valideren

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

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.

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.

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

• AMP is gratis en open source.
• AMP kan de laadtijd van je WordPress-site zeker verbeteren. En onthoud dat snelheid een rankingfactor is.
• Betere plaatsingen in SERP’s door middel van carrousel voor een betere CTR. Een populaire uitgever implementeerde Google AMP en kreeg 600% meer CTR’s!
• Google AMP forceert veel aanbevolen methodes om webprestaties te verbeteren, zoals het vermijden van grote CSS- en JS-frameworks
• Kan je conversies positief beïnvloeden.
• Het afgelopen jaar zijn er veel verbeteringen aangebracht en er zijn nu advertentie-opties beschikbaar in Google AMP. Dit betekent dat tijdschriften en nieuwe publicaties hun AdSense-inkomsten kunnen behouden of zelfs vergroten.
• Automatische afbeeldingsoptimalisatie (zelfs conversie naar het WebP-formaat!)
• AMP Lite zorgt voor verdere optimalisatie voor trage netwerkverbindingen. Google zag een gecombineerde vermindering van 45% in bytes.

Nadelen van Google AMP

• AMP is momenteel geen rankingfactor, maar dit kan in de toekomst veranderen. Dit kan zowel als een voordeel als nadeel beschouwd worden.
• AMP kan moeilijk zijn om te implementeren en te testen als je geen ontwikkelaar bent. Gelukkig maakt het WordPress-platform het je een beetje eenvoudiger.
• Introduceert een volledig nieuw, afzonderlijk platform en functionaliteit waar je tijd in moet steken. Wat is er gebeurd met het simpelweg optimaliseren van mobiele sites?
• Kan je conversies negatief beïnvloeden.
• Er zijn meldingen geweest van dat Google AMP statistieken verstoort in Google Analytics.
• In sommige gevallen leidde dit tot lagere engagement en hogere bounce-percentages.
• Sommige externe scripts en applicaties zijn niet ondersteund.
• Er is geen support voor sommige oudere browsers, zoals Internet Explorer 11. Google verklaarde dat in het algemeen de twee meest recente versies van de grote browsers, zoals Chrome, Firefox, Edge, Safari en Opera worden ondersteund. Hierbij ondersteunen ze de desktop-, telefoon-, tablet- en webview-versies van de respectievelijke browsers.
• Lees waarom Jan Dawson vindt waarom Google AMP het moeilijker, en niet makkelijker, maakt om op het internet te publiceren.
• Lees Alex Kras’ artikel waarin hij een aantal problemen met Google AMP beschrijft, samen met een antwoord van de technische leiding van het Google AMP-project.
• Tim Kadlec deelt zijn mening over Google AMP en de behoefte aan een beter alternatief: beleid voor contentprestaties.

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.

Another reason to not use Google AMP –> You lose your brand 🙂 cc @HuffingtonPost you might want to think about it 🙂 pic.twitter.com/n3LEHIOEBZ

— Syed Balkhi (@syedbalkhi) January 19, 2017

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.

So @maileohye confirmed that in a situation where there is desktop and AMP, Google will index desktop for mobile first. #StateofSearch

— Jennifer Slegg (@jenstar) November 14, 2016

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

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

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 plugins tabblad. Je kan het uiterlijk aanpassen onder de ‘Appearance AMP’-editor (zoals hieronder te zien is). Met deze plugin heb je echter beperkte opties en de toepasbaarheid van de plugin is grotendeels afhankelijk van je kennis over het implementeren van extra filters voor features als Adsense of Analytics.

Het is ook belangrijk om op te merken dat de plugin 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 plugin uitziet.

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

Op het moment van schrijven heeft de plugin 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 plugins-tabblad. Met deze plugin kan je je Google AMP-configuratie op veel verschillende manieren wijzigen. Ook biedt de plugin ondersteuning voor pagina’s. Hieronder bespreken we de aanpassingen en functies die je kan maken vanuit het dashboard van de AMP-plugin.

We gebruiken deze plugin 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.

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

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.

Page Builder

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

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;}

Single

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

Advertisement

In het scherm van ‘Advertisement’ kan je AdSense inschakelen en de locatie van advertenties kiezen. Deze plugin 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 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.

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.

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-plugin gebruikt, raden we aan de opties ‘Meta Tags from Yoast’ en ‘Yoast Description in ld+jason’ in te schakelen.

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.

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

Contact Form

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

Notifications

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

Comments

Op deze pagina kun je ondersteuning inschakelen voor externe reactiesystemen, zoals Disqus en Facebook 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.

Extensions

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

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

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

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.

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.

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.

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.

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.

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 plugins 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-plugin die we eerder beschreven werkt ook uitstekend samen met de Yoast SEO-plugin om meta- en OG-tags toe te voegen voor SEO en sociale doeleinden. Zie voorbeeld hieronder.

New Relic monitoring met Google AMP

Het is ook belangrijk op te merken dat klanten die gebruik maken New Relic-monitoring (licentie vereist), 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-plugin 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 plugin, 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.

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.

Brian Jackson

Brian heeft een enorme passie voor WordPress, gebruikt het al meer dan tien jaar en heeft zelfs al aantal premium plugins ontwikkeld. Brian houdt van bloggen, films en hikes. Kom in contact met Brian op Twitter.

• LinkedIn
• Twitter