Home Zoekmachine optimalisatie E-mailmarketing Website optimalisatie Social media Bezoekers trekken Klanten werven Website psychologie Blog

AMP Stories, Alles wat je moet weten over Google's Snapchat killer

Het succes van Google AMP #

Ongeveer twee jaar geleden lanceerde Google officieel zijn supersnelle, mobielvriendelijke website-variant: Google AMP.

Google AMP staat voor Accelerated Mobile Pages en is bedoeld om het standaard internet enorm te verstellen.

AMP is een open-source project van Google en biedt ontwikkelaars de mogelijkheid om razendsnelle mobiele websites te maken. AMP pagina's zijn tot wel 85% sneller dan standaard webpagina's!


AMP websites worden net als standaard website opgezet uit elementen. Elk element representeert een gedeelte van de website. Zo zorgt een H1 tag (<h1>) voor een titel en een IMG tag(<img>) voor een afbeelding.

Veel HTML elementen zijn echter hetzelfde gebleven. Het gaat om een paar wijzigingen die ervoor zorgen dat AMP de gebruikerservaring verbeteren en de laadtijd van websites halveren. Welke wijzigingen dat zijn vind je hier.

Benieuwd hoe jij een super snelle AMP variant van jouw website kunt bouwen? In deze tutorial bouw je binnen 30 minuten je eigen AMP website.

Het gevecht om de mobile-user #

Dat mobiele telefoons de wereld over hebben genomen is duidelijk. Google houdt al enige tijd rekening met de mobiele weergave in het algoritme dat de zoekresultaten bepalen.

Mobile First is een veelgehoorde term in de internetbranche.

Maar Google is niet de enige die vol inzet op mobiel. Snapchat is al jaren één van de populairste mobiele apps. Veel, vooral jongeren gebruiken de app dagelijks en sturen miljoenen snaps naar hun vrienden.

Het succes van Snapchat lijkt Google te interesseren. Enkele jaren geleden bood Google 30 miljoen(!) om Snapchat over te nemen maar Snapchat gaf niet thuis.

Dus moet Google zelf met iets komen.

The best of both worlds #

En vorige maand was het zo ver. Google lanceerde officieel zijn snapchat rivaal genaamd AMP Stories.

AMP Stories is de perfecte mix tussen de standaard (saaie) zoekresultaten van Google en de “fancy” snapstories van Snapchat.


AMP Stories is net als de normale Google AMP versie gemaakt om super snel op mobiel geladen te worden. Hier volgt dus ook een enkel nadeel van AMP Stories..

Het is niet beschikbaar op desktop.

Maar, dat vergeten we snel. Het is er niet voor bedoeld dus we hoeven daar verder ook niet over na te denken.

Door naar Stories. Wat zijn AMP Stories. Kunnen we het al gebruiken en wat hebben we er eigenlijk aan?

Wat heb je aan AMP Stories? #

Google Stories gaat zoals gezegd de strijd aan om op mobiel prominent aanwezig te zijn. Google lanceerde afgelopen jaren al veel Rich Snippets om de zoekresultaten op een eenvoudige maar toch aantrekkelijke manier weer te geven.

AMP Stories gaat hier verder. Door de AMP functionaliteit kunnen de zoekresultaten qua design weer een flinke boost krijgen zónder dat de laadtijd wordt aangetast.

De online wereld verandert snel en Google wil - ook met zijn zoekmachine - niet achterblijven.

De AMP stories zorgen er dus eigenlijk voor dat jij je doelgroep op een "fancy" manier kunt bereiken. De nieuwe generatie leest minder en kijkt liever naar interactieve content zoals video's, GIF afbeeldingen, animaties en Stories.

Zo maak je je eigen AMP Story #

Enthousiast over het nieuw formaat? Goed. Hier volgen de stappen om een Google AMP Story te maken.

Stap 1: Download de sourcecode van de officiële AMP website.

Of eigenlijk, van Github. Welbekend onder alle ontwikkelaars dus zet snel iemand aan het werk om jouw AMP story te realiseren.

Stap 2: Test het voorbeeld

Om een AMP story in actie te zien dien je een lokale webserver te draaien. Voor een gemiddelde webontwikkelaar is dit geen probleem. Toch meer informatie nodig? Klik hier voor dezelfde stap 2 van Google.

Stap 3: Begrijp het technisch concept

Elke nieuwe ontwikkeling heeft zo zijn leercurve. Gelukkig voor ons, je ontwikkelaar of jezelf; AMP stories zijn kinderlijk eenvoudig. Iedereen die ooit een website heeft gemaakt zal de code binnen enkele minuten begrijpen én kunnen toepassen.

Bron Google AMP

Stap 4: Maak je eigen Story

Zoals gezegd; het zou kinderlijk eenvoudig moeten zijn. Voor de ontwikkelaars onder ons staan hieronder enkele belangrijke stappen;

1. Include de AMP story library in de HEAD van het document

<script async custom-element="amp-story"
        src="https://cdn.ampproject.org/v0/amp-story-0.1.js">

2. Voeg een <ampy-story> element aan het document toe (tussen de body tags)

<body>
  <amp-story standalone>
  </amp-story>
</body>

3. Voeg een story pagina toe

<amp-story standalone>
 <amp-story-page id="cover">
 </amp-story-page>
</amp-story>

4. Plaats de eerste laag van je story

 <amp-story-grid-layer template="fill">
 <amp-img src="assets/cover.jpg"
 width="720" height="1280" 
layout="responsive">
</amp-img>
  </amp-story-grid-layer>

5. Experimenteer met verschillende lagen en types

Stap 1 t/m 4 zijn letterlijk de BASIS van ee AMP story. Natuurlijk is er veel meer te ontdekken en zijn er verschillende elementen die je kunt gebruiken. Daarnaast biedt Google een eigen animation library aan om alles nog een stapje cooler te maken.

Voor een uitgebreide beschrijving van Google stories en de manier waarop stories gemaakt worden verwijs ik uiteraard graag door naar Google's eigen AMP website.

Bron Google AMP

Zijn AMP Stories voor iedereen beschikbaar? #

Ja! Vanaf vandaag kan iedereen zijn eigen AMP story maken en deze publiceren in zijn reeds bestaand AMP website. Stories zijn nog niet officieel ondersteund en uitgebracht, maar Google opent AMP stories voor alle ontwikkelaar in afwachting van feedback.

Er staat je dus niets in de weg om AMP stories een kans te geven en te bekijken wat de stories voor jou kunnen betekenen.

Een klein vooruitzicht; Google verwacht dat ze hun AMP stories snel zullen uitrollen over verschillende Google diensten. Welke diensten? Dat blijft nog even geheim. Des al niet te min beloven stories, net als de normale AMP websites een grote belofte. Eentje om zeker in de gaten te houden.

Ben jij al bezig met stories, of denk jij dat AMP stories interessant kan zijn voor je collega's of klanten? Deel dit artikel en breng ze op de hoogte van de laatste ontwikkelingen binnen google.

Meer kennis ontvangen?