JavaScript en SEO: alles wat je moet weten

JavaScript wordt steeds populairder. Logisch, want met behulp van JavaScript kun je webpagina’s interactief maken en hiermee worden pagina’s een stuk mooier. Dit klinkt natuurlijk goed, maar voor je SEO kleven er echter ook nadelen aan het gebruik van JavaScript. Er kunnen verschillende problemen ontstaan die van invloed zijn op de organische vindbaarheid van een website wanneer gebruik wordt gemaakt van JavaScript. Hoe gaan zoekmachines met JavaScript om, welke mogelijke issues kunnen er ontstaan en welke oplossingen kunnen in deze gevallen toegepast worden?

HTML, CSS en JavaScript

Veel websites zijn gemaakt met behulp van verschillende script-, programmeer- en mark-up talen, waaronder HTML, CSS en JavaScript. Om te begrijpen wat JavaScript is en welke SEO-issues hierbij kunnen ontstaan, is het belangrijk om de verschillen tussen deze drie ‘talen’ te kennen.

• HTML: HTML staat voor HyperText Markup Language. Het is een opmaaktaal die zorgt voor de structuur en de content van de website.

• CSS: Cascading Style Sheets (CSS) wordt gebruikt om het design van de pagina te bepalen.

• JavaScript: JavaScript wordt gebruikt om dynamische en interactieve elementen te definiëren.

JavaScript is een stuk foutgevoeliger dan HTML. Waar de browser bij HTML bepaalde tags vanzelf afsluit, gebeurt dit bij JavaScript niet. Wanneer de code fouten bevat, kan het zijn dat de browser of de zoekmachine JavaScript-onderdelen niet begrijpt.

JavaScript SEO-issues

Het gebruik van JavaScript kan verschillende issues met zich meebrengen. Een aantal van de belangrijkste en meest voorkomende issues:

Crawlbaarheid

Door links in JavaScript op te maken of deze alleen te tonen door middel van JavaScript, kan het zijn dat de links niet of minder snel gevolgd worden door Google en andere zoekmachines. Volgens experimenten van Elephate volgt Google wel de eerste JavaScript-link, maar niet de daaropvolgende. Hierdoor kan het voorkomen dat delen van je website niet gecrawld of geïndexeerd worden en dit heeft vervolgens een negatieve invloed op je organische vindbaarheid.

Verkrijgbaarheid

Als delen van de content alleen met behulp van JavaScript getoond worden, kan het zijn dat deze content niet door de zoekmachine wordt gelezen of minder wordt gewaardeerd. Hierdoor wordt niet alle content meegenomen door Google voor de beoordeling van je organische posities.

Snelheid

JavaScript kan een grote negatieve invloed hebben op de laadtijd van een website, doordat het renderen van JavaScript meer processorkracht kost dan het renderen van HTML. Tegenwoordig is snelheid een rankingfactor en zijn gebruikerssignalen ook een belangrijke rankingfactor. Bezoekers zullen bij een langzame website eerder afhaken dan bij een snelle website.

“JavaScript kan een grote negatieve invloed hebben op de laadtijd van een website”

Bij grote sites kan snelheid ook effect hebben op het crawlbudget. Bij een langzame website zullen er minder pagina’s gecrawld worden.

Welke zoekmachines begrijpen JavaScript?

Uit eerder onderzoek van Bartosz Góralewicz kon geconcludeerd worden dat Google en Ask de enige zoekmachines zijn die JavaScript-gegenereerde content adequaat kunnen indexeren, al zijn er nog wel diverse functies die ook deze zoekmachines niet begrijpen. De nieuwste JavaScript-functies begrijpt Google op dit moment nog niet, omdat deze nog een renderer gebruikt die gelijk is aan Chrome 41. Deze versie van Chrome dateert nog uit maart 2015.

Onlangs publiceerde Deepcrawl een artikel waarin ze aangeven dat dit tegenwoordig niet meer altijd het geval is. Google lijkt nu te testen met een renderer die gebaseerd is op Chrome 69. Deze versie is uitgekomen in september 2018 en dus een stuk nieuwer dan Chrome 41. Binnen welk tijdsbestek pagina’s altijd met de nieuwe versie gerenderd worden, is nog niet duidelijk. Google heeft hier nog geen informatie over gegeven.

Google is veruit de meest gebruikte zoekmachine (94 procent) in Nederland. Andere zoekmachines, zoals Bing, Yahoo! en DuckDuckGo, hebben ook aardig wat gebruikers, maar komen niet in de buurt van het aantal dat Google gebruikt. Ook Bing heeft aangegeven JavaScript te begrijpen en te kunnen crawlen, en ontwikkelt zich steeds verder op dit gebied, maar uit diverse onderzoeken blijkt dat dit nog verre van betrouwbaar is.

“Zorg er voor dat je content niet uit JavaScript komt, maar ook in de broncode van je website in HTML is opgebouwd”

Wil je het maximale uit zoekmachines naast Google halen? Zorg er dan voor dat je content niet uit JavaScript komt, maar ook in de broncode van je website in HTML is opgebouwd. Tevens is het belangrijk om links niet met onclick-attributen op te bouwen. Gebruik in plaats hiervan <a>href-attributen.

Google’s crawler

Om meer inzicht te krijgen in hoe de issues rondom JavaScript en Google kunnen ontstaan, is het belangrijk om meer inzicht te krijgen in het proces van de zoekmachine.

Er zijn twee systemen in het proces rondom het vergaren van informatie voor de zoekmachine; namelijk de crawler (Googlebot) en de indexer (Caffeine). Googlebot en Caffeine worden vaak door elkaar gehaald, zelfs door Google zelf! Iets om op te letten wanneer je blogs over dit onderwerp leest.

Voor een gewone HTML-website ziet het proces rondom het crawlen er als volgt uit:

1. Googlebot downloadt een HTML-bestand.
2. Googlebot haalt alle links uit de broncode en kan ze tegelijkertijd bezoeken.
3. Googlebot downloadt de CSS-bestanden.
4. Googlebot stuurt de gedownloade bestanden naar Caffeine.
5. Caffeine indexeert de pagina.

Dit proces gebeurt razendsnel.

Wanneer we gaan kijken naar websites die gebruik maken van JavaScript, wordt dit proces een stuk ingewikkelder.

1. Googlebot downloadt een HTML-bestand.
2. Googlebot downloadt de CSS- en JavaScript-bestanden.
3. Googlebot maakt gebruik van de Google Web Rendering Service (een onderdeel van de Caffeine indexer) om de JavaScript-code te ontleden, compileren en uitvoeren.
4. De Web Rendering Service haalt de data uit externe API’s, uit de database, et cetera.
5. Vervolgens kan de indexer de content indexeren.
6. Google kan nu nieuwe links ontdekken en deze toevoegen aan de wachtrij van de crawler.

Het lijkt erop dat Google alle grote JavaScript-frameworks inmiddels begrijpt. Sommige frameworks renderen onderdelen meer aan de serverkant en andere frameworks worden meer aan de gebruikerskant (client-side) gerenderd. Het is belangrijk dat de code foutloos geschreven is. Foutmeldingen in de console kunnen ervoor zorgen dat de zoekmachine de code niet helemaal begrijpt. Hierdoor kunnen er crawl- of indexatieproblemen ontstaan.

Doordat het proces slechts één stap meer bevat, lijkt het alsof het nagenoeg even snel gaat als bij het crawlen van een website die enkel HTML bevat, maar schijn bedriegt. De nieuwe links worden bij een HTML pagina al in de tweede stap doorgestuurd, terwijl dit in het geval van JavaScript-links pas bij stap 6 is. Daarnaast vergt het ontleden, compileren en uitvoeren van JavaScript veel tijd.

Snelheid

Doordat (client side) JavaScript nog ontleed, gecompileerd en uitgevoerd moet worden, is de laadtijd al snel een stuk langer dan wanneer de pagina enkel uit HTML en CSS bestaat.

“Het verwerken van JavaScript kost de zoekmachine, maar ook de gebruiker, meer tijd”

Het verwerken van JavaScript kost de zoekmachine dus meer tijd, maar ook voor de gebruiker duurt dit langer. Zo duurt het volgens Sam Saccone van Google ongeveer 850 milliseconden voor de Samsung Galaxy S7 om 1mb JavaScript te verwerken. De Nexus 5 (2,5 jaar ouder) doet hier ongeveer 1700ms over.

Google laadt alles van de pagina tot de DOM geladen is. Om de perceptie van snelheid te verbeteren, kun je ervoor zorgen dat de niet-essentiële JavaScript-onderdelen pas inladen nadat de DOM geladen is. Dit zorgt er ook voor dat de gebruiker eerder onderdelen van de website ingeladen ziet, waardoor ook de gebruiker een betere ervaring zal krijgen.

Oplossingen

HTML

Door bepaalde onderdelen van een website in HTML te bouwen, kunnen de eerder genoemde issues voorkomen worden. Dit is echter niet altijd mogelijk, omdat JavaScript mogelijkheden biedt die in standaard HTML niet mogelijk of lastiger te realiseren zijn.

Isomorphic JavaScript

Een andere oplossing is door gebruik te maken van isomorphic JavaScript en de statische JavaScript-onderdelen te pre-renderen. Dit houdt in dat de server al een render heeft gemaakt van het onderdeel en deze vervolgens naar de bezoeker stuurt. Dit is echter afhankelijk van de situatie, omdat het niet altijd mogelijk is. Daarnaast vergt dit veel kennis van de developer en kan niet elke developer dit correct implementeren.

JavaScript pre-rendering

Een andere mogelijkheid is om door middel van pre-rendering een HTML-snapshot te maken van de pagina. Deze snapshot wordt alleen naar de zoekmachines gestuurd. Hierdoor merkt de bezoeker geen verschil, maar zullen de zoekmachines alles in HTML zien. De mogelijke issues met crawlability en indexability worden hierbij voorkomen. Het is wel belangrijk dat de HTML-snapshot niet te veel afwijkt van de daadwerkelijke pagina die de bezoekers zien. Dit kan door Google anders gezien worden als cloaking. Hier wordt uitgelegd hoe je een pagina kan bekijken als Googlebot agent.

Toekomstplannen voor Googlebot

Google kondigde op de Chrome Dev Summit 2018 aan plannen te hebben om het crawlen en het renderen te integreren. Dit zou het hele proces moeten versnellen. Aangezien het renderen nu vaak dagen of zelfs weken duurt, is de vraag hoe lang dit proces dan zal duren.

“In de toekomst zullen de nieuwste JavaScript-functies ook werken voor Googlebot”

Naast het integreren van het crawl- en renderproces is Google ook van plan om Googlebot altijd gebruik te laten maken van de nieuwste versie van Chrome, in plaats van Chrome 41 zoals het op dit moment het geval is. Dit betekent dat de nieuwste JavaScript-functies ook zullen werken voor Googlebot en deze minder fouten krijgt tijdens het crawlen en renderen van je website.

Conclusie

De verschillende zoekmachines kunnen steeds meer met JavaScript. Google kan JavaScript redelijk goed begrijpen, maar dat wil niet zeggen dat het geheel zonder problemen gaat. Daarnaast is JavaScript ook niet per definitie slecht voor de organische vindbaarheid van je website, maar het is wel heel belangrijk dat er goed gekeken wordt naar welke onderdelen van je website in JavaScript gemaakt zijn. Stel jezelf de volgende vragen: Waarom zouden we een bepaald onderdeel van de website in JavaScript bouwen in plaats van HTML? Wat zijn de gevolgen voor de crawlbaarheid, verkrijgbaarheid en snelheid van de JavaScript-implementatie? En als het nadelige gevolgen heeft, hoe kunnen deze omzeild worden?