JavaScript en SEO: best practices

De tijden dat websites bestonden uit slechts HTML en CSS code behoren tot het verre verleden. Vandaag de dag heeft een web developer veel meer mogelijkheden om een site dynamisch en interactief te maken. Een van deze mogelijkheden is te vinden in JavaScript, een programmeertaal die vandaag de dag veel gebruikt wordt. Helaas kunnen zoekmachines niet altijd even goed overweg met JavaScript als dat ze met HTML code kunnen. In dit artikel lees je meer over het schrijven van JavaScript code die wél geïndexeerd wordt door Google.

Het verschil tussen JavaScript en HTML/CSS

De voorkant van een website (frontend), bestaat uit alle zichtbare en eventueel interactieve elementen die bezoekers op een website tegenkomen. Deze kant van de website wordt ook wel de klantzijde genoemd. Om de afbeeldingen, teksten, kolommen, tabellen en interactieve elementen op de voorkant te maken, wordt door developer gebruik gemaakt van HTML, CSS en JavaScript. Hieronder staat een korte beschrijving van de drie frontend talen:

• HTML: HTML staat voor Hypertext Markup Language. Deze taal wordt gebruikt om zowel de structuur op een pagina aan te geven (tabellen, paragrafen etc.) als om relaties tussen verschillende pagina’s te creëren.
• CSS: CSS staat voor Cascading Style Sheets en wordt veelal gebruikt om websites vorm te geven. Dit kan zowel in de HTML code op paginaniveau als via een aparte stylesheet waar de layout voor de gehele website bepaald kan worden.
• JavaScript: Deze programmeertaal wordt veelal gebruikt om animaties te creëren en interactieve elementen mogelijk te maken. JavaScript voegt nieuwe functionaliteiten toe aan een website of is in staat bestaande functionaliteiten nog beter te maken.

Client side rendering vs server side rendering

Niet alleen verschillen de talen in functionaliteiten en het doel dat ze verwezenlijken, ook de manier waarop de code wordt gepresenteerd aan de gebruiker verschilt. Dit verschil zit hem in de manier waarop een gebruiker of zoekmachine de code waaruit een website bestaat ontvangt. 

HTML code wordt bijvoorbeeld direct vanuit de server gepresenteerd aan de browser van een bezoeker van je website. Dit wordt ook wel server side rendering genoemd. HTML code kan zo redelijk snel worden gepresenteerd, omdat de server waar de website gehost staat de code direct doorgeeft.

Voor JavaScript werkt het anders. JavaScript wordt namelijk via client side rendering ingeladen. De server presenteert hier JavaScript script aan een bezoeker of zoekmachine, waarna dit script in de browser wordt uitgevoerd. 

HTML en JavaScript voor Google bot

Het grote verschil zit hem in de manier waarop zoekmachines, en dan vooral Google, websites kunnen begrijpen en indexeren. Voor HTML websites hoeft een zoekmachine slechts de code te lezen, CSS-bestanden te downloaden en kan de pagina geïndexeerd worden in de zoekresultaten. 

Voor JavaScript werkt het anders. Hierbij wordt een HTML-bestand gedownload door een zoekmachine, waarna CSS en JavaScript-bestanden gedownload worden. Vervolgens maakt Google gebruik van Web Rendering Service (WRS) om de JavaScript te renderen, net zoals een browser gedaan zou hebben. Nadat de code gerenderd is, kan de pagina geïndexeerd worden door de zoekmachine.

Voor de zoekmachine is er dus een extra stap vereist bij websites die gebruik maken van JavaScript ten opzichte van websites die slechts HTML gebruiken. Ondanks dat Google JavaScript steeds beter kan begrijpen en kan indexeren, kan deze extra stap nog steeds een hindernis voor een goede indexatie vormen.

JavaScript is namelijk veel foutgevoeliger dan HTML, waardoor scripts sneller onleesbaar voor zoekmachines kunnen worden. Dit heeft als gevolg dat een webpagina niet geïndexeerd kan worden, waardoor deze dus niet in de zoekresultaten zal opduiken. 

Daarnaast duurt het simpelweg langer om JavaScript te laden dan ‘gewone’ HTML/CSS code. Dit komt de algemene laadtijd van een website niet ten goede. Dit kan extra pijnlijk zijn voor SEO-resultaten, gezien Google’s recente Core Web Vitals update.

Populaire frameworks die gebruik maken van JavaScript

JavaScript wordt veelal toegepast in populaire frameworks. Deze frameworks worden gebruikt om sneller een interactieve website neer te kunnen zetten, deze gemakkelijker te kunnen updaten en onderhouden en om eenvoudiger samen te kunnen werken. 

Voorbeelden van frameworks waar JavaScript in wordt gebruikt zijn:

• Google’s Angular
• Facebooks React
• Vue
• Ember

SEO en JavaScript: best practices

Zoals beschreven verschilt de manier waarop HTML en JavaScript door zoekmachines weergegeven worden enorm. Om deze reden kent JavaScript een aantal valkuilen op het gebied van SEO. Hieronder worden de JavaScript best practices beschreven voor SEO-specialisten, web developers en website eigenaren.

1. Plaats hyperlinks vanuit HTML

Wanneer hyperlinks volgens de Web Standards worden geplaatst, zijn deze het beste begrijpbaar voor zoekmachines. Dit betekent dat er van het HREF HTML-attribuut gebruik gemaakt moet worden. Een hyperlink moet dus altijd als volgt geplaatst worden:

<a href=”/blog/”>Bezoek onze blog</a>

Vanuit JavaScript zijn er meerdere opties die zoekmachines in de war kunnen brengen, zoals:

< a onclick=”goto(‘https://brthrs.nl/blog’)”>

2. Laad afbeeldingen vanuit HTML

Ook voor afbeeldingen wordt het aangeraden om de Web Standards te hanteren. Dit geldt vooral wanneer afbeeldingen pas geladen worden wanneer de gebruiker op het betreffende gedeelte van een pagina komt (lazy loading). In de praktijk is dit een manier om een website sneller te laden. Echter, Google scrollt niet langs websites zoals mensen dit doen. Hierdoor kan het gebeuren dat lazy loading via JavaScript de afbeeldingen volledig verbergt voor de zoekmachine. 

3. Render de belangrijkste informatie server side

Zoals eerder besproken werd in dit artikel is het gebruik van client side rendering enigszins gevaarlijk voor de indexatiemogelijkheden vanuit zoekmachines. Website developers doen er goed aan minstens de volgende elementen via de server te renderen:

• De tekst en afbeeldingen op de pagina.
• Paginatitel en meta beschrijvingen.
• Structured data en hreflang, geeft de taal aan waarin een pagina is geschreven.

Ondersteuning bij technische SEO

Technische SEO gaat verder dan alleen JavaScript problemen. Brthrs helpt organisaties bij het voldoen aan andere technische eisen, zoals de Core Web Vitals. Benieuwd hoe we dat doen? Neem vrijblijvend contact met ons op voor meer informatie.