Bij de ontwikkeling van websites maken webdevelopers steeds vaker gebruik van JavaScript. Frameworks als Angular, React, Node, Next en Vue zijn de afgelopen jaren enorm in populariteit toegenomen. Vanuit de gebruikerservaring en ontwikkelmethode volkomen terecht: je kunt er immers prachtige dynamische applicaties en websites mee ontwikkelen.

Ondanks de vele voordelen van Javascript zijn er ook nadelen aan het gebruik van JavaScript frameworks: zoekmachines hebben namelijk moeite om de content van pagina’s te ontdekken op het moment dat deze door Javascript opgebouwd worden en aan de gebruiker moeten worden getoond. 

Dit opbouwen van de pagina noemen we het zogenaamd renderen. In dit artikel met bijbehorende video bespreken we:

• De methodes waarop websites standaard gerenderd worden
• Hoe de zoekmachine Google met Javascript omgaat 
• Hoe jij ervoor zorgt dat je website vindbaar blijft ondanks het gebruik van Javascript
  

Zonder te diep in te zoomen op de technische aspecten, bekijken we zo de belangrijkste aspecten van SEO en Javascript. Deze aspecten zijn belangrijk omdat zoekmachines immers de content van websites moeten kunnen uitlezen en Javascript van invloed is op de performance van een website.

Javascript en rendering methodes

Er zijn diverse methodes waarop een webpagina gerenderd wordt: server side rendering en client side rendering. Deze bevatten een aantal verschillen. Daarnaast zijn er ook tussenvormen beschikbaar, waarop we later in het artikel kort ingaan.

• Server-side rendering is het proces waarbij de browser of zoekmachine een HTML bestand ontvangt en direct toegang heeft tot de content. De content wordt namelijk in HTML geladen en kan zo eenvoudig gecrawld en geïndexeerd worden door een zoekmachine.
• Bij client side rendering wordt de content gerenderd in de browser door middel van JavaScript. De bot ontvangt een haast leeg HTML document met daarin JavaScript, waarin geen content te vinden is. Deze content wordt door Javascript op een later moment toegevoegd en gerenderd: Javascript moet de content namelijk aanroepen en toevoegen, waardoor de inhoud van het HTML document vertraagd wordt aangepast.
  

Omdat de inhoud van het HTML document later wordt gegenereerd, is het proces van crawlen en indexeren bij client side rendering voor zoekmachines niet voldoende, om te bepalen wat er op een website staat. Gelukkig gebruikt Google daarom een eigen Web Rendering Service (WRS) voor het renderen van JavaScript. Op deze manier kan Google content en links achterhalen die nodig zijn voor het indexeren. 

Hoe gaat Google om met JavaScript? 

Onderstaande afbeelding geeft weer hoe het indexatieproces van Google werkt.

1. De eerste ronde van indexatie is het standaard proces voor elke website. Googlebot crawlt de ruwe HTML van een webpagina en voegt gevonden links toe aan een crawllijst. Het is dus essentieel dat links volgbaar zijn in de ruwe HTML.
2. Wanneer blijkt dat er tijdens het indexeren Javascript bestanden gerenderd moeten worden, gebruikt Google hun WRS-dienst en gaat de volledige indexatie pas verder wanneer Googlebot dit mogelijk vindt. Er wordt een voorlopige versie geserveerd in de index.
3. Googlebot stelt het renderen uit tot de volledige bronnen beschikbaar zijn via Javascript. Deze bronnen zijn afhankelijk van hoe Google de kwaliteit van je website beoordeelt (E-A-T) en wat het crawlbudget (ofwel renderingbudget) is.
4. Wanneer genoeg resources beschikbaar zijn, wordt de pagina pas gerenderd én wordt zo de nieuwe beschikbare content beoordeeld en geïndexeerd.
   

Het parsen, omzetten en uitvoeren van JavaScript kost veel computerkracht en dus tijd voor een bot en moeite vanuit Google. In het geval van een JavaScript-rijke website moet Googlebot het rendering proces dus steeds herhalen om content en nieuwe links te bereiken; wat vanuit Google nog meer computerkracht en moeite kost.

Deze vertraging kan ervoor zorgen dat niet alle pagina’s op de website de tijd krijgen om geïndexeerd te worden. De kans is aanwezig dat Google door het gebruik van JavaScript belangrijke content en technische optimalisaties niet oppakt. Maak je JavaScript website daarom zoekmachinevriendelijk door bijvoorbeeld server-side rendering toe te passen.

Zoekmachinevriendelijke websites met Javascript

Google geeft zelf in officiële bronnen aan dat bots moeite hebben met JavaScript en komt met een oplossing om zowel voor gebruikers als voor crawlers het proces zo goed mogelijk te stroomlijnen: dynamic rendering of hybrid rendering. De toepassing van één van deze oplossingen is afhankelijk van een aantal factoren. Het gebruik van dynamic of hybrid rendering brengt namelijk verschillende voor- en nadelen met zich mee en vergt een juiste afstemming tussen de webdeveloper en je SEO Specialist.

Dynamic rendering

Dynamic rendering is een manier om JavaScript websites goed te laten werken met Google Search. De webserver waar je website op draait kijkt of er een server request wordt gedaan door een gebruiker of door een bot om duidelijk te krijgen of er een crawler of een gebruiker naar de website komt. Op basis van deze input wordt client side content naar gebruikers gestuurd en server side content naar crawlers, waarbij Javascript ieder op een andere manier wordt verwerkt, zoals bovenstaande afbeelding laat zien. Je creëert hiermee twee structuren in plaats van één, puur om het zoekmachines makkelijker te maken.

Hybrid rendering

Hybrid rendering is een methode waarbij er tijdens de indexeringsgolf allereerst content server side wordt aangeboden en vervolgens client side JavaScript.

Vele voordelen

JavaScript heeft vele voordelen en biedt de mogelijkheid interactieve applicaties en websites te bouwen. Wanneer een website niet toegankelijk is voor zoekmachines, gaat dit ten koste van de online vindbaarheid en prestaties van je website. JavaScript is complex voor zoekmachines en het is een uitdaging om de diverse JavaScript frameworks goed te laten werken met zoekmachines.

Heb je een website die opgebouwd is uit Javascript? Schakel dan je webdeveloper in, raadpleeg de Google Developer documentatie en zet een SEO specialist in om je website zo optimaal mogelijk te laten presteren. Developers en SEO specialisten kunnen ontzettend veel van elkaar leren op dit gebied en SDIM moedigt het aan om samen met developers de website zo optimaal mogelijk te laten presteren.

Meer weten over dit onderwerp, bekijk dan hier de video:

Over de auteur: Thomas Meijer is SEO specialist bij SDIM.