⏱️ Leestijd: ca. 3 min.

Meta-data, SEO-basis & Favicon-koppeling

Wanneer je een webpagina opbouwt, gaat de meeste aandacht vaak naar het <body> element. Dat is immers de plek waar alle zichtbare inhoud—zoals teksten, afbeeldingen, video's en knoppen—op het scherm verschijnt. Maar achter de schermen gebeurt er minstens evenveel belangrijks in de <head> van je HTML-document.

In de <head> plaatsen we meta-data: informatie over de webpagina die niet direct op de pagina zelf getoond wordt, maar onmisbaar is voor browsers, mobiele schermen en zoekmachines zoals Google.

In deze les leer je hoe je de pagina schaalbaar maakt voor mobiele schermen met de viewport, hoe je de SEO-basis legt met een slimme paginabeschrijving, en hoe je jouw website herkenbaar maakt in browser-tabbladen met een favicon.

1. Wat is Meta-data?

Het woord meta betekent letterlijk 'over'. Meta-data is dus data over data. In HTML gebruiken we hiervoor het <meta> element.

Het <meta> element is een lege tag (void element), wat betekent dat het geen sluitingstag heeft. Je geeft de informatie mee via attributen zoals name, content of charset.

<!-- Bepaalt de karakterset (zorgt dat leestekens zoals ë, é en c juist getoond worden) -->
<meta charset="UTF-8">

Meta-tags hebben drie belangrijke taken:

  1. Instructies geven aan de browser (bijvoorbeeld over de schermgrootte of tekenset).
  2. Informatie geven aan zoekmachines (voor indexering en zoekresultaten).
  3. Informatie geven aan social media (wanneer je linkjes deelt op WhatsApp of Instagram).

2. Mobiele schermen aansturen: De viewport meta-tag

In de beginjaren van het mobiele internet probeerden smartphones grote desktopwebsites te tonen door de hele pagina "uit te zoomen". Het resultaat was een piepkleine pagina waarin je continu moest inzoomen en horizontaal scrollen om tekst te kunnen lezen.

Om de browser te vertellen dat een website ontworpen is om zich aan te passen aan het scherm van de gebruiker (Responsive Web Design), is de viewport meta-tag verplicht op elke moderne website.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Wat betekenen deze instellingen?

Zonder viewport tag: Als je deze tag vergeet, negeert de smartphone al je responsive CSS-regels (zoals media queries) en toont hij de pagina als een piepkleine desktopversie. Plaats deze tag dus standaard in ELK HTML-bestand!

3. SEO-basis: De description meta-tag

Als grafisch vormgever of developer wil je natuurlijk dat jouw website goed gevonden wordt in Google. Het optimaliseren van een website voor zoekmachines noemen we SEO (Search Engine Optimization).

Wanneer je zoekt in Google, zie je voor elk zoekresultaat een zogenaamde zoek-snippet:

Studio Grafix - Grafisch Design & Webdesign Brugge     <-- TITLE
[https://www.studiografix.be](https://www.studiografix.be)                            <-- URL
Wij zijn een creatieve studio gespecialiseerd in       <-- META DESCRIPTION
merkidentiteit, drukwerk en moderne websites.

De opbouw van een zoek-snippet in HTML:

De titel en de korte beschrijving die Google toont, haalt de zoekmachine rechtstreeks uit de <head> van jouw HTML-code!

<!-- De titel in het blauw bovenin de zoekresultaten -->
<title>Studio Grafix - Grafisch Design & Webdesign Brugge</title>

<!-- De grijze beschrijving onder de titel -->
<meta name="description" content="Wij zijn een creatieve studio gespecialiseerd in merkidentiteit, drukwerk en moderne websites. Bekijk ons portfolio!">

Vuistregels voor een sterke meta description:

4. Een Favicon koppeling (<link rel="icon">)

Een favicon (kort voor favorites icon) is het kleine logo of icoontje dat verschijnt:

Als grafisch ontwerper is de favicon een belangrijk onderdeel van de visuele merkidentiteit!

Hoe koppel je een favicon in HTML?

Voor het koppelen van een favicon gebruiken we niet de <meta> tag, maar het <link> element.

<!-- Standaard icoon (PNG of ICO-formaat) -->
<link rel="link" rel="icon" type="image/png" href="images/favicon.png">

<!-- Met een modern schaalbaar vectorbestand (SVG) -->
<link rel="icon" type="image/svg+xml" href="images/favicon.svg">

De attributen uitgelegd:

Ontwerptips voor favicons:

  1. Eenvoud is troef: Een favicon wordt piepklein getoond (meestal $16 \times 16$ of $32 \times 32$ pixels). Vermijd lappen tekst of ingewikkelde details; kies voor een herkenbaar beeldmerk, een monogram of één krachtige initiaal.
  2. Formaten: Een strakke PNG van $32 \times 32$ pixels of een schaalbaar SVG-bestand werkt vandaag de dag op vrijwel alle moderne schermen en retinadisplays perfect.

5. De complete, professionele <head> structuur

Laten we alle onderdelen die we hebben besproken samenbrengen. Dit is het universele "blueprint" dat je kunt gebruiken als opstart voor al je HTML5-projecten:

<!DOCTYPE html>
<html lang="nl">
<head>
    <!-- 1. Karakterset (Verplicht) -->
    <meta charset="UTF-8">

    <!-- 2. Responsive Viewport (Verplicht voor mobiel) -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 3. Paginatitel (Zichtbaar in tabblad en Google) -->
    <title>Studio Grafix | Portfolio van Thomas</title>

    <!-- 4. SEO Meta Description (Zoekresultaat beschrijving) -->
    <meta name="description" content="Ontdek het grafische portfolio van Thomas. Gespecialiseerd in typografie, meridentiteit en responsive webdesign.">

    <!-- 5. Favicon-koppeling (Icoontje in het tabblad) -->
    <link rel="icon" type="image/svg+xml" href="images/favicon.svg">

    <!-- 6. Koppeling met extern CSS-bestand -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <main>
        <h1>Welkom op mijn portfolio</h1>
        <p>Inhoud van de pagina komt hier...</p>
    </main>

</body>
</html>

Samenvatting