Zoekmachines kunnen tegenwoordig JavaScript uitvoeren en de weergegeven inhoud indexeren. Toch hebben veel sites nog JavaScript-problemen die SEO schaden. Inhoud die afhankelijk is van JavaScript om te laden, wordt mogelijk niet geïndexeerd. Afbeeldingen met lazy loading worden misschien niet ontdekt. Client-side rendering kan te traag zijn. Zoekmachines wachten niet altijd tot alles geladen is. Goede JavaScript-optimalisatie zorgt dat zoekmachines al je inhoud zien, begrijpen en efficiënt kunnen crawlen.
Hoe zoekmachines met JavaScript omgaan
Google crawlt pagina's zoals een browser dat doet. Het voert JavaScript uit, geeft de inhoud weer en indexeert wat het ziet. Dat is goed nieuws. Complexe JavaScript-toepassingen kunnen worden geïndexeerd.
Google verwerkt pagina's in twee golven. In de eerste golf crawlt het de HTML om de basisstructuur van de pagina te zien. In de tweede golf geeft het JavaScript weer om dynamische inhoud te zien. Dit proces in twee golven kost tijd en rekenkracht.
Bij pagina's met complex JavaScript of zware weergave wacht Google mogelijk niet tot alles geladen is. Het indexeert dan misschien alleen wat na een paar seconden zichtbaar is. Inhoud die traag of via lazy loading laadt, wordt mogelijk niet geïndexeerd.
Veelvoorkomende JavaScript-problemen voor SEO
Client-side rendering vertraagt het zichtbaar worden van inhoud. Er laadt een lege HTML-pagina die JavaScript start om de inhoud op te bouwen. Google ziet eerst de lege pagina. Duurt het opbouwen te lang, dan indexeert Google mogelijk de lege versie.
Afbeeldingen en inhoud met lazy loading laden pas als bezoekers scrollen. Google scrollt niet altijd. Inhoud met lazy loading onder de vouw wordt mogelijk niet ontdekt of geïndexeerd.
JavaScript-fouten verstoren het weergeven. Bevat JavaScript fouten, dan wordt de pagina mogelijk niet goed opgebouwd. Zoekmachines zien dan kapotte, onvolledige inhoud.
Dynamisch aangemaakte URL's met parameters (pagina?id=123&sessionid=abc) zorgen voor dubbele inhoud. Elke unieke parameter maakt een nieuwe URL. Zoekmachines zien dan mogelijk duizenden duplicaten van dezelfde inhoud.
Metatags die door JavaScript worden aangemaakt, worden mogelijk niet door alle crawlers gezien. Open Graph-tags, previewkaarten voor sociale media en andere metatags die via JavaScript worden toegevoegd, lezen crawlers van sociale media mogelijk niet goed uit.
Server-side rendering of client-side rendering
Bij server-side rendering maakt de server de HTML aan en stuurt die naar de browser. De HTML bevat dan al alle inhoud. Browsers tonen die direct. Zoekmachines zien meteen alle inhoud.
Bij client-side rendering komt er minimale HTML met JavaScript die de pagina in de browser opbouwt. De inhoud ontstaat in de browser nadat het JavaScript is uitgevoerd. Dat duurt langer en zoekmachines zien mogelijk niet alles.
Voor SEO is server-side rendering of statische generatie beter. De HTML gaat compleet naar de browser (en de zoekmachines). De inhoud is direct zichtbaar.
JavaScript-weergave testen
Gebruik de URL-inspectietool in Google Search Console. Vul een JavaScript-zware pagina in. Google laat zien wat het na het weergeven heeft gevonden. Zo vergelijk je de pagina zoals die is gecrawld (wat Google ziet) met wat jij in je browser ziet.
Gebruik een gratis open-source audittool in je browser. Die test hoe crawlbaar je pagina is en wijst op JavaScript-problemen.
Bekijk de paginabron in je browser om de ruwe HTML te zien. Inspecteer daarna het element om de weergegeven DOM te zien. Vergelijk ze. Verschillen ze sterk, dan gebruik je client-side rendering die zoekmachines kan verwarren.
Gebruik een dienst waarmee je je pagina in verschillende browsers en op verschillende apparaten test. Simuleer wat Google crawlt en wat er wordt weergegeven.
Best practices voor JavaScript-SEO
Gebruik server-side rendering (SSR) of statische sitegeneratie (SSG) voor kritieke inhoud. Zo staat de inhoud in de HTML die naar zoekmachines gaat.
Laad belangrijke inhoud vooraf of direct. Vertrouw voor inhoud boven de vouw niet op lazy loading. Laad kritieke afbeeldingen en tekst meteen.
Vermijd dynamisch aangemaakte URL's met onnodige parameters. Gebruik schone, eenvoudige URL's. Moet je toch parameters gebruiken, bundel dan duplicaten met canonical-tags.
Zorg dat metatags in de HTML staan of snel door JavaScript worden weergegeven. Crawlers van sociale media en zoekmachines moeten metatags direct zien, niet pas na zware weergave.
Test met Google Search Console. Controleer wat Google na het weergeven ziet. Los verschillen tussen wat jij ziet en wat Google ziet op.
Houd je JavaScript-bundels klein. Grote JavaScript-bestanden duren langer om te downloaden en uit te voeren. Kleinere bundels worden sneller weergegeven en zoekmachines crawlen sneller.
Frameworks en SEO
Veelgebruikte moderne JavaScript-frameworks gebruiken standaard client-side rendering. Dat geeft SEO-uitdagingen, omdat de inhoud eerst moet worden weergegeven voordat zoekmachines hem kunnen zien.
Er zijn ook meta-frameworks die server-side rendering of statische generatie toevoegen aan die gangbare frameworks. Ze lossen veel problemen met client-side rendering op.
Gebruik je een client-side framework zonder server-side rendering, wees dan extra voorzichtig met JavaScript-SEO. Test grondig met Google Search Console.
Veelgestelde vragen
Kan Google JavaScript-zware inhoud indexeren?
Ja, Google kan JavaScript uitvoeren en weergegeven inhoud indexeren. Dat kost wel tijd en rekenkracht. Heel zwaar JavaScript wordt mogelijk niet volledig geïndexeerd als het weergeven te lang duurt. Houd je JavaScript efficiënt en test met Google Search Console of je inhoud wordt geïndexeerd. Met de websitebouwer van WEMASY stel je dit direct op je website in.
Gebruik ik server-side rendering of client-side rendering?
Server-side rendering is beter voor SEO. De inhoud staat in de HTML die naar zoekmachines gaat. Zoekmachines zien die meteen, zonder op JavaScript te wachten. Client-side rendering geeft vertraging en het risico dat inhoud niet wordt geïndexeerd. Gebruik server-side rendering of statische generatie voor inhoud die in zoekresultaten moet scoren.
Moet ik zoekmachines andere HTML laten zien?
Nee. Google ziet liever dat je iedereen dezelfde HTML laat zien. Maak geen aparte versies voor Googlebot. Gebruik goede server-side rendering of detectie van weergave. Google crawlt de gewone bezoekersversie en hoort alle inhoud te zien.
Hoe los ik lazy loading van afbeeldingen op voor SEO?
Laad kritieke afbeeldingen boven de vouw vooraf. Gebruik native lazy loading (loading="lazy") met goede alternatieven voor oudere browsers. Gebruik de Intersection Observer API om afbeeldingen te laden terwijl bezoekers scrollen. Test met Google Search Console of Google je afbeeldingen ziet.
Maakt JavaScript mijn site trager?
Ja, het uitvoeren van JavaScript kost tijd. Grote JavaScript-bundels en zware verwerking vertragen het laden van de pagina. Dat schaadt de gebruikerservaring en je Core Web Vitals. Houd je JavaScript-bundels klein, splits code op en stel niet-kritieke JavaScript uit. Laad alleen wat nodig is.
Moet ik JavaScript gebruiken om metatags aan te maken?
Vermijd het als het kan. Metatags horen in de HTML-bron te staan. Crawlers van sociale media en sommige zoekmachines voeren JavaScript mogelijk niet uit. Moet je metatags toch met JavaScript aanmaken, gebruik dan server-side rendering of pre-rendering, zodat ze in de HTML staan.