JavaScript: alles wat je wilt (en moet) weten

Home » Blog » Geen categorie » JavaScript: alles wat je wilt (en moet) weten

Grote kans dat je weleens van JavaScript hebt gehoord. Maar het echt fijne ervan af weten, doet lang niet iedereen. Want wat kun je er nu exact mee? En wat doet een zoekmachine eigenlijk met JavaScript? Vanwege de toenemende populariteit ervan is het voor iedereen die er in welke mate dan ook mee werkt van groot belang te begrijpen hoe JavaScript in elkaar steekt. En dus nemen we je mee op reis langs het hoe, wat en waarom van JavaScript.

Wat is JavaScript?

JavaScript is een scripttaal waarmee het mogelijk is om webpagina’s interactief te maken. Een stukje JavaScript bestaat uit een aantal opdrachten die de browser uitvoert. Dit gebeurt wanneer er een HTML-pagina wordt ingeladen. JavaScript kan worden opgenomen als HTML door middel van <script> tags. Daarnaast kan er worden verwezen naar een extern JavaScript.

Behalve JavaScript zijn er andere zogeheten scripting languages. Het grote voordeel aan JavaScript is echter dat het in alle browsers wordt ondersteund. Naast het interactief maken van webpagina’s wordt JavaScript gebruikt om webapplicaties te ontwikkelen.

Goed, het is dus een scripttaal. Veelal verward met een programmeertaal. Het verschil zit hem in het feit dat een scripttaal een programma ofwel engine nodig heeft om te kunnen functioneren. Bij een programmeertaal is dit niet het geval. 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.

html-css-js

Bron

Geschiedenis van JavaScript

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. De geschiedenis gaat terug naar 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 is ontstaan als antwoord op Java, ontwikkeld door Sun Microsystems. Met JavaScript diende er een taal te worden ontwikkeld die dezelfde – of zelfs betere – mogelijkheden kon bieden als Java, uitvoerbaar door de browser zelf.  Deze twee talen dienen overigens niet met elkaar verward te worden. Java is namelijk een typische programmeertaal, terwijl we net hebben geleerd dat JavaScript een scripttaal is.

De naam JavaScript is overigens niet direct tot stand gekomen. Zo heette de scripttaal eerst Mocha, om vervolgens omgedoopt te worden naar Livescript. De uiteindelijke samenwerking tussen Netscape en Sun Microsystems heeft uiteindelijk voor de naam JavaScript gezorgd.

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.

JavaScript frameworks

Hoewel JavaScript aanvankelijk samen met jQuery werd gebruikt, spelen tegenwoordig andere frameworks een steeds grotere rol. Een JavaScript framework zorgt ervoor dat een applicatie sneller en goedkoper ontwikkeld kan worden. Dit komt door de verschillende functionaliteiten die het afhandelen van codeertaken vergemakkelijkt op een vertrouwde en consequente manier.

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. Dankzij SPA’s worden HTML pagina’s in zijn geheel ingeladen wanneer deze door de browser bij de server wordt opgevraagd. Echter vinden bepaalde interacties pas plaats wanneer de gebruiker hierom vraagt. Denk hierbij aan het klikken op een link of het toepassen van een filter. Deze interacties vinden plaats met de server via AJAX oproepen. AJAX staat voor Asynchronous JavaScript And XML en is een techniek waarbij er gebruik wordt gemaakt van het XMLHttpRequest-object om te communiceren met servers. Hiervoor kan informatie zowel worden verzonden als ontvangen in verschillende formaten, onder andere JSON. JSON staat voor JavaScript Object Notation en is een standaard waarmee informatie gestructureerd uitgewisseld kan worden.

single-page-application-cycle

Visuele weergave van het gebruik van Single Page Applications. De server retourneert de complete HTML pagina. Vervolgens wordt er middels AJAX oproepen JSON uitgewisseld, wat ervoor zorgt dat de pagina niet opnieuw ingeladen hoeft te worden wanneer er sprake is van een interactie.

Dit in tegenstelling tot het inladen van een reguliere pagina waarbij er geen gebruik wordt gemaakt van SPA’s. Deze situatie is hieronder weergegeven:

inladen-traditionele-webpagina

Wanneer er geen gebruik wordt gemaakt van SPA’s, dient de pagina opnieuw te worden opgevraagd bij de server met als gevolg dat de pagina opnieuw wordt ingeladen. 

JavaScript en SEO

Maar, er kleven ook nadelen aan het gebruik van SPA’s. Hiermee wordt vooral gedoeld op het gebruik van JavaScript in verhouding tot SEO. Want wanneer de activiteiten op de achtergrond worden verborgen voor de gebruikers, zul je je moeten afvragen of crawlers dit wel kunnen zien. In vele gevallen zal dit antwoord nee zijn. Wanneer een pagina niet gecrawld wordt en niet wordt opgenomen in de index, zal je ook niet vertoond worden in de zoekresultaten. In het slechtste geval kan het zelfs tot cloaking leiden, een black hat SEO techniek waarbij onderscheid wordt gemaakt tussen het tonen van informatie aan website gebruikers en de crawler van een zoekmachine.

Nu zul je dan ook denken; allemaal leuk en aardig dat JavaScript, maar hoe kan JavaScript dan wel worden toegepast op een website? Geconcludeerd kan in ieder geval worden dat JavaScript en zoekmachines een heuse haat-liefdesverhouding met elkaar hebben. Want werd 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 kan worden. Een belangrijke technische wijziging die zich heeft voorgedaan als je kijkt naar veranderingen binnen technische SEO. Dat het nu wel gecrawld kan worden, wilt niet zeggen dat dit ook daadwerkelijk gebeurt. Als je kijkt naar JavaScript en SEO ligt de grootste uitdaging dan ook in het enerzijds zo interactief mogelijk maken van je website voor de eindgebruiker en de negatieve gevolgen van JavaScript anderzijds op het gebied van SEO hierin zoveel mogelijk te beperken.

Hoe werkt JavaScript?

Om erachter te komen of JavaScript door de zoekmachine wordt geïndexeerd, is het goed om stil te staan bij de verschillende stappen die worden doorlopen zodra er een pagina wordt opgevraagd die afhankelijk is van JavaScript gegenereerde inhoud:

  1. Aanvragen pagina
    De pagina bestaande uit HTML en alle overige componenten wordt door de browser bij de server opgevraagd.
  1. DOM
    De browser start met het renderen van de DOM. DOM staat voor Document Object Model en is eenvoudig gezegd de gestructureerde, georganiseerde versie van de webpagina’s code bestaande uit alle aanvullende bronnen zoals afbeeldingen, CSS en JavaScript.
  1. 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.
  1. JavaScript
    Vervolgens is het tijd voor het uitvoeren van JavaScript. Dit kan zijn het toevoegen, verwijderen of wijzigen van de inhoud van de HTML bron.
  2. Load Event
    Load event wordt afgevuurd. Dit betekent dat alle bronnen zijn ingeladen en de pagina ‘af’ is.
  3. Post-Load Events en User Events
    Zoals de naam al doet vermoeden kan de pagina continue worden aangepast door middel van content of interacties zoals bijvoorbeeld onClick (een click event waarbij iemand op een button klikt). Dit zijn veranderingen die plaats vinden nadat de pagina in zijn geheel is geladen.

Zelf testen of je JavaScript SEO vriendelijk is

Nu kan het zijn dat gedurende dit proces er ergens iets mis gaat waardoor JavaScript niet goed door de crawler wordt gezien en/of geïndexeerd. Het zelf testen of een zoekmachine jouw website met JavaScript kan crawlen en indexeren, kan op verschillende manieren.

  • Google Search Console

Binnen Google Search Console bestaat de optie ‘Fetchen als Google’. Deze mogelijkheid geeft na het opgeven van een URL de grafische representatie van hoe een bezoeker de pagina ziet en wat Googlebot daadwerkelijk ziet. Zit hier een verschil in, 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 kan zitten.

google-search-console

Voorbeeld van Google Search Console waarin wordt getoond hoe Googlebot en hoe een bezoeker de pagina ziet

  • Screaming Frog

Met de tool Screaming Frog kunnen verdere inzichten wel worden verkregen wat betreft het eventuele crawl probleem. Je hebt hiervoor de keuze om alleen statische HTML te crawlen, AJAX of de volledige webpagina. Kies je de laatste mogelijkheid wordt ook JavaScript en andere dynamische inhoud meegenomen.

screaming-frog-javascript

Configuration > Spider 

screaming-frog-javascript1

Configuration > Spider > Rendering

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

Wanneer er gebruik wordt van technieken als AJAX en JavaScript komt het veelal voor dat er aan de URL een hash (#) wordt toegevoegd, gevolgd door de te laden content. Echter wordt het deel achter de hash niet naar de server gestuurd, dit gebeurt pas na het laden van de pagina door de interactie van de gebruiker wanneer het door bijvoorbeeld AJAX wordt opgehaald. Zoekmachines kunnen de informatie achter de hash echter 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.

  1. 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 mogen niet genegeerd worden. Vaak schiet dit bij het gebruik van JavaScript er nog eens bij in wat voor problemen kan zorgen.

  1. Houd rekening met meerdere versies

Dankzij het gebruik van JavaScript kunnen er zowel per-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. 

  1. 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, kan dit problemen opleveren. Oplossingen hiervoor kunnen zijn het plaatsen van het JavaScript binnen de HTML of het asychroon inladen van het JavaScript.

  1. 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

Het interactief maken van webpagina’s middels JavaScript gebeurt in steeds grotere mate. Hoewel dit op het eerste oog kan leiden tot superieure geweldig uitziende websites, dient niet te worden vergeten dat je met zo’n mooie website niet veel gaat bereiken wanneer een zoekmachine de inhoud ervan niet kan lezen. Een onbegonnen zaak is dit echter niet; zoekmachines kunnen dit steeds beter, mits JavaScript op de juiste manier wordt toegepast. Om erachter te komen wat wel en niet werkt zit er echter een ding op, en dat is testen.

Relevante diensten

Meer lezen over dit onderwerp? Bekijk onze relevante diensten.

Reageren