JavaScript: alles wat je wilt (en moet) weten

Javascript wordt steeds populairder. Iedereen die iets met websites of internet doet, heeft hiermee te maken. Het is dus heel nuttig om te weten hoe het werkt, wat het doet en wat je ermee kan. Omdat we SEO-liefhebbers zijn, leggen we je ook nog uit wat de invloed ervan is op SEO. We geven je zelfs strategieën om te zorgen dat JavaScript en SEO goed samengaan.

Wat is JavaScript?

JavaScript is een scripttaal waarmee je webpagina’s interactief kan maken. Een stukje van een scripttaal bestaat uit een aantal opdrachten die de browser uitvoert. De browser ontvangt deze opdrachten als een HTML-pagina wordt ingeladen. De scripttaal staat namelijk in de HTML-code. Dat kan op twee manieren:

• direct in de code via <script>-tags; of

• met een verwijzing naar externe code.

Behalve JavaScript zijn er andere scripttalen. Het grote voordeel aan JavaScript is echter dat het in alle browsers wordt ondersteund.

Goed, je hebt nu meermaals het woord scripttaal gelezen. Daarbij denk je wellicht aan een programmeertaal, maar dat is niet hetzelfde. Het verschil zit hem in het feit dat een scripttaal een programma ofwel engine nodig heeft om te kunnen functioneren. Bij JavaScript zit deze engine in je browser. Bij een programmeertaal is dit niet het geval. Hierbij zit alles in de code besloten.

Om er nog even een schepje bovenop te doen, bestaat er ook nog de mark-uptaal. Dit is een taal waarmee iets opgemaakt kan worden. Voorbeelden van mark-uptalen zijn HTML en CSS.

Om te begrijpen wat je nu precies met JavaScript kan en hoe het werkt, is het goed om even terug te gaan naar het ontstaan van deze scripttaal. Het verhaal begint in 1995, het jaar waarin de basis werd gelegd door Brendan Eich. Hij was op dat moment werkzaam bij Netscape Communications Corporation. Dit is een nog steeds bestaand softwarebedrijf, en stond toentertijd vooral bekend om de webbrowser Netscape Navigator, ook wel bekend als Netscape.

JavaScript werd ontwikkeld onder de naam ‘Mocha’ als aanvulling op Java, ontwikkeld door Sun Microsystems. JavaScript moest een taal te worden die dezelfde – of zelfs betere – mogelijkheden kon bieden als Java, maar dan uitvoerbaar door de browser zelf en meer flexibel.

Bij lancering heette de taal nog ‘Livescript’. Later is het echter omgedoopt naar JavaScript.

Java en Javascript hebben namen die op elkaar lijken, maar zijn duidelijk verschillend. Java is namelijk een typische programmeertaal, terwijl we net hebben geleerd dat JavaScript een scripttaal is. Er wordt nog weleens gefluisterd dat de verwarrende naamwijziging vooral om marketingredenen is doorgevoerd!

Server side vs. client side

JavaScript is van oorsprong een client-side script. Behalve client-side scripts bestaan er ook server-side scripts. Het verschil tussen deze scripts zit hem in hetgeen er gebeurt zodra er een pagina wordt geladen in een webbrowser.

Een server-side script kan – zoals de naam al doet vermoeden – alleen op de server zelf worden uitgevoerd. Dit betekent dat wanneer jij een URL in een webbrowser typt, de pagina wordt opgezocht op de server waar het domein op staat. De server verstuurt de pagina als response terug naar de browser, die hem omzet in een webpagina.

Voor een server-side script betekent dit dat het op de server wordt uitgevoerd en dat het resultaat wordt meegenomen met de response die de server geeft. Dit heeft tot gevolg dat het server-side script slechts 1 keer per pagina kan worden uitgevoerd, namelijk bij het laden van de pagina.

Een client-side script kan meerdere keren worden uitgevoerd. Dit gebeurt namelijk in je browser zelf.

JavaScript frameworks

Als je iets wil ontwikkelen in JavaScript, hoef je niet steeds bij nul te beginnen. Daarvoor zijn er Javascript Frameworks. Deze vormen een basis waarop developers verder kunnen bouwen.

Een JavaScript framework zorgt ervoor dat een applicatie sneller en goedkoper ontwikkeld kan worden. Er ligt al een basis, waarmee het coderen vertrouwd en consequent is.

Er zijn vele soorten JavaScript frameworks. Dit komt vooral door het feit dat JavaScript in zoveel verschillende webbrowsers te gebruiken is. Het is daarom niet gek dat wanneer er een framework wordt ontwikkeld, dit in de populaire scriptingtaal JavaScript gebeurt. We duiken in één framework in het bijzonder, namelijk AngularJs.

Angularjs

AngularJS is een in 2012 door Google ontwikkeld open source framework. Angularjs staat vooral bekend om het toepassen van het SPA concept.

SPA staat voor Single Page Applications. Dit maakt het volgende scenario mogelijk:

1. De webpagina wordt geheel geladen.
2. De gebruiker klikt ergens op (bijvoorbeeld een filter, knop of link)
3. Pas daarna wordt het JavaScript uitgevoerd.

Wat gebeurt er nu na de klik? Dan wordt er een AJAX oproep uitgevoerd. AJAX staat voor ‘Asynchronous JavaScript And XML’. Dit is een techniek waarbij er gebruik wordt gemaakt van het ‘XMLHttpRequest-object’ om te communiceren met servers. Dat klinkt ingewikkeld, maar betekent in de praktijk dat informatie zowel kan worden verzonden als ontvangen in verschillende formaten.

Het formaat dat je voor dit scenario kan gebruiken is JSON. JSON staat voor ‘JavaScript Object Notation’. Nog een afkorting, maar ook deze heeft een simpele functie. Met deze standaard wordt informatie namelijk gestructureerd uitgewisseld.

Visuele weergave van het gebruik van Single Page Applications. De server laadt de complete HTML pagina. Vervolgens wordt er een AJAX oproep gedaan. Dan wordt JSON uitgewisseld. Dat zorgt ervoor dat de pagina niet opnieuw ingeladen hoeft te worden wanneer er sprake is van een interactie.

Hoe zou dit eruitzien als je geen SPA’s zou gebruiken? Deze situatie is hieronder weergegeven:

Klinkt mooi he, die SPA’s? Interactieve pagina’s die niet steeds herladen maar meebewegen met wat de gebruiker wil. Er kleven echter ook nadelen aan het gebruik van SPA’s.

Deze nadelen hebben te maken met de invloed van JavaScript op SEO. De Google-crawler bezoekt regelmatig pagina’s om deze in de index op te nemen. Dat zorgt ervoor dat de pagina’s vindbaar zijn via de zoekmachine.

Zoals we net gezien hebben, kan een pagina dankzij SPA’s veranderen zonder dat hij opnieuw geladen hoeft te worden. De URL blijft dus ook hetzelfde. Daardoor kan informatie echter verborgen blijven voor de crawlers. Die klikt namelijk niet altijd op de JavaScript-elementen.

Als je content niet gecrawld wordt en niet wordt opgenomen in de index, zal je ook niet vertoond worden in de zoekresultaten.

Dit is natuurlijk een horrorscenario voor iedereen die bezoekers wil binnenhalen via zijn website. JavaScript en zoekmachines hebben een heuse haat-liefdeverhouding met elkaar.

Waar JavaScript in de beginjaren in z’n geheel niet gecrawld en dus ook niet geïndexeerd, is dit vandaag de dag gelukkig wel wat anders.

Het was mei 2014 toen het voor het eerst werd aangekondigd dat JavaScript gecrawld kon worden. Een grote stap binnen technische SEO! Dat het nu wel gecrawld kan worden, wilt niet zeggen dat dit ook altijd gebeurt. De Google-crawler is lang niet altijd up-to-date met de nieuwste snufjes die JavaScript-programmeurs bedenken.

In de dans tussen JavaScript en SEO is de grootste uitdaging dan ook je website interactief te maken, maar de negatieve gevolgen van JavaScript op het gebied van SEO zoveel mogelijk te beperken. In de volgende paragrafen gaan we hierop in.

Hoe werkt JavaScript?

We geven je straks de praktische stappen gaan om erachter te komen of JavaScript door de zoekmachine wordt geïndexeerd. Om dat te begrijpen is het echter belangrijk om te weten wat er gebeurt als er een JavaScript-pagina wordt opgevraagd. De volgende stappen worden doorlopen:

4. Aanvragen pagina
De pagina wordt door de browser bij de server opgevraagd.
5. DOM
De browser start met het renderen van de DOM. DOM staat voor Document Object Model. Dit is, eenvoudig gezegd, de gestructureerde, georganiseerde versie van de webpagina-code. Hierin staan alle aanvullende bronnen zoals afbeeldingen, CSS en JavaScript.
6. DOMContentLoaded
Zodra de DOM wordt ingeladen op de pagina wordt het zogeheten DOMContentLoaded event ingeladen. Dit houdt niet meer in dan dat de oorspronkelijke HTML is ingeladen en klaar is voor JavaScript.
7. JavaScript
Vervolgens is het tijd voor het uitvoeren van JavaScript. Dit kan zijn het aanvullen van, verwijderen of wijzigen van de inhoud van de HTML bron.
8. Load Event
Het Load event wordt afgevuurd. Dit betekent dat alle bronnen zijn ingeladen en de pagina ‘af’ is.
9. Post-Load Events en User Events
Hier komen de eerder besproken SPA’s om de hoek kijken. Hierdoor kan de pagina continu worden aangepast door middel van content of interacties. Dit zijn veranderingen die plaats vinden nadat de pagina in zijn geheel is geladen.

Zelf testen of je JavaScript SEO vriendelijk is

Zoals gezegd gaat er regelmatig iets mis bij het ophalen van de pagina door de crawler. Dan is er bij een van de stappen dus iets niet goed gegaan, waardoorJavaScript niet goed door de crawler wordt gezien en/of geïndexeerd.

Het zelf testen of een zoekmachine je website met JavaScript kan crawlen en indexeren, kan op verschillende manieren:

• Google Search Console

Binnen Google Search Console bestaat de optie ‘Fetchen als Google’. Je vult een URL in en ziet daarna hoe een bezoeker en Googlebot de pagina zien.

Zit hier een verschil in? Dan kun je in ieder geval concluderen dat er werk aan de winkel is. Echter geeft GSC helaas niet de onderliggende HTML of DOM mee, waardoor het niet direct duidelijk wordt waar het probleem in zit.

• Screaming Frog

Met de tool Screaming Frog kan je meer inzicht krijgen in wat er misgaat.

Meestal crawl je met deze tool alleen statische HTML. Je kan echter ook AJAX of de volledige webpagina crawlen. Kies je de laatste mogelijkheid, dan wordt ook JavaScript en andere dynamische inhoud meegenomen. Hoe je dat doet, zie je hieronder:

Configuration > Spider

Configuration > Spider > Rendering

Als je dit gecrawld hebt, kan je zien welke bronnen geblokkeerd zijn, de gerenderde pagina bekijken en ruwe en gerenderde HTML vergelijken. Meer hierover lees je hier op de site van ScreamingFrog.

Veelvoorkomende fouten

Kan de zoekbot de JavaScript niet (goed) crawlen? Dan is het zaak om het probleem hiervan te achterhalen. Veel voorkomende fouten en/of problemen die voorkomen zijn:

1. URL’s zijn niet indexeerbaar

Als AJAX en JavaScript worden gebruikt, wordt er vaak aan de URL een hash (#) wordt toegevoegd, gevolgd door de te laden content. Dat gebeurt pas na het laden van de pagina. Zoals we weten wordt deze JavaScript in je browser uitgevoerd. Daardoor wordt het deel achter de hash niet naar de server gestuurd.

Zoekmachines kunnen de informatie achter de hash daarom niet zien en dus ook niet indexeren.

Een antwoord hierop is de JavaScript functie window.history.pushState (), ookwel PushState (). Hiermee kan het pad van de URL worden veranderd. Belangrijk om in acht te blijven nemen is dat pagina’s nog altijd een unieke, duidelijke URL nodig hebben wil de pagina geïndexeerd kunnen worden.

2. Opmaak van de pagina

Normen die gelden voor HTML pagina’s, zijn nog altijd ook van toepassing op JavaScript gegenereerde content. Het gebruik van titels, meta beschrijvingen, alt attributen en schone URL’s mag niet genegeerd worden. Vaak schiet dit bij het gebruik van JavaScript er nog eens bij in wat voor problemen kan zorgen.

3. Houd rekening met meerdere versies

Dankzij het gebruik van JavaScript kunnen er zowel pre-DOM als post-DOM versies worden gemaakt (hoe ziet de pagina er voor en na het inladen van het Document Object Model uit).

Wanneer bijvoorbeeld de HTML bron onjuist gebruik maakt van canonicals maar de uiteindelijk genereerde pagina niet, levert dit problemen op.

4. Problemen met laadsnelheid

Wanneer browsers een HTML document laden en het DOM renderen, worden de meeste bronnen geladen wanneer ze in het HTML document verschijnen. Dit betekent dat wanneer grote bestanden bovenaan worden geplaatst, deze ook als eerste worden ingeladen.

Heb je grote JavaScript bestanden die het laden van de pagina beperken? Dan kan dit je site flink vertragen. Oplossingen hiervoor kunnen zijn het plaatsen van het JavaScript laag in de HTML of het asychroon inladen van het JavaScript.

5. Uitsluiten van JavaScript in robots.txt

Perongeluk of niet, JavaScript en CSS willen nog wel eens worden uitgesloten in het robots.txt bestand. Dit is uiteraard niet de bedoeling.

Tot slot

Websites worden steeds interactiever, fraaier, smoother. Dat gebeurt allemaal dankzij JavaScript. Bezoekers binnenhalen via de zoekmachine is echter ook heel belangrijk. Je gaat met zo’n mooie website niet veel gaat bereiken wanneer een zoekmachine de inhoud ervan niet kan lezen.

Zoekmachines kunnen dit steeds beter, maar het gaat niet altijd goed. Om erachter te komen wat wel en niet werkt zit er echter een ding op, en dat is testen.