Het effect van een headless CMS en single page application voor marketing professionals

Als marketeer kun je plotseling te maken krijgen met een headless CMS en single page application (SPA) als lichtgewicht front-end. Leuk, die technische keuze, maar het kan in praktijk vervelende gevolgen hebben. Wat moeten marketeers in niet-technische zin weten? En waarom is de trend het omarmen waard?

Met het doel om op elk denkbaar digitaal kanaal een lichtgewicht en uniforme ervaring te bieden, kiest een groeiend aantal bedrijven voor een headless CMS. Doordat hiermee de inhoud wordt losgekoppeld van al het zichtbare, hebben ontwikkelaars de vrijheid om per kanaal een optimale en snelle front-end te ontwikkelen. De content wordt voortaan vanaf één centrale plek, het headless CMS, via API’s ingeladen. Zowel de snelheid van de webervaring als die waarmee een nieuw kanaal is aan te sluiten, neemt hiermee flink toe.

Voordelen van een single page application

Geregeld gaat die CMS-keuze gepaard met een single page application als zichtbare buitenkant. Zo’n SPA – niet te verwarren met een website die bestaat uit slechts één pagina, de one pager – is een webbased app die door de browser vooruit wordt geladen. Populaire voorbeelden als Google Maps, Twitter, LinkedIn en Netflix laten goed zien wat een SPA met pre-loading betekent voor de gebruikerservaring: een pagina laden is niet – of veel minder vaak – nodig. Denk maar eens terug aan je laatste keer browsen door Netflix’ filmdatabase. Alles lijkt zich op dezelfde pagina te voltrekken. Met een klik komt de (eerder ingeladen) inhoud direct tevoorschijn. Omdat ontwikkelaars hun codes bovendien vaak hergebruiken is de transitie tussen pagina’s vele malen soepeler dan iedereen tot nu toe gewend is. Een deel was immers al zichtbaar.

Voor marketeers heeft dit een aantal grote voordelen. Zo gaat de laadtijd sterk omlaag, iets dat de algehele gebruikerservaring positief beïnvloedt. Daarnaast is een fout veel sneller te verhelpen. Ontwikkelaars maken gebruik van bestaande (JavaScript)frameworks zoals React en Angular en hoeven dus niet langer honderden regels server-side code te doorlopen. Voor het vinden van een bug bekijken ze de JavaScriptcode die door de browser wordt ‘gerenderd’. Bugs zijn zodoende sneller op te lossen en ook is een website sneller te vernieuwen.

Gevolgen voor content management

Waar kanalen, apparaten en front-end technieken komen en gaan, zal de inhoud altijd behouden blijven en moet een marketeer die altijd zo makkelijk mogelijk kunnen distribueren. De keuze voor een headless CMS is vanuit content management gezien dus een slimme zet. Via de API’s laat de inhoud zich zeer snel verspreiden. Waar bedrijven zich echter regelmatig op verkijken is hoe zo’n CMS en SPA marketeers beperken in hun vrijheid. Het feit dat de beheerders niet vrij zijn om de paginaopmaak te wijzigen en vaak niet eens een preview zien van hun werk, belemmert de creativiteit.

Een hybride headless CMS is daarom een waardevolle variant. Als aanvulling beschikt het CMS over WYSIWYG-functionaliteiten voor de opmaak. Bij Magnolia hebben we er zelfs voor gekozen om een speciale SPA editor in te bouwen. In de meest basale uitvoering is een headless CMS pure chaos. Aanvullingen voor de opmaak, drag & drop componenten en opties om zonder kennis van code de layout aan te passen zijn voor marketeers een absolute must.

Wat betekent een SPA voor SEO en personalisatie?

Omdat JavaScript lastig is te lezen, zijn SPA’s in beginsel niet bijzonder vriendelijk voor zoekmachines. Door de techniek van server side rendering in te zetten zorg je ervoor dat de inhoud toch is te crawlen. Daarnaast is het belangrijk om er onder meer voor te zorgen dat – net als op elke andere website – pagina’s zijn voorzien van een unieke URL en de meta data op orde zijn gebracht. Zoekmachines kunnen hun werk bovendien gemakkelijker doen als de interne links worden voorzien van <a>-tags – en niet zoals gebruikelijk is binnen JavaScript met onclick events.

Een traditioneel CMS maakt het doorgaans mogelijk om de inhoud van pagina’s te personaliseren. Daarbij maakt het bijvoorbeeld gebruik van de browserhistorie. Eerder vertoond (surf)gedrag laat zich op die manier vertalen in andere pagina-inhoud. Omdat een SPA uit minder pagina’s bestaat, is die methode lastiger toe te passen. Een oplossing is om voortaan te werken met URL fragmenten. Deze kleine toevoegingen aan de URL laten zien welke website-onderdelen zijn geopend en is bruikbare informatie voor een CMS of tool die helpt bij de personalisatie.

Nu steeds meer digitale iconen werken met een headless CMS en single page application, neemt de aandacht ervoor toe. Terecht, gezien de vele voordelen. Toch is het belangrijk om oog te houden voor de manier waarop het marketeers raakt. Een slechte CMS-ervaring levert niet alleen frustratie op, het beïnvloedt daarmee (indirect) de gebruiker. Volledige creatieve vrijheid leidt uiteindelijk altijd tot een betere digitale ervaring.

Doorgaans proberen merken nieuwe ervaringen op nieuwe kanalen op te bouwen met standaard headless technologie. Vervolgens ontdekken zij dat hun marketeers beperkter zijn dan ooit tevoren, en dat hun ontwikkelaars – ondanks meer technische vrijheid – nu continu het marketingteam moeten bijsturen. Een klassiek voorbeeld hiervan is wanneer een bedrijf de beslissing neemt om een Single Page Application (SPA) te lanceren. Maar wat is een SPA en wat zijn de voordelen? Wil je hier meer over weten? Download de whitepaper ‘Single Page Applications (SPAs): Dé uitleg die marketeers snappen‘.

Over de auteur: Rasmus Skjoldan is head of product and customer experience management bij Magnolia.