De meeste mensen zullen bekend zijn met stories. De bolletjes die op verschillende social media platformen bovenaan komen te staan, waarin vrienden, familie, kennissen en connecties hun verhaal kunnen delen.
Het is nu ook mogelijk om stories te maken op het web. Ze worden Web Stories of AMP Stories genoemd en zijn sinds kort terug te vinden in de Google zoekresultaten. Voor nu nog Engelstalige stories, maar binnenkort zullen we waarschijnlijk ook Nederlandse stories gaan terugzien.
Wat is AMP voor Web Stories?
Niet iedereen zal bekend zijn met AMP. AMP is een framework waarin webpagina's opgebouwd kunnen worden. AMP is bedoeld om pagina's te maken die vooral snel zijn en daarmee voor een fijne gebruikerservaring zorgen. AMP geeft je een aantal standaard componenten die helpen dit doel te realiseren.
Veel, met name nieuwswebsites, hebben een AMP en een niet-AMP versie van een artikel. Een AMP versie is interessant voor Google die dit artikel mogelijk hoger ranked, maar ook voor mobiele gebruikers. Als je zoekt op mobiel kun je een AMP versie herkennen door de kleine bliksemschicht naast de titel. Wat voor gebruikers aantoont dat dit artikel snel laadt.
De meeste websites die AMP implementeren hebben ook een niet-AMP versie, omdat AMP limitaties heeft. Om AMP pagina's snel te houden, zijn er een beperkt aantal elementen die je kan en mag gebruiken. En zijn er strikte richtlijnen voor de grootte van je code.
Daarom zijn AMP pagina's meestal een uitgeklede variant van de echte website. Dat is meteen de reden waarom websites doorgaans ook de reguliere weergave aanbieden.
AMP Stories
Het Stories gedeelte is een losstaand onderdeel van het AMP framework waarbij AMP een aantal standaard componenten geeft om makkelijk Stories op te bouwen. Als ontwikkelaar hoef je niet na te denken over de interactie en de opmaak van Stories.
We gaan in dit artikel niet te diep in op de broncode, maar om een beeld te geven, laat ik zien hoe Stories worden opgebouwd.
<amp-story-page>
<amp-story-grid-layer>
<amp-img src="image.jpg" width="720" height="1280">
</amp-img>
</amp-story-grid-layer>
</amp-story-page>
Dit is een versimpeld voorbeeld, maar je ziet elementen die AMP aanbiedt waarmee je snel pagina's kunt opbouwen. Ben je benieuwd naar een technische uitleg van AMP Stories, lees dan onze tech blog.
Voorbeelden van Web Stories
In Nederland zijn er nog niet zoveel voorbeelden te vinden (in ieder geval niet via Google), maar internationale media laten al veel mooie voorbeelden zien.
Input magazine heeft een verhaal gemaakt over een elektrische Ford Mustang prototype waarin zij uitgebreid gebruik maken van Web Stories.
SEO en best practices voor Web Stories
In Nederland zullen we binnenkort Web Stories allicht gaan terugzien in de zoekresultaten van Google of in Google Discovery. Bij Engelstalige stories zien we vaak bovenaan, daarom kun je alvast beginnen met het maken van stories om direct onder de aandacht te komen. Dan ben je alvast voorbereid wanneer dit verder wordt uitgerold.
Alvast een aantal tips van Google om je stories geschikt te maken voor indexering.
- Video-first. Video's zorgen voor meer engagement in je verhaal en Google raadt daarom aan deze veelvuldig toe te passen, natuurlijk afgewisseld met tekst en afbeeldingen.
- Om je story goed geïndexeerd te krijgen, moet er wel tekst in staan waarmee Google en bovenal je gebruiker aan de slag kunnen. Let daarbij wel op dat je niet meer dan 280 karakters per pagina in je verhaal stopt.
- Gebruik een verhaallijn en schrijf hoge kwaliteit content voor je Web Stories.
- Zorg ervoor dat je titel niet langer dan 70 karakters is.
- Zorg ervoor dat de story technisch in orde is. Valide code, de juiste metadata, een poster afbeelding en logo in het juiste formaat en verhouding.
Voor alle best practices kun je kijken naar de documentatie van Google voor zowel content als technische richtlijnen.
Web Stories maken
Er zijn verschillende methodes om AMP/Web Stories te maken.
De eerste methode is met code. Je kunt direct de AMP componenten bibliotheek gebruiken om je stories op te bouwen. Daarbij is het handig om standaard templates te maken, zodat je in de toekomst snel verhalen kunt bouwen. De AMP site biedt ook kant-en-klare templates aan, waarmee je een goede start kunt maken aan jouw stories.
Een tweede methode is stories maken met tools die beschikbaar zijn. De grootste en meest complete tool is MakeStories. Deze tool biedt een complete editor met klikken en slepen om snel stories te maken. MakeStories biedt ook verschillende exporteer opties aan, zoals ZIP die je makkelijk in je site kunt inladen. MakeStories is momenteel gratis, maar kan in de toekomst een betaalde versie worden.
Tot slot
Web Stories zijn een nieuwe mogelijkheid om onder de aandacht te komen in de Google zoekresultaten. Je kunt gebruikers op deze manier een unieke ervaring bieden om jouw (merk)verhaal te beleven. Er zijn genoeg informatiebronnen en tools beschikbaar om snel aan de slag te kunnen. We zijn benieuwd wat jij met deze techniek gaat doen en welke unieke ideeën jij ermee zou willen realiseren.
