Wat is dynamic rendering

SEO gaat verder dan het schrijven van content en linkbuilding. Het strekt zich namelijk ook uit tot de techniek van de website.

Een belangrijk thema wat we vandaag bespreken, is hoe zoekmachines zoals Google onze content zien. Google en de andere grote zoekmachines, zoals Bing en DuckDuckGo crawlen de pagina’s van een website door middel van het aanroepen van de DOM en de oorspronkelijke HTML.

Maar… niet alle websites kunnen worden gecrawld. Dit kan een probleem vormen voor veel websites.

Dat is waar Dynamic Rendering om de hoek komt kijken.

Dynamic rendering is het maken van een versie van de pagina speciaal voor bots van zoekmachines en het maken van een andere pagina voor bezoekers.

Dit is het technische deel van SEO waar maar weinig mensen over praten. In het bericht van vandaag behandelen we alles wat je moet weten over dynamic rendering en hoe dit rechtstreeks van invloed is op SEO.

Wat is dynamic rendering?

Dynamic rendering is het proces van het verzenden van de server-side rendered versie van een website naar bots van zoekmachines en de client-side versie naar bezoekers. Dit betekent dat er twee versies worden gemaakt: een aan de clientzijde weergegeven versie van een website voor bezoekers en een afzonderlijke server versie voor zoekmachines.

Deze techniek benadert het weergeven van content op basis van de user-agent die het aanroept: gebruikers of een bot.

Aan de serverzijde wordt de Javascript-inhoud van de website geconverteerd naar de statische HTML-versie waar zoekmachine bots de voorkeur aan geven. Met deze nieuwe versie kunnen ze alle inhoud volledig openen, crawlen en indexeren.
 

Verschillen met rendering aan clientzijde

De eerste stap is om te begrijpen wat er gebeurt met client-side rendering: wanneer een gebruiker op een link klikt, stuurt zijn browser verzoeken naar de server waarop de site wordt gehost. In het geval van JavaScript-frameworks reageert die server met iets anders, omdat het een HTML-structuur biedt, die "alleen basis-HTML is, maar met veel JavaScript, die de browser vertelt JavaScript uit te voeren om alle belangrijke HTML te krijgen".

De browser produceert vervolgens de weergegeven HTML - de HTML die wordt gebruikt om de pagina op te bouwen zoals de eindgebruiker deze daadwerkelijk weergeeft.
 

Kenmerken van server-side rendering

Voor clients die geen JavaScript uitvoeren, kun je de server-side rendering gebruiken, die de uitvoering van "al dat JavaScript" op de server verplaatst; alle bronnen zijn vereist aan de serverzijde en de browser van de gebruiker en de bot van de zoekmachine hoeven geen JavaScript uit te voeren om de HTML volledig te laten renderen. Daarom kan server-side rendering sneller en minder resource-intensief zijn voor browsers.
 

Welke websites hebben Dynamic rendering nodig

Het is aan Google zelf om te beschrijven welke soorten websites Dynamic rendering het best kunnen gebruiken. Dynamic rendering is goed voor grote webshops met snel veranderende JavaScript, die niet worden ondersteund door crawlers die als belangrijk worden beschouwd.

Tegenwoordig maken JavaScript-frameworks een snelle ontwikkeling mogelijk en bieden ze een betere gebruikerservaring, omdat ze betere prestaties en geavanceerde functies leveren die traditionele, niet-JavaScript-frameworks niet kunnen bereiken; het is dus geen verrassing dat zeer grote websites of complexe gebruikersinterfaces, met complexe logica en functionaliteit meestal JavaScript-frameworks gebruiken.

Meer in het algemeen is het raadzaam om Dynamic rendering toe te passen als de site groot is en snel veranderende content publiceert die snel moet worden geïndexeerd, zoals een e-commerce webshop met prijs en voorraad updates die regelmatig verandert.
 

Het belang van Dynamic rendering voor SEO

Uit wat we schreven, blijkt duidelijk dat Dynamic rendering in wezen een SEO JavaScript-oplossing is waarmee zoekmachines pagina's die anders niet zouden kunnen worden uitgevoerd, correct kunnen verwerken.

Websites met veel content of veel JavaScript, waardoor ze snel kunnen veranderen, zijn het meest geschikt voor Dynamic rendering.

Bots zijn gebaseerd op statische HTML-elementen en niet op grafische interfaces die voor de hand liggend zijn voor bezoekers: met Dynamic rendering worden pagina's aan de clientzijde vertaald, volledig toegankelijk gemaakt en aangeboden aan bots van zoekmachines in hun favoriete statische HTML-indeling, zodat ze toegang hebben tot, begrijp en indexeer onmiddellijk de content die in de zoekopdrachten te vinden is.

Zoals Google uitlegt, vereist Dynamic rendering dat de webserver crawlers detecteert (bijvoorbeeld met user-agent); crawler-verzoeken worden gericht aan een renderer, verzoeken worden normaal afgehandeld. Indien nodig publiceert de dynamic renderer een crawler-vriendelijke versie van de content, zoals een statische HTML-versie.

Wat is renderen?

Renderen, in context, is het proces waarbij Googlebot de pagina's ophaalt, de broncode uitvoert en de inhoud beoordeelt om de lay-out of structuur van de website te begrijpen. indexeringsfouten kunnen het gevolg zijn van renderingsfouten.

Daarom is het de moeite waard om webpagina's te analyseren. Je moet kijken naar zowel het aantal geïndexeerde pagina's als of specifieke delen van die pagina's worden geïndexeerd. Met Ziptie.dev kun je dit eenvoudig in de gaten houden.

Hier is een visuele weergave van het rendering proces:

Het rendering proces voor webpagina's vindt plaats in twee fasen:

1. Oorspronkelijke HTML
2. DOM
    

Oorspronkelijke HTML

Dit proces vindt plaats als een reactie van de server terwijl Googlebot de hele pagina crawlt om JS- en CSS-bestanden te identificeren die aanwezig zijn om de pagina te bouwen.

DOM

Het Document Object Model, afgekort als DOM of ook wel Rendered HTML genoemd, is een interface die weergeeft hoe de browser de HTML (en XML) leest. Met de DOM manipuleert Javascript de structuur en stijl van de website.

Dynamic Rendering stuurt volledig gerenderde content naar zoekmachines terwijl menselijke bezoekers worden bediend met normale, aan de clientzijde weergegeven content. Het is pre-rendering, maar alleen voor bots van zoekmachines.Meer informatie over Dynamic Rendering.