WPLounge
JavaScript
Home » WordPress Algemeen » JavaScript Rendering voor Dummies

JavaScript Rendering voor Dummies

Als je in de digitale (marketing)wereld werkt – als ontwikkelaar, SEO specialist of in marketing in het algemeen – kom je op een gegeven moment JavaScript tegen. Hoewel je het misschien niet direct wilt leren, omdat het misschien ontmoedigend en overweldigend lijkt, zul je er op een gegeven moment wellicht niet omheen kunnen. En dat is waar deze tutorial voor is bedoeld.

Affiliate disclaimer:
In onze artikelen en op onze pagina's staan affiliate links. Wanneer je via één van deze links een aankoop doet, ontvangen wij een (meestal kleine) commissie van de verkoper. Wij geven altijd onze eerlijke mening over producten. Klik hier voor meer informatie.

We nemen je mee door de basisprincipes van JavaScript. We zullen in wat meer detail uitleggen wat JavaScript rendering is, hoe zoekmachines JavaScript weergeven en wat dit betekent voor je WordPress website.

Na het lezen van deze tutorial heb je hopelijk een beter begrip van de basisprincipes van JavaScript rendering. Klaar voor? Laten we beginnen.

TIP VAN WPLOUNGE
Divi theme & Divi Builder
Bij Elegant Themes ontvang je meer dan
85 premium WordPress themes (waaronder Divi!) voor maar 89 dollar!

Bekijk de themes »»
Lees meer over Divi.

Wat is JavaScript?

Laten we beginnen met te definiëren wat JavaScript eigenlijk is. JavaScript, of kortweg JS, is een programmeertaal die deel uitmaakt van de basis van het World Wide Web.

Het is een van de drie kerntechnologieën van het web, samen met Hypertext Markup Language (HTML) en Cascading Style Sheets (CSS). Elke technologie is verantwoordelijk voor een specifiek deel van de structuur van een webpagina:

  • HTML voegt structuur en organisatie toe aan een pagina door content te rangschikken in elementen zoals afzonderlijke alinea’s, koppen of lijsten;
  • CSS voegt presentatie en design toe, waardoor een pagina zijn specifieke stijl en uiterlijk krijgt;
  • JavaScript voegt beweging en interactiviteit toe aan de elementen van een webpagina, zoals diavoorstellingen of keuzemenu’s.

Met andere woorden, JavaScript is de technologie die een pagina “tot leven brengt”. Zonder JavaScript zouden pagina’s statisch zijn in plaats van interactief en geanimeerd.

JavaScript-taal heeft allerlei toepassingen op internet, van het maken van interactieve webpagina’s tot zoiets als het gebruik van een Google-search-API zoals SERPMaster voor scraping-doeleinden. JavaScript is een essentieel onderdeel van het WWW.

Indexeringsproblemen door veel JavaScript

Ondanks het grootschalige gebruik ervan, levert JavaScript toch enkele problemen op. Vooral zoekmachines zijn (nog) niet zo goed in het begrijpen – en dus indexeren – van pagina’s die veel JavaScript-elementen bevatten. En dat heeft te maken met het renderproces.

Wat is rendering?

Rendering in de context van web development is het proces van het ophalen van gegevens van een pagina en het verwerken van deze gegevens om de gewenste output/resultaat te produceren.

Het is hoe programmeertalen worden omgezet in een begrijpelijke, gestructureerde code die op zijn beurt wordt omgezet in de website die je voor je ziet wanneer je een webpagina opent. Dit weergaveproces is een essentiële stap in het correct weergeven van een webpagina aan de gebruiker. Zie deze stap als het interpreteren van de onbewerkte gegevens.

Nu kan eenvoudige HTML eenvoudig worden weergegeven (dat wil zeggen, geïnterpreteerd) door een browser of robot, omdat het alle inhoud op de pagina bevat. Wanneer de pagina JavaScript bevat, is het daarentegen iets gecompliceerder.

Dat komt omdat om de betekenis van JavaScript-code te begrijpen, de browser eerst het specifieke script moet uitvoeren waarnaar in de code wordt verwezen om de volledige inhoud op de pagina te onthullen.

Dit maakt het renderen van JavaScript moeilijker dan de interpretatie van HTML.

Hoe zoekmachines JavaScript verwerken/renderen?

Er doet zich een bijzonder probleem met JavaScript-rendering voor wanneer robots van zoekmachines (crawlers) een webpagina met JavaScript moeten weergeven.

Sommige zoekmachines zijn helemaal niet in staat om JavaScript weer te geven, terwijl andere (zelfs de industriegiganten Google en Bing) moeite hebben om dit te doen.

Dus als jouw website veel JavaScript-elementen heeft, bestaat de kans dat zoekmachines (beter gezegd, diens robots) niet kunnen begrijpen wat er op je pagina staat en ten onrechte denken dat er geen content is. Omdat de bot denkt dat er niets te zien is, zal hij je pagina niet in de index opnemen.

Met andere woorden, je wordt dan helemaal niet weergegeven in de zoekresultaten. Hoe geweldig jouw website er dankzij JavaScript uitziet, krijgt die dan ook geen (organische) bezoekers.

Waarom is JavaScript rendering zo moeilijk voor zoekmachines?

Laten we als voorbeeld eens naar Google kijken. De webcrawler van de zoekmachine, Googlebot, verwerkt JavaScript in drie fasen:

  1. Crawling
  2. Rendering
  3. Indexering

Googlebot crawlt eerst een webpagina door een verzoek naar de server te sturen, dat wordt beantwoord met een HTML-respons. Voordat Googlebot het HTML-respons (dat JavaScript bevat) volledig kan begrijpen, moet het deze weergeven (rendering). Eenmaal weergegeven, is het HTML-bestand klaar voor indexering in de zoekmachine.

Het indexeringsproces van Google werkt in twee golven: crawlen en indexeren, en renderen en indexeren.

Crawling en indexering zijn snelle processen die kunnen worden uitgevoerd, maar rendering vereist wat meer tijd en proceskracht. Dus als Googlebot een pagina crawlt en JavaScript vindt, komt de pagina in de rendering wachtrij, waar het blijft er voldoende bronnen beschikbaar zijn om de pagina weer te geven.

De niet-gerenderde gegevens zijn echter al toegevoegd aan de index tijdens de eerste indexeringsgolf. En zodra je webpagina vast komt te zitten tussen deze twee golven, wordt nieuwe content niet geïndexeerd door de zoekmachine.
Gelukkig zijn er manieren om uw pagina’s correct in te delen – óók met JavaScript – om ze verteerbaar voor Google te maken. Je vindt de nieuwste best-practices in Google Search Central. Zo lijden je SEO-prestaties niet onder je mooie website!

Nu gaan we wat dieper in op de JavaScript rendering materie, met name de meest voorkomende problemen en hoe deze te verhelpen zijn.

JavaScript-renderproblemen

JavaScript-renderproblemen kunnen het vermogen van zoekmachines om je site en te indexeren ernstig belemmeren. JavaScript voor Google werkt niet op dezelfde manier als HTML. Wanneer iets de uitvoering of rendering van de code verstoort, kan dit een storing veroorzaken in hoe de site zou moeten verschijnen en de content die aan gebruikers moet worden weergegeven. Het verstoort dus de indexering en de gebruikerservaring die je hebt neergezet.

De eerste stap bij het oplossen van renderproblemen is ze te identificeren. Je kunt bijvoorbeeld de Google Page Speed Insights tool gebruiken om te zien of Javascript-rendering een probleem is en hoeveel tijd kan worden bespaard als het wordt opgelost. Je zult dan begrijpen of je JavaScript voor Google fouten bevat die de posities in de SERP belemmeren.

Een voorbeeld van een uitdraai van Google Page Speed Insights, een gedeelte van het totale rapport.

Hoe JavaScript SEO-problemen op te sporen en te verhelpen?

Hier zijn de stappen die je kunt nemen om mogelijke problemen met JavaScript-SEO proactief te diagnosticeren:

  • Visualiseer de pagina met Search Console van Google. Dit helpt je om de pagina vanuit het perspectief van Google te bekijken;
  • Controleer handmatig in Google of alles juist wordt geïndexeerd;
  • Foutopsporing met behulp van de ingebouwde dev-tools van de Chrome browser. Vergelijk en contrasteer wat Google ‘ziet’ (broncode) met wat gebruikers zien (gerenderde code) en zorg ervoor dat ze in het algemeen overeenkomen.

Er zijn ook handige tools en plug-ins van derden die je kunt inzetten.

Soorten problemen binnen JavaScript

Als JavaScript nieuw voor je is, kom je doorgaans de twee meest voorkomende typen fouten tegen:

  • Syntax errors
    Syntaxisfouten (of syntax errors) zijn in feite spelfouten in de code. JavaScript is hoofdlettergevoelig. Dus een klein foutje in het hoofdlettergebruik kan ervoor zorgen dat de code niet wordt uitgevoerd.
  • Logic errors
    Logische fouten (logic errors) zijn moeilijker te herkennen dan syntaxisfouten. Kortom: logic errors zijn het spectrum wanneer het programma wordt uitgevoerd, maar het resultaat er anders uitziet dan je hebt bedoeld (of de developer).

Laten we verder gaan met enkele voorbeelden en tips over hoe je problemen met je JS code kunt oplossen, in dit geval m.b.t. de bovenstaande fouten.

Syntax error voorbeeld

Stel dat je een functie schrijft om een hoek van graden om te zetten in radialen. We hanteren een Engelstalige formule. De formule om graden om te rekenen naar radialen is:

Radians = Degrees * (Pi/180), waarbij Pi plusminus 3.1416 is

De functie wordt als volgt geschreven:

function degToRad(degrees) {
     return degree * (Math.PI / 180);
};

degToRad(50);

Laten we dat nu eens testen in de Google Chrome browser. Open een nieuw tabblad en druk op F12 (of Ctrl+Shift+I) om het infovenster te openen. Dit is wat je zou moeten zien:

De console tab van DevTools binnen Google Chrome.

Kopieer die functie hierboven en plak deze op de console om uit te voeren. En je zou je eerste syntax fout moeten zien:

Een syntax error.

Laten we eens kijken waarom de console zegt dat ‘graad’ (degree) niet is gedefinieerd. Hebbes! De naam van de parameter is ‘graden’ (degrees) en niet enkelvoud! Geen wonder dat het niet is gedefinieerd en ons een fout geeft. Laten we ‘graad’ veranderen in ‘graden’ en de functie zou moeten werken.

Een syntax error gefixt!

Typen syntax fouten

Er zijn veel diverse waarop de console kan impliceren je te maken hebt met een syntaxisfout. Hoewel je niet letterlijk te lezen krijgt: “Hé kijk! Je hebt iets verkeerd gespeld!” zul je wel de melding krijgen dat het gaat om een

  • ReferenceError;
  • TypeError;
  • of dat iets niet gedefinieerd of null is.

Meestal betekent dit dat het een syntax error is en dat je je code regel voor regel moet lezen om deze te vinden (of het laatste door een developer laat doen).

Conclusie: Syntaxisfouten worden over het algemeen vermeld als ReferenceError, TypeError of NullError. Als je deze errors tegenkomt, lees dan je code regel voor regel en fix het probleem. Nogmaals, voor de doorsnee WordPress-gebruiker is JavaScript een vrij complexe materie; vandaag dat het inschakelen van een specialist in veel gevallen raadzaam is.

Voorbeeld: Logic Error

Dus laten we voor dit voorbeeld zeggen dat je een functie wilt die een woord opneemt en bepaalt of het woord “appel” of niet is. Hier is hoe het eruit ziet (wij coderen hier wederom Engelstalig):

COPY
function appleOrNot(word){ 
        if(word="apple") { return true; }
        return false;
}

appleOrNot("orange");

In de inspectie tool van Google Chrome, onder het tabblad Console, zien we dan het volgende:

Ditmaal geen foutmeldingen maar er is iets merkwaardigs. Ons woord was “oranje”, dus de functie zou ‘false’ moeten retourneren en niet ‘true’. Hoe kan dat?

Dit is een klassiek voorbeeld van een logische fout, of in developers termen Logic Error. Er wordt geen fout in de console vermeld zoals een syntaxisfout, maar je ziet wel dat de functie niet goed is. Voor dit voorbeeld, als je de code correct bekijkt, zul je zien dat de “statement” if(word = “apple”) { return true; } altijd als “true” terug zal komen vanwege het enkele ‘=’-teken. Je moet in dit geval ‘==’ invoeren om te controleren op gelijkheid, dus corrigeer dat en de functie zou nu moeten werken:

We hebben een duik genomen in de JavaScript codeerwereld.

De functie doet het nu weer.

Verschillende Logic Errors

In tegenstelling tot de syntax errors, die duidelijk aangeven dat er een fout is, zijn logic errors onzichtbaar voor de console en dus kan het lijken alsof de code werkt. Maar als het niet uitkomt zoals je had verwacht, is het wel degelijk een logic error. Om deze reden kan het moeilijk zijn om een logic error te traceren. Neem de tijd en inspecteer de code regel voor regel op om te begrijpen hoe de code kan worden verwerkt en de logica ervan. Zodra je iets vreemds ziet in de logica van de code, heb je die fout mogelijk ontdekt.

Afsluitend

Ik hoop dat met deze blog enigszins inzicht hebt verkregen hoe je in je browser JavaScript codes kunt debuggen met behulp van het Inspector-venster, de twee meest voorkomende soorten fouten kent en een paar tips om ze te detecteren. Het oplossen van problemen kost tijd en ervaring om er echt goed in te worden. Wellicht een tak van sport die niet voor jou weggelegd is. Enige basiskennis kan echter voor marketeers en websitebeheerders wel praktisch zijn.

Reageer