Javascript en SEO

Javascript en SEO: it’s complicated. Er doen veel horrorverhalen over javascript en SEO de ronde. Toch gebruikt vrijwel iedere website javascript. In dit artikel kijken we naar de risico’s van javascript voor SEO, en hoe je kunt zorgen dat Google jouw pagina met javascript goed kan indexeren. Nieuwsgierig geworden? Lees dan gauw verder.

Wat is javascript?

Websites bestaan uit HTML, CSS en Javascript. De HTML zorgt voor de structuur en bevat de content. CSS zorgt voor styling (kleur, positionering, lettertypen en veel meer). Met javascript maak je de website dynamisch. Het wordt bijvoorbeeld gebruikt voor sliders, productfilters, lees-meer linkjes en snelle validatie van invulformulieren.

Javascript wordt uitgevoerd door de client, oftewel je browser.

De opkomst van front-end frameworks

Vrijwel iedere website gebruikt javascript, en in veruit de meeste gevallen heeft Google daar geen enkel probleem mee. Het gaat pas mis als de website totaal niet werkt zonder javascript.

Sinds een aantal jaar hebben front-end frameworks zoals React, Vue en Angular flink aan populariteit gewonnen. Dit soort frameworks gebruiken erg veel javascript om pagina’s op te bouwen. In plaats van een webserver die de pagina opbouwt en verstuurt (server-side rendering), gebeurt dit voor een groot deel in de browser. Dat noemen we client side rendering.

Met client side rendering is javascript dus niet alleen meer een techniek om dynamische elementen toe te voegen, maar de basis waarop de site gebouwd is. In het ergste geval zie je zonder javascript alleen een wit scherm.

Waarom is Javascript een probleem voor SEO?

Zoals al gezegd, Google kan prima met javascript omgaan. Ook jouw website gebruikt javascript, en in de meeste gevallen is dat geen enkel probleem.

Om te begrijpen waar het risico van javascript voor SEO zit, moet je begrijpen hoe Google je website crawlt. Daarbij is er een verschil tussen crawlen, waarbij Google alleen naar de HTML-broncode kijkt, en renderen, waarbij Google ook de javascript uitvoert. Dan pas wordt de pagina getoond zoals jij en je bezoekers deze normaalgesproken in de browser zien.

Onderstaande afbeelding laat zien hoe Google dat doet. De Googlebot bezoekt je website, en bekijkt de HTML-broncode zonder javascript te renderen. Google checkt de indexerings-instructies uit je robots tag, de canonical URL, meer meta info, en zet interne links in de crawl queue. Later zal Google nog eens terugkomen, en daarbij de javascript uitvoeren. 

Daar kan een flinke vertraging inzitten, van soms wel enkele weken. Zoals al eerder in de community gedeeld, duurt het crawlen van javascript-pagina’s tot wel 9 keer zo lang!

Je zult tegen SEO-problemen aanlopen, als de pagina’s op basis van de HTML-broncode (zonder javascript uit te voeren) en de gerenderde pagina (waarbij javascript wordt uitgevoerd) erg verschillen van elkaar. Toon je bijvoorbeeld een groot deel van de content pas nadat javascript wordt uitgevoerd? Dan heeft Google moeite om die content te vinden, wat zorgt voor tragere indexatie.

Het verschil tussen beide kun je zelf ook zien. In Chrome, onder de instellingen van Developer Tools, kun je Javascript uitzetten. Zo ziet Google je website tijdens het crawlen.

Voorbeeld: de lege pagina

Laten we een extreem voorbeeld nemen: je developer heeft in de HTML broncode geen enkele content opgenomen. Er staat alleen een placeholder in de broncode, waar alle content via javascript wordt toegevoegd. Dat gebeurt uiteraard pas na het uitvoeren van javascript (als de pagina aan de beurt is om door Google gerendered te worden).

Bij het eerste bezoek ziet Google dus geen content, en geen interne links. De pagina wordt netjes aan de render-queue toegevoegd, maar tot die tijd heeft Google geen interne links en geen enkele content. Pas bij het renderen ziet Google de content, en worden interne links aan de crawl queue toegevoegd. Maar we zijn inmiddels wel een paar weken verder!

Dit voorbeeld is extreem, maar realistisch. Geloof me, ik heb het vaak genoeg voorbij zien komen.

Nog erger: robots updaten met javascript

Kan het nog gekker? Jazeker! Een developer zet in de broncode de robots meta tag op noindex, en update die met javascript naar index, follow. 

Google’s crawler komt langs en ziet alleen de noindex staan. Javascript wordt niet uitgevoerd, Google volgt de noindex instructie en voegt de pagina niet toe aan de render-queue. Deze pagina gaat dus nooit in de index komen:

Aandachtspunten voor javascript en SEO

Tegenwoordig kan geen enkele website zonder javascript, en dat is ook niet nodig. Hoe zorg je ervoor dat Google jouw website goed kan crawlen, ondanks dat je javascript gebruikt?

Gebruik server-side rendering waar mogelijk

Veel moderne frontend frameworks ondersteunen tegenwoordig server-side rendering. Daarmee staat zoveel mogelijk content al in de HTML broncode, voordat er client side rendering nodig is. Het verschil tussen wat Google tijdens het crawlen en na het renderen ziet, is daarmee een stuk kleiner. Ook Google raadt dit aan.

Bij een project van een grote klant heb ik meegemaakt dat pagina’s met Client-side rendering totaal niet werden opgepikt door Google. Na het implementeren van server-side rendering werde alle content snel geïndexeerd en begon het binnen een paar dagen te ranken. Like magic!

Gebruik echte links

Een link ziet er zo:

<a href=”[url waarnaar je linkt]”>Link tekst</a>

Google snapt deze links, en zal ze volgen. Dat wordt een stuk lastiger bij dit soort links:

<a onClick=”javascript: window.location: ‘[url waarnaar je linkt]’”>Link text</a>

<a id=”menu-link”>Link tekst</a>

Of nog erger:

<span id=”menu-link”>Link tekst</span>

Probeer waar mogelijk altijd gebruik te maken van een a (anchor) tag met een href attribuut. Je kunt hier met javascript altijd nog andere magic aan toe voegen (zoals het openen van de link in een popup, of met een effectje), maar je hebt in ieder geval een fallback die werkt zonder javascript. Zo kan Google je interne links goed volgen en zo je website indexeren.

Zorg voor een volledige sitemap

Een XML sitemap is de ideale manier voor Google om snel alle URLs van je website te vinden. Als je door overmatig javascript-gebruik niet zoveel interne links hebt, is de sitemap een goede backup: zo kan Google alsnog al je pagina’s vinden zonder het renderen af te wachten.

Update geen metadata met javascript

Stelregel: update geen data in de head van een pagina met javascript. Dat geldt vooral voor de canonical URL en de robots meta tag. Als die in eerste instantie niet goed staan, is de kans erg groot dat Google tegen issues aanloopt.

Ook het updaten van de titel of de meta description is geen goed idee. Zorg dat al deze eigenschappen netjes in de HTML staan. Gerelateerd hieraan: zet deze metadata zo hoog mogelijk in de head van je pagina, bij voorkeur voordat javascript bestanden worden ingeladen. Mochten daar dan fouten in zitten, dan is de metadata die belangrijk is voor SEO in ieder geval goed te lezen door de Googlebot.

Conclusie

Javascript is onmisbaar voor een moderne website, maar kan bij verkeerd gebruik zorgen voor problemen met indexeren door Google. Met de juiste technieken, zoals server-side rendering, zorg je ervoor dat Google je pagina al tijdens het crawlen goed begrijpt. Dat zorgt voor een snelle en correcte indexering.