Client Side Rendering & SEO
De techniek achter een website kan een belangrijke invloed op zoekmachine optimalisatie (SEO) en de bijbehorende organische rankings hebben. Als SEO-specialist wil je uiteraard te allen tijde voorkomen dat technische zaken een negatieve invloed op de rankings van jouw website hebben. Het is daarom belangrijk om op de hoogte te blijven van de technische ontwikkelingen op het gebied van web development.
Een van deze technische ontwikkelingen is client side rendering. Dit is een techniek waarbij webpagina’s (grotendeels) worden opgebouwd op de device van de gebruiker, in plaats van op de webserver.
Omdat client side rendering een significante impact kan hebben op het crawlen en indexeren van een website door Google, vertel ik je in deze blog meer over deze techniek en de verschillende aandachtspunten die hierbij komen kijken.
Wat houdt rendering in?
Om webpagina’s te kunnen tonen communiceert een webbrowser met een server. Het ophalen en opbouwen van een webpagina wordt hierbij rendering genoemd. Rendering omvat alles van het ophalen van de benodigde data, het uitvoeren van de benodigde code en het tonen van het webdesign. Rendering kan client-side, server-side of dynamisch plaatsvinden.
Server side rendering
In het geval van server-side rendering worden scripts uitgevoerd door de webserver. Hierbij wordt de webpagina volledig op de server gerenderd, om vervolgens naar de browser gestuurd te worden voor weergave. Deze methode vraagt om veel resources van de server.
Client side rendering
Bij client-side rendering vindt het rendering proces juist plaats op de device van de gebruiker (client). Hierbij wordt gebruikgemaakt van de browser, die alle benodigde scripts en code uitvoert, waarna de webpagina weergegeven kan worden. Hierbij wordt een deel van de benodigde resources verplaatst van de server naar de client.
Dynamic rendering
Tot slot bestaat er ook dynamic-rendering, waarbij de webserver herkent of een request van een gebruiker (mens) komt of van een bot (zoekmachine). Vervolgens krijgt de gebruiker de client-side rendering versie van de website geserveerd, terwijl bots de server-side rendering versie krijgen. Google heeft inmiddels verklaard dat het dynamic rendering als een workaround ziet en daarom afraadt om deze vorm van rendering toe te passen.
Voordelen van client side rendering
Client-side rendering heeft voor- en nadelen. De twee belangrijkste voordelen van client-side rendering, zijn dat deze techniek goedkoper is en dat client-side rendering voor developers gemakkelijker is te implementeren.
Client-side rendering is goedkoper omdat er bij deze vorm van rendering minder server resources benodigd zijn. Veel van het werk wordt immers uitgevoerd door de device van de gebruiker. Voor grote, populaire websites en webshops scheelt dit al gauw aanzienlijk in de maandelijkse kosten voor webhosting.
Daarnaast kan een website die gebruikmaakt van client-side rendering een stuk efficiënter gebouwd worden dan dat dit bij server-side rendering het geval zou zijn. Web developers maken bij client-side rendering namelijk vaak gebruik van frameworks als React, Angular en Vue. Deze frameworks bevatten JavaScript libraries die een groot gedeelte van het handmatig schrijven van code overbodig maken. Hierdoor kunnen websites veel sneller ontwikkeld worden.
Nadelen van client side rendering
Client-side rendering heeft echter ook een aantal nadelen. Dit komt doordat deze techniek veel gebruikmaakt van JavaScript en daarbovenop zeer afhankelijk is van de gebruikte browser en versie van de browser.
Zo ondersteunen oudere browsers vaak niet alle functies van de nieuwste JavaScript libraries, wat ertoe kan leiden dat bepaalde functionaliteiten van een website niet werken binnen bepaalde combinaties van een browser en browser versie.
Daarnaast vraagt het uitvoeren van JavaScript bij client-side rendering om veel resources van de gebruikte device. Dit kan ertoe leiden dat een website op oudere smartphones, laptops en andere devices langzaam laadt.
Deze twee belangrijke nadelen van client-side rendering kunnen een significant negatief effect hebben op de gebruikerservaring van een website en kunnen daarnaast ook impact hebben op SEO.
Complicaties CSR en SEO
Naast dat client-side rendering een negatief effect kan hebben op de gebruikerservaring, kan de techniek ook nadelige gevolgen op het gebied van SEO hebben. De meest voorkomende complicaties van client-side rendering op het gebied van SEO zet ik hieronder voor je op een rij:
- Tijdens het crawlen gebruikt Google een specifieke versie van Chrome om pagina’s te renderen. Alle JavaScript elementen die niet goed werken binnen deze versie van Chrome zal Googlebot niet kunnen renderen en indexeren.
- Client-side rendering is gevoelig voor bugs, aangezien een klein foutje in de code ervoor kan zorgen dat een script in zijn geheel niet uitgevoerd zal worden. Dit kan vervolgens leiden tot het renderen van incomplete pagina’s.
- Een website met client-side rendering crawlen kost Google meer resources. Dit heeft een negatief effect op crawl budget, waardoor het vaak langer zal duren voordat een website volledig gecrawld en geïndexeerd is.
- Tijdens het crawlen en indexeren van een website worden pagina’s meerdere keren bezocht, waarbij het geen garantie is dat JavaScript elke keer uitgevoerd wordt. Dit kan ertoe leiden dat pagina’s die slechts een keer door Google zijn bezocht niet volledig worden gerenderd en geïndexeerd, omdat de benodigde scripts nog niet zijn uitgevoerd.
- Terwijl Google tegenwoordig relatief goed is in het crawlen en indexeren van websites die JavaScript gebruiken, zijn andere zoekmachines nog niet zo ver. Client-side rendering kan daarom negatief uitpakken voor rankings in zoekmachines zoals Bing, Baidu en Yandex.
Client side rendering SEO check
Maakt jouw website gebruik van client-side rendering? Dan is het verstandig om regelmatig te controleren of het renderen van alle webpagina’s goed gaat. Hier kun je verschillende tools voor gebruiken:
- Google Chrome Plugin ‘View Rendered Source’
- URL Inspectie in Google Search Console
- Google's Mobile-friendly test
Met behulp van deze tools kun je bekijken hoe Google de pagina's rendert en of er JavaScript fouten ontstaan tijdens het renderen. Op die manier kun je eventuele fouten achterhalen en oplossen.