Alejandro Rioja.
Scripts

Snelgids: Hoe Toegang te Krijgen tot de Broncode van een Website

Alejandro Rioja
Alejandro Rioja
8 min lezen
TL;DR

Open de ruwe HTML van een pagina met Ctrl/Cmd+U of het view-source: voorvoegsel in je adresbalk. Gebruik DevTools (F12) voor live inspectie van gerenderde DOM, CSS en netwerkaanvragen. Vijf dingen om te controleren voor SEO: title-tags, meta descriptions, H1-koppen, afbeelding alt-attributen en analytics-trackingsnippets.

Gratis nieuwsbrief

Elke woensdag. 28.400+ operators. Geen opvulling.

Inhoudsopgave

Bijgewerkt mei 2026.

TL;DR: Open de ruwe HTML van een pagina met Ctrl/Cmd+U of het view-source: voorvoegsel in je adresbalk. Gebruik DevTools (F12) voor live inspectie van gerenderde DOM, CSS en netwerkaanvragen. Vijf dingen om te controleren voor SEO: title-tags, meta descriptions, H1-koppen, afbeelding alt-attributen en analytics-trackingsnippets.

Conclusie

De broncode van je website bevindt zich onder elke afbeelding, kop en call to action. Zoekmachines lezen die code om te bepalen waar jouw pagina rankt voor een bepaalde zoekopdracht. In staat zijn om die code zelf te lezen — zelfs als niet-ontwikkelaar — is een van de snelste manieren om SEO-fouten op te sporen voordat ze je verkeer kosten.

Deze gids laat zien hoe je broncode bekijkt in alle grote browsers en besturingssystemen in 2026, waarvoor de twee hoofdmethoden (Broncode bekijken vs. DevTools) geschikt zijn, en de vijf SEO-elementen die het auditen waard zijn zodra je erin zit.

Hoe Broncode te Bekijken

Er zijn twee afzonderlijke tools. Weet welke je moet gebruiken:

De meeste moderne sites zijn gedeeltelijk of volledig JavaScript-gerenderd, dus DevTools is waar ik de meeste tijd doorbring.

De view-source: snelkoppeling (alle browsers)

Typ view-source: direct voor een URL in de adresbalk — bijv. view-source:https://example.com — en druk op Enter. Dit werkt in Chrome, Firefox, Edge en Opera. Safari vereist eerst het inschakelen van het Ontwikkelmenu (zie hieronder).

PC-sneltoetsen

Chrome (Windows / Linux)

Firefox (Windows / Linux)

Microsoft Edge (Windows)

Opera (Windows / Linux)

Mac-sneltoetsen

Chrome (macOS)

Firefox (macOS)

Safari (macOS)

Safari verbergt ontwikkelaarstools standaard. Schakel ze eenmalig in:

  1. Open Safari → Instellingen (of Voorkeuren op oudere macOS) → tabblad Geavanceerd.
  2. Vink „Functies voor webontwikkelaars tonen” aan (vervangt het oude selectievakje „Ontwikkelmenu tonen” vanaf Safari 17).
  3. Nu zijn Ontwikkel → Paginabron tonen (Cmd+Option+U) en Ontwikkel → Web Inspector tonen (Cmd+Option+I) beschikbaar. Rechtermuisknop → Element inspecteren werkt ook.

Microsoft Edge (macOS)

Mobiel

Belangrijke SEO-elementen om te Controleren

Zodra je broncode kunt bekijken, gebruik je Ctrl+F / Cmd+F om in de ruwe HTML naar de onderstaande snippets te zoeken.

1. Title-tags

Zoek naar <title. Elke pagina zou er precies één moeten hebben, en de tekst erin moet uniek zijn op je hele site. Title-tags zijn het belangrijkste on-page signaal voor het vertellen aan zowel gebruikers als zoekmachines waar een pagina over gaat. Dubbele of ontbrekende title-tags behoren tot de meest voorkomende SEO-fouten die ik vind tijdens audits.

2. Meta Descriptions

Zoek naar <meta name="description". Het content-attribuut is het fragment dat Google vaak laat zien in zoekresultaten — houd het onder ongeveer 160 tekens. Het is geen directe rankingfactor, maar het bepaalt de doorklikratio, wat belangrijk is. Controleer of geen twee pagina’s dezelfde beschrijving delen.

3. H1-koppen

Zoek naar <h1. De beste praktijk is één H1 per pagina. Die moet het hoofdonderwerp duidelijk beschrijven en je primaire zoekwoord op natuurlijke wijze bevatten. Het volstoppen van meerdere zoekwoorden in de H1 wordt gezien als spam door zowel gebruikers als algoritmen.

4. Afbeelding Alt-tags

Zoek naar <img. Elke afbeelding zou een alt-attribuut moeten hebben dat de inhoud ervan beschrijft. Alt-tekst is wat schermlezers aankondigen aan visueel beperkte gebruikers, en het is het enige signaal dat zoekmachines hebben voor het begrijpen van afbeeldingsinhoud. Ontbrekende alt-tags zijn eenvoudige winsten — markeer ze en vul ze in.

5. Analytics-trackingcode

Zoek naar je GA4-metings-ID (formaat: G-XXXXXXXXXX) of Google Tag Manager container-ID (GTM-XXXXXXX). Als je het oudere Universal Analytics UA--formaat gebruikt, merk op dat Google standaard UA-eigenschappen heeft afgesloten in juli 2023 — die ID’s verzamelen geen gegevens meer. Controleer of je bent gemigreerd naar GA4 of een alternatief (Plausible, Fathom, PostHog, enz.).

Redenen om de Broncode van een Website te Lezen

Je hoeft geen ontwikkelaar te zijn om waarde te halen uit deze vaardigheid. Dit zijn de belangrijkste redenen waarom ik er steeds op terugkom:

1. Verifieer Meta Robots-tags

Eén verkeerd geplaatste <meta name="robots" content="noindex"> zal een pagina stil de-indexeren. Zoek in de broncode naar robots om te bevestigen dat je niet per ongeluk pagina’s blokkeert voor crawlen.

2. Controleer de Koppenstructuur

Een goede koppiehiërarchie (H1 → H2 → H3) helpt zowel toegankelijkheid als SEO. Een snelle view-source-scan laat zien of koppen logisch zijn genest of dat iemand H-tags puur voor opmaak heeft gebruikt.

3. Controleer Afbeeldingsoptimalisatie

Naast alt-tags, kijk naar het src-attribuut. Worden afbeeldingen geserveerd via een CDN? Zijn het moderne formaten (WebP, AVIF)? Zijn width- en height-attributen ingesteld (voorkomt lay-outverschuiving)? Deze details zijn duidelijk zichtbaar in de broncode.

4. Ontdek Verborgen of Geïnjecteerde Inhoud

Soms injecteert een plugin, een script van derden of een kwaadwillende partij inhoud in een pagina die onzichtbaar is in de gerenderde weergave maar zichtbaar voor zoekmachines. Veelvoorkomende patronen: display:none-divs gevuld met zoekwoordspam, links buiten het scherm verborgen, of tekst die overeenkomt met de achtergrondkleur. Een ruwe broncodecan zal deze aan het licht brengen.

5. Valideer de Interne Linkstructuur

Zoek naar <a href= en scan de linktargets. Gebroken relatieve paden, per ongeluk nofollow gegeven interne links, of omleidingsketens binnen de sitehiërarchie kunnen stilletjes PageRank wegdraineren. View Source is sneller dan wachten op een volledige Screaming Frog-crawl wanneer je alleen een snelle check nodig hebt.

Conclusie

Broncode bekijken is een gewoonte van dertig seconden die dure SEO-problemen opspoort voordat ze verergeren. Of je Ctrl+U gebruikt voor de ruwe HTML of DevTools voor de live DOM hangt ervan af of de pagina server-side of JavaScript-gerenderd is — voor de meeste sites van 2026 heb je beide nodig.

Bekijk deze artikelen die je nuttig kunt vinden voor SEO:

Veelgestelde vragen — Websitebroncode bekijken in 2026

Werkt view-source nog steeds op JavaScript-gerenderde sites?

Gedeeltelijk. view-source: toont de HTML die de server heeft verzonden — wat voor React, Next.js, Astro (alleen client) of vergelijkbare frameworks vaak een bijna leeg skelet is met script-tags. De gerenderde inhoud bevindt zich in de live DOM, die je kunt openen via DevTools → Elementen-paneel. Voor server-side gerenderde (SSR) of statisch gegenereerde sites toont view-source: de volledige pagina-inhoud omdat de HTML compleet is voordat deze de browser bereikt.

Kan ik broncode bekijken van een pagina waarvoor inloggen vereist is?

Ja, zolang je browsersessie is geverifieerd. view-source: en DevTools werken allebei op wat de browser al heeft geladen. Als je de pagina kunt zien, kun je de broncode inspecteren. Je kunt geen broncode bekijken van een pagina die je niet hebt geladen.

Is het legaal om de broncode van iemand anders te bekijken?

In vrijwel elk rechtsgebied is het lezen van HTML die een webserver vrijwillig naar je browser stuurt legaal — de server koos ervoor die te verzenden. Geautomatiseerd scrapen op schaal, het omzeilen van toegangscontroles (bijv. een paywall omzeilen), of het commercieel gebruiken van de broncode zonder licentie zijn afzonderlijke vragen met verschillende juridische antwoorden. Voor routinematige SEO-audits en concurrentieonderzoek is het lezen van publiek bediende broncode standaard en onbetwist.

Wat is de snelste manier om te controleren of een site een specifieke technologie gebruikt in 2026?

Drie opties: (1) controleer de broncode op veelzeggende strings (bijv. __NEXT_DATA__ voor Next.js, astro-island voor Astro, wp-content voor WordPress); (2) installeer de Wappalyzer-browserextensie, die frameworks, CDN’s, analysetools en vanaf 2025 sommige AI-stackcomponenten (LangChain, LlamaIndex) identificeert; (3) voer de URL in op BuiltWith voor een gedetailleerd technologiestackrapport.

Gerelateerde lectuur:

Deze gids maakt deel uit van alejandrorioja.com — geschreven door Alejandro Rioja, die nu AI-agentsystemen bouwt voor oprichters. Inclusief de agent die deze site actueel houdt. Hoe het werkt →

Bijgewerkt voor mei 2026

Een paar 2026-updates op het specifieke advies in dit bericht:

Lees verder

Ontvang het AI-playbook in je inbox

Elke woensdag. 28.400+ operators. Geen opvulling.

⌕
↵ ↵ alle resultaten bekijken esc esc om te sluiten