Single-Page Applications (SPA’s) in SEO

Het internet en de manier waarop mensen dat gebruiken, verandert voortdurend. Hier moeten SEO-specialisten constant op in blijven spelen door online interactieve ervaringen te creëren. Dit kan bijvoorbeeld door gebruik te maken van Single-Page Applications (SPA’s).

SPA’s zorgen ervoor dat de gebruiker de content van een website op een dynamische manier te zien krijgt, maar in feite bestaat de website slechts uit één pagina. Op deze manier vermindert de laadtijd en kan de gebruiker sneller scrollen.

Het gebruik van SPA biedt veel voordelen, maar roept ook vragen op wat betreft SEO. Bij het optimaal gebruiken van SPA’s moet gezocht worden naar een balans tussen creatief inzicht in de gebruikerservaring en technische deskundigheid. In dit artikel ga ik dieper in op deze vraagstukken en leg ik uit hoe het gebruik van SPA’s kunnen zorgen voor betere zoekresultaten om hoger in Google te komen.

De betekenis van SPA

SPA – ook wel Single-Page Application genoemd – is een belangrijke innovatie in de online wereld die een andere manier van surfen biedt. In plaats van de traditionele websites die zijn onderverdeeld in kopjes met daaronder nieuwe pagina’s, wordt bij SPA alle content op één pagina weergegeven. Nieuwe pagina’s hoeven dus niet steeds herladen te worden. Alleen de eerste pagina load is noodzakelijk.

Wel laadt een SPA nog de noodzakelijke data, vaak via AJAX-aanvragen. JavaScript wordt ingezet om nieuwe informatie te integreren in de bestaande webpagina. Dit houdt in dat de content verandert zonder er een verandering in de URL plaatsvindt. De gebruikerservaring versnelt hierdoor.

Op een SPA wordt de gebruikersinterface in real-time geüpdatet. Dit gebeurt op dezelfde manier als desktop applicaties een pagina bijwerken. Omdat de URL niet verandert, is er een continue interactie voor de gebruiker. Moderne JavaScript-frameworks als React, Angular of Vue beheren deze dynamische updates en zijn verantwoordelijk voor de werking van de applicatie.

Naast de voordelen van SPA, brengt het ook wat uitdagingen teweeg, met name in de SEO-sector. SEO-specialisten moeten andere manieren vinden om ervoor te zorgen dat de zoekmachines de inhoud nog steeds crawlen en indexeren. Technische kennis en vaardigheden worden gecombineerd met strategische planning om de SPA zichtbaarder en beter vindbaar te maken. Deze uitdagingen komen echter niet heel vaak voor. Vooral in het geval van interfaces die niet geïndexeerd zijn, ontstaan makkelijker problemen.

Voorbeelden SPA’s

Veel moderne apps en websites zijn SPA’s. De interfaces worden daarbij vaak aangepast op de persoonlijke voorkeuren van de gebruikers. Dit zijn enkele voorbeelden van bekende SPA’s:

1. Gmail. In Gmail komen alle berichten binnen op 1 pagina. Alle verschillende taken die je uit kunt voeren, vallen onder dezelfde URL.
2. Facebook. Het is mogelijk om eindeloos door een Facebook-feed te scrollen en verschillende acties uit te voeren zonder de app of website opnieuw te laden.
3. Google Maps. Het ophalen van routes en het bekijken van de kaart van Google Maps kan ook zonder dat de pagina steeds opnieuw geladen hoeft te worden.
4. Netflix. Netflix zorgt ervoor dat je snel door het volledige aanbod kunt scrollen om een film of serie te kiezen.
5. X (voorheen Twitter). X is officieel een PWA, maar de hoofdwebsite bevat SPA-eigenschappen. De content wordt hier dynamisch geladen.
6. Instagram. Op Instagram wordt content dynamisch weergegeven. Een groot deel van Instagram is dan ook een SPA.
7. Airbnb. Op een pagina kun je door alle accommodaties scrollen zonder van URL te veranderen.
8. GitHub. De webinterface van GitHub beschikt over SPA-elementen, met name de projectbeheer- en code verkenning secties.

Bovenstaande websites maken gebruik van SPA met als doel gebruikers een snelle en dynamische ervaring te bieden. Dit is vooral handig bij complexe websites met veel gebruikersinteractie.

Technische uitdagingen

Bij SPA’s wordt er gebruikgemaakt van JavaScript, dat helpt bij het laden van de inhoud zonder dat er een volledige pagina-refresh voor nodig is. Hier komen soms technische uitdagingen bij kijken. Om de uitdagingen zo veel mogelijk te beperken, hebben zoekmachines als Google geïnvesteerd in een beter vermogen om JavaScript te verwerken. De beperkingen zijn hierdoor verminderd, maar nog niet helemaal opgelost.

Het uitvoeren van acties door de gebruiker is één van die uitdagingen. Bij zo’n actie wordt nieuwe inhoud geladen. In sommige gevallen kunnen zoekmachines deze dynamische updates niet detecteren en ontstaat er discrepantie tussen de weergave van de gebruiker en de indexatie van de zoekmachine.

Daarnaast zijn SPA’s vaak afhankelijk van client site rendering waarbij JavaScript-frameworks op de browser draaien om de pagina op te bouwen (zie mijn artikelen over dynamisch renderen en server side/client side renderen). Dit vergroot de discrepantie alleen maar.

De client rendering zorgt voor een vlotte en interactieve gebruikerservaring, maar in eerste instantie ontvangt de bot bij het crawlen van een site alleen de kale HTML-sjabloon, waarbij de inhoud nog niet is ingevuld. Het kan zijn dat de bot een lege pagina indexeert, waardoor de resultaten in de zoekmachine omlaag gaan.

Ook het beheren van het crawl budget is een uitdaging. Zoekmachines hebben slechts een beperkt aantal middelen die gebruikt worden voor het crawlen van een website. SPA’s zijn vaak complex en afhankelijk van JavaScript, waardoor het budget al snel wordt verbruikt.

De voordelen van SPA voor SEO

Naast de bovengenoemde uitdagingen van SPA voor SEO, zijn er ook voordelen om een SEO-stappenplan te verbeteren.

Voorheen was HTML de basis van de webinhoud, was CSS verantwoordelijk voor de opmaak en werd JavaScript gebruikt voor de interactieve functies. Tegenwoordig is JavaScript op meer dan 98% van alle websites aanwezig en is het in staat om de inhoud van een pagina aan te passen aan gebruikershandelingen.

SPA’s zorgen er echter voor dat HTML, CSS of JavaScript niet meer bij elke actie nodig zijn. In plaats van verschillende bronnen op te vragen bij elke actie, worden bij het openen van de website in één keer alle bronnen tegelijk opgevraagd, waardoor de browser vervolgens zijn werk kan doen.

Deze nieuwe manier van werken zorgt ervoor dat de websites een stuk sneller zijn. Dit verbetert de gebruikerservaring enorm. Uit onderzoek is gebleken dat bezoekers maximaal drie seconden willen wachten tot een pagina wordt geladen en de pagina verlaten indien de laadtijd hoger is. Bij een SPA is de laadtijd over het algemeen korter, maar bij een onjuiste uitvoering kan het tegenovergestelde gebeuren, wat een negatief effect heeft op de SEO.

SPA’s in de basis

Angular, React en Vue zijn bekende toonaangevende frameworks voor het bouwen van SPA’s. Het verschil tussen de tools zit hem vooral in ondersteunende bibliotheken en API’s, maar ze hebben gemeen dat hun client-side rendering van goede kwaliteit is.

JavaScript vermindert het aantal verzoeken voor de server-browser. De snelheid van de gebruikerservaring gaat omhoog, maar het gebruik van JavaScript heeft een negatieve invloed op de resultaten van de zoekmachines. Zoekmachines ervaren de website op een andere manier dan gebruikers en zien vooral ontoegankelijke inhoud. Zoekmachines denken dat de pagina nog leeg is, terwijl gebruikers dynamische content zien, die steeds bij wordt geladen.

Het zijn vooral de gebruikers die de meeste voordelen hebben van SPA’s. Niet alleen vanwege de snelheid, maar ook omdat SPA’s met een zwakke verbinding nog goed toegankelijk zijn. Dit komt doordat de SPA’s alle benodigde middelen meteen na de eerste aanvraag lokaal cachen. Bovendien verschuift de lay-out niet.

Hoewel er extra inspanningen nodig zijn om de SEO te verbeteren, bieden SPA’s genoeg voordelen om blijvend toegepast te worden. Bovendien draagt een goede gebruikerservaring bij aan een betere SEO.

Uitdagingen van SPA’s op SEO

Zoals al eerder genoemd kan het gebruik van JavaScript met dynamisch geladen content voor problemen in de zoekmachines zorgen, omdat zoekmachines alleen een lege pagina zien. Dit komt doordat traditionele zoekmachines gebouwd zijn om statische HTML-inhoud te indexeren en crawlen en SPA’s bestaan uit een lege HTML. Pas nadat het JavaScript wordt uitgevoerd, wordt de HTML gevuld met content. Zoekmachines krijgen dus te maken met onvolledige informatie.

Bovendien wordt in de SEO gebruikgemaakt van verschillende URL’s voor elke contentpagina. Aangezien Spa’s slechts één HTML-pagina gebruiken en daardoor de URL niet verandert, moet een SPA worden aangepast om relevant te zijn voor zoekmachines. Het is belangrijk dat de SPA’s zijn voorzien van relevante SEO-metadata voor elke afzonderlijke sectie binnen de applicatie.

Ook het feit dat SPA’s complexer zijn, helpt niet mee in de SEO. Het crawl budget zal er sneller doorheen gaan, wat ertoe kan leiden dat delen van de website over het hoofd worden gezien binnen de tijd die zoekmachines toewijzen aan het crawlen van een website.

Voor SEO-optimalisatie is een goede architectuur van SPA’s noodzakelijk, met behulp van server-side rendering (SSR). SSR genereert de content server-side voordat deze naar de client wordt gestuurd. Je kunt een volledige pagina inzien door het implementeren van pre-renderingtechnieken.

Om ervoor te zorgen dat zoekmachines elke sectie van de SPA als uniek element behandelen, moeten dynamische meta-tags en structured data op de juiste manier worden ingezet.

Hieronder volgt een overzicht van de grootste uitdagingen:

Uitdaging	Omschrijving
Indexering van de content	SPA’s laden content dynamisch met JavaScript, waardoor de content onzichtbaar kan zijn voor zoekmachines die alleen HTML indexeren.
Crawling efficiëntie	Zware JavaScript kan het crawl budget overschrijden, waardoor zoekmachines niet de volledige inhoud van de SPA indexeren.
Gebruik van meta-tags	Dynamisch geladen pagina’s binnen een SPA missen vaak unieke meta-tags per sectie. Deze zijn essentieel voor een goede pagina-indexering.
URL-beheer	SPA’s gebruiken vaak maar één URL. Dit veroorzaakt SEO-problemen omdat elke content een unieke URL vereist.
Structuur van de URL’s	Het feit dat SPA’s geen traditionele linkstructuur bezitten, maakt de links minder goed vindbaar en vermindert hun waarde.
Server-side rendering (SSR)	SSR is noodzakelijk om SPA’s vooraf te laden voor zoekmachines. Het implementeren ervan kan complex zijn.
Pre-rendering	Pre-rendering genereert statische snapshots voor crawlers. Hiervoor is extra setup en onderhoud nodig.
Gebruikersbetrokkenheid	Hoewel SPA’s de interactie verbeteren, kunnen meetproblemen ontstaan doordat traditionele analytics niet zijn geoptimaliseerd voor SPA’s.
Structured Data	Het dynamisch injecteren van gestructureerde data in SPA’s brengt meer technische uitdagingen met zich mee dan in traditionele websites.

Tips voor SEO bij gebruikmaking van SPA’s

Om zo SEO zo efficiënt toe te passen op SPA’s, zijn onderstaande tips nuttig. Ik zou hierbij meteen willen aangeven dat wanneer je organisatie een SPA beheert, het van belang is om met een specialist een maatwerk strategie op te stellen.

1. Maak gebruik van een specialist: De complexheid van SEO met betrekking tot SPA’s vereist een specialist die een goede maatwerk strategie kan opstellen.
2. Gebruik universeel JavaScript: Gebruik universeel of isomorf JavaScript om de server-side van de pagina te genereren, zodat de zoekmachines niet alle JavaScript bestanden hoeven uit te voeren en te renderen.
3. Laad HTML-pagina’s vooraf: Laad alle HTML-pagina’s vooraf en sla deze op in de servercache. Zo kunnen deze aan de zoek crawlers worden gepresenteerd en voorkom je dat zoekmachines lege pagina’s tegenkomen. Gebruik hiervoor diensten als BromBone of Prerender.
4. Feature detection implementeren: Implementeer feature detection voor het verbeteren van de ervaring met verschillende codebronnen. Op deze manier wordt de basispagina toegankelijk voor zowel crawlers als gebruikers.
5. Gebruik verschillende URL’s: Hoewel er bij SPA’s maar één URL gebruikt hoeft te worden, is het voor de SEO beter om verschillende URL’s te gebruiken. Dit kan met behulp van de History API.
6. Foutcodes ordenen: In het geval van foutcodes (waaronder 404 en 500) is het slim om aparte views aan te maken en de JavaScript-bestanden aan te passen, zodat de browsers naar de juiste view gestuurd worden.
7. Passende titels en meta-descriptions: Voor een optimale SEO zijn passende en unieke titels en meta-descriptions onmisbaar voor elke afzonderlijke sectie.
8. Robots meta tags: Geef door middel van robots meta-tags aanwijzingen aan zoekmachines over de manier waarop ze pagina’s moeten crawlen en indexeren om er zeker van te zijn dat dit op de juiste manier gebeurt en duplicatie en onjuiste indexering vermijdt.

Samengevat

Hoewel SPA’s in eerste instantie veel uitdagingen lijken te vormen voor SEO, kun je door gebruik van goede technieken en strategieën de SEO zo veel mogelijk te optimaliseren. Gebruik bijvoorbeeld isomorphic JavaScript, feature detection, pre-rendering en History API.

Beheer meta-tags bovendien dynamisch en implementeer robots meta tags op de juiste manier. Dit maakt de content van SPA’s toegankelijk en indexeerbaar voor zoekmachines. Door het toepassen van de juiste strategieën zijn SPA’s goede middelen in een snel veranderende en concurrerende wereld, waar gebruikerservaring een grote stempel op SEO drukt.

Het meest complete boekwerk over de website snelheid

Ik heb zoveel geschreven over het versnellen van websites en alles wat hierbij komt kijken, dat ik het graag onderverdeel in verschillende secties; algemeen, tools, verbeterpunten voor de snelheid en tips. Zie en raadpleeg gerust alle onderstaande links voor meer informatie over tools en tips voor het versnellen van jouw website.

Algemeen

• Wat is de website snelheid
• Website snelheid: De onderverdeling tussen marketing en development
• De invloed van SEO op UX
• De invloed van webdesign op SEO
• Wat zijn de Google Core Web Vitals?

Tools

• Autoptimize
• Pagespeed.Compare
• W3 Total Cache
• Tools Pingdom
• Google Pagespeed Insights
• GTMetrix

Verbterpunten voor de snelheid

• First Contentful Paint (FCP)
• Time To First Byte (TTFB)
• Time To Interactive (TTI)
• Afbeelding voor Grootste weergave met content (LCP) vooraf laden
• Schakel tekstcompressie in
• Verklein de CSS
• Total Blocking Time (TBT)
• Speed Index
• Verklein JavaScript
• Largest Contentful Paint
• Vermijd een te grote DOM
• Ongebruikte CSS verwijderen
• Verwijder ongebruikte JavaScript
• Lever afbeeldingen in moderne indelingen
• Maak vooraf verbinding met vereiste herkomsten
• Voorkomen dat verouderde JavaScript wordt geleverd aan moderne browsers
• Gebruik een efficiënt cache-beleid voor statische items
• Dubbele modules verwijderen uit JavaScript
• Vermijd meerdere redirects
• Codeer afbeeldingen op een efficiënte manier
• Gebruik lazy loading
• Laad belangrijke verzoeken vooraf

Algemene tips

• Tips om snel een video in te laden
• Het gebruiken van Edge SEO voor een snellere website
• Een Content Delivery Network installeren voor SEO
• Afbeeldingen optimaliseren voor SEO
• De invloed van hosting op SEO