AMP, hoe pas je het toe voor je webwinkel?

Lisez en français - Read in English

In ons vorig artikel kon je lezen hoe belangrijk Accelerated Mobile Pages wordt voor de Search Engine Optimization van nieuwssites maar ook webwinkels. Maar wat is AMP concreet en hoe begin je eraan?

Hoe laat AMP je website sneller laden vanuit de carrousel?

Ter herinnering: Google wil met AMP, de mobiele gebruiker sneller laten surfen. Bij zoekopdrachten op het mobiele toestel staat voortaan bovenaan de zoekresultaten een carrousel met daarin enkel AMP-pagina's die geoptimaliseerd zijn om snel te laden. Het is dus heel belangrijk om jouw webwinkel een plaats in die carrousel te laten veroveren.

Hierbij moet je wel bedenken dat AMP op zich niet in staat is om je eigenlijke webwinkel met al zijn producten sneller te maken. Daarvoor dienen tools zoals Varnish van de . AMP zorgt er wel voor dat jouw website sneller opgepikt wordt door Google, via de blog waarin je nieuws brengt over jouw producten, branche, enz. Door AMP te gebruiken komt jouw website in de nieuwe AMP-carrousel terecht en wordt zij sneller geladen.

AMP is in essentie een framework om mobiele webpagina's te maken. AMP bestaat uit drie delen:

• AMP HTML: een subset van HTML, met eigen tags en properties, met extra's en beperkingen. Wie al vertrouwd is met gewone HTML, zal al snel overweg kunnen met AMP HTML. Zo moeten de eigenschappen "width" en "height" verplicht ingevuld worden bij afbeeldingen, zodat de pagina geladen kan worden, met ruimte gereserveerd voor de afbeelding. Bekijk de volledige lijst met de verplichte markup van de AMP HTML.
• AMP JS: elke AMP-pagina moet verwijzen naar een Javascript Framework via <script async src="https://cdn.ampproject.org/v0.js"></script> dat de snelle verwerking van de afbeeldingen en asynchrone loading beheert. Let op: JavaScript van derden zal niet meer toegelaten zijn!
• AMP CDN: indien je wenst kan je ook gebruik maken van het Content Delivery Network van AMP, dat jouw aan AMP aangepaste pagina's opneemt in zijn systeem, die in cache zet en automatisch zal optimaliseren en sneller leveren.

Deze elementen moeten ervoor zorgen dat alle content 'boven de fold' meteen geladen wordt. De content onder de fold (wat de gebruiker niet meteen op het eerste scherm van zijn toestel ziet dus) volgt later. Bovendien weet AMP hoe groot de afbeeldingen en andere rich content zoals carrousels zijn vooraleer zij volledig ingeladen zijn. De ruimte wordt als het ware gereserveerd en later ingevuld. Gedaan dus met het telkens opnieuw verspringen van de pagina terwijl zij ingeladen wordt - de bezoeker kan meteen beginnen te lezen.

Sneller laden betekent sneller lezen, zodat de bezoeker ook meer content op je website te zien krijgt. Een win-win, zowel voor de gebruiker als jouw webwinkel.

Wat betekent AMP concreet voor de html van jouw e-commerce site?

• In principe zal je twee verschillende versies van een pagina moeten hebben: de originele versie, en de AMP versie. De AMP-versie laat geen iFrames en andere Javascripts toe (alhoewel er al een hack bestaat om toch iFrames te gebruiken).
• Alle CSS moet in-line zijn, en de pagina's moeten kleiner zijn dan 50 KB. Speciale lettertypes, die vaak extra laadtijd vereisen, zullen enkel geladen kunnen worden via een speciale amp-font extensie.
• Vervang de <img> tag door de <amp-img> tag en gebruik de width en height attributen.
• Gebruik bij bewegende GIFs de amp-anim component.
• Gebruik voor video de amp-video tag; voor YouTube video is er de amp-youtube tag.

AMP ondersteunt de Drupal of WordPress CMS van jouw webwinkel

Maak je voor je website gebruik van een content management systeem zoals Drupal of WordPress? Dan kan je op heel eenvoudige manier genieten van deze boost voor jouw pagina.

• Werk je met een blog, dat gehost is bij WordPress.com, dan wordt AMP automatisch geactiveerd wanneer de bezoeker via een zoekopdracht vanop zijn mobiele toestel op jouw blog belandt. (lees ook: Hoe koppel je jouw domeinnaam (bij Combell) aan jouw gratis WordPress.com blog?)
• Werk je met een zelf-gehoste WordPress blog, installeer dan de AMP plugin
• Werk je met Drupal, gebruik dan de nieuwe Drupal 8 module die ondersteuning biedt voor AMP.

Ontdek onze WordPress hosting & onze Drupal hosting

Werken advertenties op je website ook met AMP?

Een van de doelstellingen van AMP is een gulden middenweg vinden tussen advertenties, die levensnoodzakelijk zijn voor de adverteerders, en gebruiksvriendelijkheid - gebruikers zijn nu eenmaal niet bepaald dol op advertenties. Advertenties in AMP pagina's zullen gebracht worden in samenwerking met verschillende adverteernetwerken. Google waarschuwt wel dat de advertenties niet te opdringerig mogen zijn. Adverteerders kunnen op de GitHub pagina voorbeelden van toegelaten advertenties zien.

Uitgevers die werken met paywalls en abonnementen zouden deze informatie moeten lezen over de AMP Access Extension.

Heb je bij AMP ook analytische data voor je webwinkel?

Ja! En het is zelfs zo dat analytische trackers, die op gewone websites het laden zo vaak afremmen, hier tot een minimum herleid zijn. Het Amp-Pixel Element is een simpele tag waarmee je page views kan bekijken, en de Amp-Analytics Extended Component laat verdere analytics toe via Google Analytics. Lees meer over AMP Analytics.

Meer weten?

Lees meer bij onze collega's van Practical ECommerce (over SEO voor e-commerce via AMP), TechCrunch (over AMP-pagina's in zoekresultaten en over WordPress-ondersteuning voor AMP), WebProNews (over AMP en Drupal 8), SearchEngineLand (hoe je aan de slag gaat met AMP), en natuurlijk bij het AMP-project zelf en het AMP HTML blog.