Als je een pagina in je browser opent, zie je meteen teksten, afbeeldingen en knoppen. Maar achter de schermen gebeurt er nog veel meer! Het <head>-element van je HTML-document bevat namelijk cruciale informatie voor zoekmachines zoals Google, sociale media en webbrowsers.
Zonder een goed opgebouwde <head> is een website vrijwel onvindbaar op het internet. In deze les ontdek je wat er allemaal in de <head> hoort én wat de invloed hiervan is op SEO (Search Engine Optimization).
De <head> is het gedeelte van een HTML-document dat zich bevindt tussen de openingstag <html> en het <body>-element.
In plaats van een afbeelding zie je hieronder in de HTML-code hoe de basisstructuur van een document is opgebouwd. Merk het verschil op tussen de onzichtbare data in de <head> en de zichtbare inhoud in de <body>:
<!DOCTYPE html>
<html lang="nl">
<!-- 1. DE HEAD: Metadata (onzichtbaar voor de bezoeker, cruciaal voor browsers & zoekmachines) -->
<head>
<meta charset="UTF-8">
<title>Titel van de pagina (Zichtbaar in het tabblad)</title>
</head>
<!-- 2. DE BODY: Alles wat de bezoeker daadwerkelijk ziet op het scherm -->
<body>
<h1>Welkom op de website</h1>
<p>Deze tekst, alle afbeeldingen en knoppen zijn direct zichtbaar.</p>
</body>
</html>
Alles wat in het <head>-element staat is metadata (data over data). Dit is informatie over het document die niet rechtstreeks op het scherm getoond wordt, maar gelezen wordt door browsers en zoekmachines om jouw website correct te verwerken.
<head>Er zijn een aantal vaste elementen die in de <head> van élke professionele website horen te staan:
<meta charset="UTF-8">
Deze tag vertelt de browser welke tekencodering er gebruikt moet worden. Met UTF-8 zorg je ervoor dat speciale tekens zoals é, ë, ç en symbolen correct worden weergegeven op elk scherm. Plaats deze tag altijd helemaal bovenaan in de <head>.
(<title>)<title>Bakkerij Janssens | Ambachtelijk Brood in Gent</title>
De <title> is een van de belangrijkste tekst-elementen van je pagina.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Deze regel zorgt ervoor dat je website zich automatisch aanpast aan het schermformaat van smartphones en tablets. Omdat Google kijkt naar mobielvriendelijkheid bij het rangschikken van websites (mobile-first indexing), is deze tag cruciaal voor je SEO-score!
<meta name="description" content="Bestel het lekkerste verse brood en gebak online bij Bakkerij Janssens in Gent. Elke dag vers gebakken met passie.">
De description geeft een korte samenvatting van de pagina. Zoekmachines tonen deze beschrijving onder de titel in de zoekresultaten.
Tip: Zie de meta description als een mini-advertentie. Maak de lezer nieuwsgierig en gebruik een duidelijke call-to-action!
<head> voor SEO?SEO (Search Engine Optimization of zoekmachineoptimalisatie) draait om de vraag: hoe zorg je ervoor dat Google jouw pagina begrijpt en hoog inschaalt?
De <head> speelt hierin de hoofdrol om drie redenen:
<head> om de essentie van je pagina te begrijpen. Goede <title> en <meta> tags helpen zoekmachines bij het indelen van je pagina op de juiste zoekwoorden.viewport tag voorkom je dat mobiele bezoekers afhaken door een onleesbare, niet-geschaalde pagina.og:-tags hoe de voorbeeldkaart met foto en titel eruitziet.<!-- Open Graph tags voor weergave op Social Media -->
<meta property="og:title" content="Bakkerij Janssens | Vers Brood in Gent">
<meta property="og:description" content="Proef het verschil! Elke dag vers ambachtelijk brood.">
<meta property="og:image" content="images/social-preview.jpg">
Naast metadata gebruik je de <head> ook om externe bestanden aan je document te koppelen:
<!-- Koppeling naar het CSS-stylesheet voor de vormgeving -->
<link rel="stylesheet" href="css/style.css">
<!-- Favicon (het kleine icoontje op het browser-tabblad) -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Koppeling met Google Fonts -->
<link rel="preconnect" href="[https://fonts.googleapis.com](https://fonts.googleapis.com)">
<link href="[https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap](https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap)" rel="stylesheet">
<head>Hier is een compleet sjabloon dat je als basis kunt gebruiken voor al jouw webdesignprojecten:
<!DOCTYPE html>
<html lang="nl">
<head>
<!-- Basis instellingen -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO Essentials -->
<title>Mijn Portfolio | Grafisch Ontwerper & Front-end Developer</title>
<meta name="description" content="Bekijk het creatieve portfolio van [Jouw Naam]. Gespecialiseerd in webdesign, branding en strakke code.">
<meta name="robots" content="index, follow">
<!-- Social Media (Open Graph) -->
<meta property="og:title" content="Mijn Portfolio | Grafisch Ontwerper">
<meta property="og:description" content="Ontdek mijn nieuwste projecten en grafische uitwerkingen.">
<meta property="og:image" content="images/og-share-image.jpg">
<!-- Favicon & Stylesheets -->
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- De zichtbare inhoud van de pagina komt in de body -->
</body>
</html>
Onthoud: De bezoeker ziet de<head>niet rechtstreeks op het scherm, maar zonder een sterk ingerichte<head>is je website zo goed als onzichtbaar op het internet!