JavaScript SEO

Wat verandert JavaScript voor Google?

Bij een klassieke site staat alle inhoud al in de HTML die de server stuurt. Sommige JavaScript-sites werken met een app-shell: de eerste HTML is een lege schil en JavaScript vult de pagina pas in de browser. Google moet dan eerst het JavaScript uitvoeren voordat de inhoud zichtbaar is. Hoe dat gaat, lees je bij rendering.

Google noemt server-side rendering of prerendering nog steeds een goed idee. De site wordt er sneller van, voor bezoekers en voor crawlers. Bovendien kan niet elke bot JavaScript uitvoeren.

Waar let je op bij JavaScript SEO?

• Links: Google vindt links alleen als het <a>-elementen met een href zijn. Links die JavaScript later toevoegt, zijn prima als ze aan die eis voldoen.
• Routing: gebruik in een single-page app de History API, zodat elke weergave een eigen URL heeft. Laad geen andere inhoud via fragmenten (het deel na de #). Die URL’s kan Google niet betrouwbaar verwerken.
• Statuscodes: geef een betekenisvolle code, zoals een 404 voor een pagina die niet bestaat en een 401 voor een pagina achter een login.
• Robots-metatag: ziet Google noindex in de eerste HTML, dan kan Google het renderen overslaan. Haal je de noindex later met JavaScript weg, dan werkt dat misschien niet.
• Canonical tag: zet die het liefst in de HTML. Pas je hem met JavaScript aan, gebruik dan dezelfde URL als in de oorspronkelijke HTML en zorg dat er maar één canonical tag op de pagina staat.
• Caching: Googlebot bewaart bestanden lang en kan cache-headers negeren. Zet daarom een vingerafdruk in de bestandsnaam, zoals main.2bb85551.js. Elke nieuwe versie krijgt zo een nieuwe naam.

Voorbeeld: een webshop als single-page app

Een webshop in kampeerspullen uit Arnhem draait als single-page app. Bestaat een product niet meer, dan toont JavaScript de tekst ‘Product niet gevonden’. De server stuurt toch statuscode 200. Voor Google lijkt dat een gewone pagina met bijna niets erop, en Search Console meldt een soft 404.

Google noemt twee oplossingen. De webshop kan met JavaScript doorsturen naar een URL waarop de server een echte 404 geeft, zoals /niet-gevonden. Of de webshop voegt met JavaScript een noindex toe aan de foutpagina. De webshop kiest voor de doorverwijzing.

Hoe controleer je wat Google ziet?

Gebruik de URL-inspectietool in Search Console of de test voor uitgebreide resultaten (Rich Results Test). Daarin zie je hoe Google een URL crawlt en rendert. Je ziet onder meer de geladen bestanden, meldingen uit de JavaScript-console en de gerenderde HTML.

Kijk vooral naar die gerenderde HTML. Staat je tekst daar niet in, dan kan Google die niet indexeren. Dat geldt ook voor inhoud in webcomponenten: Google ziet alleen wat na het renderen zichtbaar in de HTML staat.

Veelgestelde vragen over JavaScript SEO