AMP instellen: Je website als Accelerated Mobile Page
Met amp (accelerated mobile pages) worden websites geoptimaliseerd voor mobiel gebruik. Omdat dit soort websites worden voorgetrokken in zoekresultaten van Google, loont het de moeite om je hier in te verdiepen. AMP instellen doe je als volgt.
Accelerated mobile pages zijn als het ware gecachete versies van bestaande webpagina’s. Dat heeft als groot voordeel dat de inhoud van die artikelen statisch is en dus veel minder tijd nodig heeft om te worden geladen. De mobiele gebruiker krijgt een versimpelde pagina te zien waarop onder meer javascripts van derde partijen zijn uitgeschakeld, afbeeldingen worden verkleind en animaties worden versimpeld.
Dat amp invloed heeft op de serp-positie van pagina’s, komt deels doordat Google het project leidt. Veel sociale media als Twitter en LinkedIn zijn aan het project verbonden, evenals cms’en als WordPress. Het is in die zin de tegenhanger van Facebooks Instant Articles, een techniek die ook wordt gebruikt om pagina’s sneller en simpeler te laden.
Het project is ontstaan in 2015, en in februari 2016 verschenen de eerste amp-pagina’s in de zoekresultaten. Een jaar later verwees zeven procent van het verkeer van grote Amerikaanse websites al naar een amp-pagina. Inmiddels gebruikt Twitter de techniek ook bij links naar websites in de mobiele apps.
Waarom AMP?
Als een pagina een amp-equivalent heeft, verschijnt die versie op de mobiele pagina met zoekresultaten. Mobiele gebruikers worden op die manier automatisch doorgestuurd naar de amp-pagina, terwijl pc-gebruikers normaliter naar de volledige pagina worden geloodst. Het grote verschil is dat de amp-pagina in een amp-cache staat.
Die cache is in de praktijk veelal van Google, maar ook andere bedrijven kunnen hun eigen amp-cache hebben. Dat heeft als nadeel dat het verkeer niet direct naar het domein wordt geleid waar de originele pagina staat. Een amp-bezoek zal dan ook niet direct in de statistieken van betreffende website komen te staan, omdat de bezoeker niet verder komt dan de amp-cache.
Een ander nadeel is amp-pagina’s zijn gestript van javascript-toepassingen van derde partijen. Dat is vooral terug te zien in het advertentiemodel. Normale advertenties worden niet getoond binnen een amp-pagina; een bedrijf moet speciale advertenties en banners maken die wel op de mobiele pagina verschijnen. In hoeverre amp-advertenties net zo goed converteren als gewone advertenties, is nog niet goed gedocumenteerd.
Jack Marshall van The Wall Street Journal zag een flinke daling in advertentie-inkomsten op amp-pagina’s. Op andere websites, bijvoorbeeld The Washington Post, was het verschil te verwaarlozen. Feit blijft dat de aangepaste, geoptimaliseerde advertenties op gewone pagina’s plaats moeten maken voor gestandaardiseerde banners.
AMP instellen
Verschillende cms’en ondersteunen amp, met WordPress en Drupal als bekendste. Via WordPress zijn verschillende plu-gins te installeren waarmee pagina’s automatisch worden omgezet in amp-pagina’s. Als je cms geen amp-plug-ins kent, zul je in de html van de artikelen moeten duiken.
Een amp-pagina moet aan enkele basisvoorwaarden voldoen. Om zoekmachines te laten weten dat het een amp-pagina betreft, is de <html>-tag vervangen door <html amp>. Anders dan bij gewone pagina’s moet een amp-pagina <head>- en <body>-tags bevatten. Ook is er een canonical url aanwezig die niet-mobiele bezoekers naar de niet-amp-pagina leidt, als die tenminste bestaat.
Op de projectwebsite vind je een lijst met alle vereisten waaraan een amp-pagina moet voldoen. Sommige bekende html-tags, zoals <img>, worden vervangen door een amp-equivalent – in dit geval <img amp>.
©PXimport
Niet alleen de html verschilt van gewone pagina’s, ook de stylesheet van amp-pagina’s is anders. Alle stijlen moeten zich binnen de <head>-tag van de pagina bevinden. Ook zijn er bepaalde stijlen die binnen amp niet zijn toegestaan, zoals !important en behaviour.
Externe stylesheets worden niet gebruikt binnen amp-pagina’s, met uitzondering van aangepaste lettertypen. Alle verplichte en verboden zaken binnen amp-stylesheets vind je op deze projectwebsite. Je kunt je nieuwe amp-pagina testen door #development=1 achter de url te plakken en in Chrome via Ctrl+Shift+I de console te openen.
AMP en SEO
Google is ervan overtuigd dat sneller bijna per definitie beter is. Daarom heeft Google amp ingebouwd in het zoekalgoritme dat de volgorde van de zoekresultaten bepaalt. Zoek op je telefoon maar eens op een willekeurige zoekterm plus het woord nieuws. De kans is groot dat vrijwel bovenaan de resultatenpagina een carrousel verschijnt met daarin alleen accelerated mobile pages, die je kunt herkennen aan het icoontje van de bliksemschicht en eventueel de letters amp.
Ook tussen de gewone zoekresultaten op je smartphone of tablet verschijnt zo nu en dan een amp-resultaat. Klik je op zo’n resultaat, dan krijg je vrijwel direct de pagina voor je neus, gestript van de meeste opsmuk, reclames en banners.
Dat past helemaal bij Googles wens om het internet sneller te maken. Websites die langzaam laden worden al veel langer gestraft met een lagere serp-positie, en supersnelle amp-pagina’s krijgen als beloning juist een betere ranking. Volgens Google laden de meeste amp-pagina’s in minder dan een seconde en gebruiken ze bovendien tien keer minder data dan hun niet-geoptimaliseerde equivalenten.
