Begrippenlijst · Broncode · SEO source-analyzer

Wat is broncode?

Broncode uitleg: live HTML source analyzer met 10 SEO-elementen-detector, syntax-highlighted code-viewer, validation per element en de SEO-impact.

Door Ralf van VeenUpdate: 19 april 2024Leestijd: 7 min

01 — analyzerBroncode — live SEO source-analyzer

De broncode (HTML source code) van een webpagina is de onderliggende tekst die de browser interpreteert om de pagina te tonen. Voor SEO is de broncode CRUCIAAL: Google's crawler leest deze code om je pagina te begrijpen + te indexeren. Bekijk je broncode via Ctrl+U (Windows) of Cmd+Option+U (Mac) in elke browser. Hieronder analyseren we 3 voorbeelden: optimale SEO-broncode, problematische broncode + minimale broncode. Voor breder context op technische SEO zie SEO-technieken.

Live · 3 broncode voorbeelden + analyseSEO-elementen

view-source:ralfvanveen.com

✓ Optimaal

⚠ Problematisch

○ Minimaal

SEO Source-score

92/100

→ 10 SEO-elementen check

Belangrijke nuance: moderne JavaScript-frameworks (React/Vue/Next) renderen vaak content via JS in plaats van direct in HTML-broncode. Google CAN JS-rendering, maar het is SLOWER + duurder voor crawl-budget. Server-side rendering (SSR) of static-generation (SSG) bouwt SEO-elementen direct in broncode = optimaal voor SEO.

02 — bp5 best-practices voor broncode-SEO

5 best-practices · technical SEOtactisch

Title + meta-description in <head>

Cruciaal: deze elementen verschijnen DIRECT in Google's SERP. Title max 60 chars, meta-description 150-160 chars. Unieke per pagina.

Eén <h1> per pagina, semantische hiërarchie

H1 = main topic, H2-H6 sub-secties. Google gebruikt heading-hiërarchie om content-structure te begrijpen. Géén styling-misbruik (H1 niet voor decoratie).

Alt-attributes op alle <img>-tags

Beschrijven beelden voor blind/visually impaired users + Google. Lege alt='' alleen voor decoratie. Vermijd "image of..." prefixes.

Schema markup (JSON-LD) voor rich results

Embed structured data in <script type="application/ld+json">. Verhoogt kans op rich snippets, FAQs, product-info, reviews in SERP.

Open Graph + Twitter Card-tags

og:title, og:description, og:image voor social-shares. Twitter cards voor Twitter/X. Cruciaal voor social CTR + brand-consistency.

03 — faqVeelgestelde vragen

FAQ · 3 vragenklik om te openen

Hoe bekijk ik de broncode van een website?›

5 methoden. (1) Browser shortcut: Ctrl+U (Windows/Linux) of Cmd+Option+U (Mac). Werkt in Chrome, Firefox, Safari, Edge. Opent nieuwe tab met view-source: prefix. (2) Rechter-muisklik → "Pagina bron weergeven" / "View Page Source". (3) DevTools (F12) → Elements-tab. Toont DOM (na JS-rendering), niet raw-source. Verschil belangrijk voor SEO-debugging. (4) curl-command line: curl https://example.com toont raw HTTP-response zonder JS-uitvoering. Identiek aan wat Google's crawler ziet. (5) Online tools: viewsource.net, urlmeter.com. Handig voor analyse zonder browser. Voor breder context zie SEO-technieken.

Verschil tussen broncode en DOM?›

Belangrijke distinctie. Vijf nuances. (1) Broncode = RAW HTML zoals server stuurt. Voor JS-uitvoering. Vast + statisch. (2) DOM (Document Object Model) = HTML NA JS-rendering. Dynamisch, kan veranderen. Inclusief alle JS-toegevoegde elementen. (3) Voor SEO is broncode primair: Google's crawler ZIET initial HTML + render in tweede pass. SSR/SSG = broncode bevat al alles. (4) JS-frameworks (React/Vue) render in DOM: broncode is vaak een lege <div id="root">. Inhoud komt via JS. Google CAN dit, maar slow. (5) View source = broncode, DevTools = DOM. Check beide bij SEO-debugging. Verschillen kunnen oorzaak zijn van indexing-problemen. Voor breder context zie SEO-technieken.

Tools om broncode op SEO te checken?›

Meerdere opties. Vijf tools. (1) Screaming Frog SEO Spider (gratis tot 500 URLs): industry-standard. Crawlt site + analyseert title/meta/h-tags/schema voor elke pagina. (2) Search Console URL Inspection: Google's eigen tool. Toont exact wat Google ziet bij crawl + rendering. Free + accurate. (3) DeepCrawl, Botify (enterprise): commerciële alternatieven. Diepere analytics, integration met overige SEO-data. (4) Sitebulb: visueel-georiënteerde Screaming Frog-alternative. Beter voor non-technical users. (5) Browser-extensions: SEO Meta in 1 Click (Chrome), MozBar. Quick-check op single pages. Voor breder context zie gratis SEO tools.

Technical SEO + broncode-audit?

Volledig technical SEO-traject: complete crawl via Screaming Frog, broncode-analyse per pagina-template, schema-markup-implementation, render-issues-detection, plus monthly rapportage op technical health-score.

Plan een gesprek met Ralf →

Wat is broncode?

01 — analyzerBroncode — live SEO source-analyzer

02 — bp5 best-practices voor broncode-SEO

03 — faqVeelgestelde vragen

Technical SEO + broncode-audit?

30 minuten, eerlijk advies, geen verkoopverhaal.