# SEO

Hoe zoekmachines je site vinden, lezen en tonen

Multimedia & Creatieve Technologie · 2.1 Web production · Les 2 · versie 1.0.0 · 2026-09-26

Tags: seo, html

Slides: <https://slides.mctantwerp.be/nl/web-production/02-seo>

Speaker notes: <https://slides.mctantwerp.be/nl/web-production/02-seo.notes.md>

<!-- slide 2 -->

## Agenda

1. Search engine optimization
2. Technical SEO
3. Off-page SEO
4. AI en GEO

<!-- slide 3 -->

## 1. Search engine optimization

<!-- slide 4 -->

**Wat betekent SEO voor jullie?**

<!-- slide 5 -->

**Hoe vinden bezoekers je website?**

<!-- slide 6 -->

**Welke bezoekers wil je op je website?**

<!-- slide 7 -->

### Niet enkel Google

- **± 90% Google**
- **Bing**
- **Yahoo**
- **DuckDuckGo**

Google heeft nog altijd het leeuwendeel van de markt. Maar ook ChatGPT, Perplexity en co. sturen intussen bezoekers door, en die halen hun info deels uit dezelfde zoekindexen.

<!-- slide 8 -->

## 2. Technical SEO

*Alles wat je op je eigen website doet*

<!-- slide 9 -->

### Crawlers en spiders

Een zoekmachine stuurt bots over het web. Die volgen links, lezen je pagina's en zetten ze in een index. Pas als een pagina in die index zit, kan ze in de zoekresultaten verschijnen.

- **Technical SEO**: Op je eigen website
- **Off-page SEO**: Op andere websites

<!-- slide 10 -->

### Technical SEO

- Laadtijd en mobile
- Correcte HTML tags
- Afbeeldingen
- URL-structuur
- Sitemap en robots.txt

<!-- slide 11 -->

### Title

- Elke pagina heeft een `<title>` in de `<head>`
- Uniek per pagina en meteen duidelijk waarover het gaat
- Google kort af op ongeveer 600px breed, dat komt neer op 50 à 60 tekens

```html
<html>
  <head>
    <title>
      Karel de Grote Hogeschool Antwerpen
    </title>
  </head>
</html>
```

![Zoekresultaat van KdG met title en description](https://slides.mctantwerp.be/decks/nl/web-production/02-seo/serp-kdg.jpg)

<!-- slide 12 -->

### Meta description

- Een `<meta>` tag in de `<head>`
- Geen rankingfactor, wel het tekstje dat mensen doet klikken
- Google herschrijft het vaak op basis van de zoekvraag
- Kort en concreet, ongeveer 150 à 160 tekens

![Zoekresultaat van KdG met title en description](https://slides.mctantwerp.be/decks/nl/web-production/02-seo/serp-kdg.jpg)

<!-- slide 13 -->

### Meta description

```html
<html>
  <head>
    <title>Karel de Grote Hogeschool Antwerpen</title>
    <meta
      name="description"
      content="Karel de Grote Hogeschool Antwerpen leidt je op tot
        enthousiaste professional die het verschil maakt.
        Hoe groot wil jij worden? Ontdek KdG."
    />
  </head>
</html>
```

<!-- slide 14 -->

### Snippet preview

<!-- slide 15 -->

### Wat doet een goede meta description?

- A. Je pagina hoger laten ranken
- B. Mensen doen klikken op je resultaat
- C. Crawlers sneller laten langskomen
- D. Keywords doorgeven aan Google

**Antwoord:** B. Mensen doen klikken op je resultaat

Google gebruikt de description niet om te ranken. Ze is je advertentietekst in de zoekresultaten, en Google herschrijft ze vaak als ze niet bij de zoekvraag past.

<!-- slide 16 -->

### Open Graph

*Extra meta tags voor social media en chat apps*

- `og:title`: de titel, mag dezelfde zijn als je `<title>`
- `og:type`: website, article, video
- `og:url`: de vaste url van de pagina
- `og:image`: altijd een absolute url, dus https://kdg.be/social.jpg en niet /social.jpg

![Link preview van kdg.be met afbeelding, titel en beschrijving](https://slides.mctantwerp.be/decks/nl/web-production/02-seo/og-preview.jpg)

<!-- slide 17 -->

### Open Graph

```html
<html>
  <head>
    <title>Karel de Grote Hogeschool Antwerpen</title>
    <meta name="description"
      content="Karel de Grote Hogeschool Antwerpen leidt je op tot enthousiaste professional." />
    <meta property="og:url" content="https://www.kdg.be" />
    <meta property="og:title" content="Karel de Grote Hogeschool Antwerpen" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="https://www.kdg.be/social.jpg" />
    <meta property="og:site_name" content="Karel de Grote Hogeschool" />
    <meta property="og:description"
      content="Karel de Grote Hogeschool Antwerpen leidt je op tot enthousiaste professional." />
  </head>
</html>
```

> [!WARNING]
> Open Graph gebruikt `property`, geen `name`.

<!-- slide 18 -->

### Je deelt een link in Teams, maar je `og:image` verschijnt niet. Wat is de meest waarschijnlijke oorzaak?

- A. `content="/social.jpg"`
- B. De afbeelding is een jpg
- C. Er ontbreekt een `og:type`
- D. De `<title>` is te lang

**Antwoord:** A. `content="/social.jpg"`

Een relatieve url werkt niet. Teams, LinkedIn en WhatsApp halen de afbeelding op van hun eigen server, dus ze hebben de volledige url met https:// nodig.

<!-- slide 19 -->

### Welke url is het beste voor een opleidingspagina?

- A. `kdg.be/opleidingen?id=482`
- B. `kdg.be/opleidingen/multimedia-creatieve-technologie`
- C. `kdg.be/Opleidingen/Multimedia_Creatieve_Technologie`
- D. `kdg.be/p/2026/opl/mct/nl/index.php`

**Antwoord:** B. `kdg.be/opleidingen/multimedia-creatieve-technologie`

Kort, leesbaar, koppeltekens tussen de woorden en een logische map erboven. Hoofdletters en underscores werken technisch, maar urls zijn hoofdlettergevoelig en dat geeft snel dubbele pagina's.

<!-- slide 20 -->

### URL-structuur

![Zoekresultaat met het pad kdg.be › multimedia-creatieve-technologie](https://slides.mctantwerp.be/decks/nl/web-production/02-seo/serp-url.jpg)

<!-- slide 21 -->

### URL-structuur

- Hoe duidelijker de structuur, hoe beter Google snapt hoe je site in elkaar zit
- Keep it simple, geen diepe mappenstructuren
- Koppeltekens tussen woorden, geen spaties of underscores
- Korte, herkenbare paden zonder id's of onnodige parameters
- Kies één versie (met of zonder www) en zet een `canonical` op elke pagina

<!-- slide 22 -->

### URL-structuur

kdg.be/naam-opleiding✅ kortkdg.be/opleidingen/naam-opleiding✅ gestructureerdkdg.be/opleidingen?o=naam-opleiding❌ parameter in plaats van een padkdg.be/opleidingen/123❌ zegt niets voor een menskdg.be/opleidingen/naam%20opleiding❌ spaties, slecht leesbaarkdg.be/opleidingen.php?pagina=naam-opleiding❌ heel complexkdg.be/zoeken?s=naam-opleiding⚠️ interne zoekresultaten, zet die op noindex

<!-- slide 23 -->

### Sitemap

Een XML-bestand met alle publieke url's van je site. Zo ziet een zoekmachine meteen welke pagina's er zijn.

Hou hem up-to-date en meld hem aan in Search Console. Voorbeeld: [kdg.be/sitemap.xml](https://www.kdg.be/sitemap.xml)

```xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset
  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.example.com/foo.html</loc>
    <lastmod>2026-06-04</lastmod>
  </url>
</urlset>
```

<!-- slide 24 -->

### Robots.txt

- Een bestand in de root van je site dat zegt welke crawlers wat mogen crawlen
- Daarmee kan je ook AI-crawlers zoals GPTBot buitenhouden
- Een afspraak, geen slot. Nette bots houden zich eraan, de rest niet

```bash
User-agent: Googlebot
Disallow: /private/

User-agent: GPTBot
Disallow: /

User-agent: *
Allow: /

Sitemap: https://www.example.com/sitemap.xml
```

<!-- slide 25 -->

### Crawlen is geen indexeren

Robots.txt houdt een bot weg van een pagina, maar die pagina kan nog altijd in Google staan als andere sites ernaar linken. Wil je ze echt uit de zoekresultaten, gebruik dan `noindex` en laat de pagina crawlen.

```html
<meta name="robots" content="noindex" />
```

<!-- slide 26 -->

### Robots.txt tester

<!-- slide 27 -->

### `/prijzen` staat op Disallow in je robots.txt. Kan die pagina nog in Google verschijnen?

- A. Nee, Google komt er nooit
- B. Ja, als andere sites ernaar linken
- C. Enkel in Bing
- D. Enkel als ze in je sitemap staat

**Antwoord:** B. Ja, als andere sites ernaar linken

Google crawlt de pagina niet, maar kan de url wel indexeren op basis van links. Wil je ze echt weg, gebruik dan `noindex` en laat Google de pagina crawlen zodat hij die tag ook ziet.

<!-- slide 28 -->

### Alt-attribuut

Een korte beschrijving van wat er op de afbeelding staat. Schermlezers lezen ze voor, en zoekmachines gebruiken ze om je afbeelding te begrijpen en te tonen in image search.

```html
<img src="https://example.com/person.jpg" alt="Omschrijving van wat je op de afbeelding ziet" />
```

<!-- slide 29 -->

### Alt-attribuut

- "Een persoon aan een bureau achter een laptop" ✅ kort en duidelijk
- "Een student Multimedia & Creatieve Technologie werkt op een laptop in het Fablab" ✅ meer context, nog altijd natuurlijk
- "Foto van studenten" ❌ zegt weinig
- "KdG Hogeschool Antwerpen opleiding MCT multimedia studeren Hoboken" ❌ keyword stuffing, Google straft dat af
- "Logo" ❌ gebruik de naam ("Karel de Grote Hogeschool"), of alt="" als het puur decoratie is

<!-- slide 30 -->

### Een foto van je team staat op de about pagina. Welke alt is het beste?

- A. "Foto"
- B. "Team webdesign bureau Antwerpen goedkope websites SEO"
- C. "Het team van Studio Noord, vijf mensen rond een tafel met laptops"
- D. alt="" want het is maar een foto

**Antwoord:** C. "Het team van Studio Noord, vijf mensen rond een tafel met laptops"

Beschrijf wat er te zien is, met de context die ertoe doet. Keywords proppen helpt niet en is vervelend voor iemand met een schermlezer.

<!-- slide 31 -->

### Afbeeldingen

```html
<img
  src="https://www.kdg.be/pad-naar-beeld.jpg"
  alt="Student Multimedia & Creatieve
    Technologie kijkt naar een laptop
    achter een houten bureau." />
```

```html
<img
  src="https://www.kdg.be/pad-naar-beeld.jpg"
  alt="Studenten Multimedia & Creatieve
    Technologie programmeren een robotarm." />
```

![Google image search met foto's van KdG en MCT](https://slides.mctantwerp.be/decks/nl/web-production/02-seo/image-search.jpg)

<!-- slide 32 -->

### Semantische HTML

- Gebruik de juiste tags: links, lists, buttons, dialog
- Zet je content in landmarks: header, main, footer, nav
- Headings in een logische volgorde, zonder niveaus over te slaan
- Eén `<h1>` per pagina is de afspraak. Google kan er meer aan, schermlezers liever niet
- `<button>` voor een actie, `<a>` om ergens naartoe te gaan
- `<strong>` en `<em>` voor nadruk

<!-- slide 33 -->

### Headings

```html
<h1>Eén h1 per pagina</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
```

```html
<h2 class="heading-1">
  Een h2 die eruitziet als een h1 (via CSS)
</h2>
<h3 class="paragraph">
  Een h3 die eruitziet als een paragraaf (via CSS)
</h3>
```

<!-- slide 34 -->

### Originele content

- Goede, originele content scoort beter
- AI-content op zich is geen probleem, massa content zonder meerwaarde wel. Google straft dat af
- Regelmatige updates helpen, denk aan een blog of nieuwe producten

<!-- slide 35 -->

### Opdracht: Spiek bij de buren

*15 minuten, Per 2*

1. Kies een site die je vaak gebruikt en open de source (`view-source:` voor de url)
2. Zoek de `<title>`, de meta description en de `og:` tags. Ontbreekt er iets?
3. Open `/robots.txt` en `/sitemap.xml` van die site. Welke bots worden geblokkeerd?
4. Plak de link in Discord en vergelijk de preview met wat je in de source vond

<!-- slide 36 -->

## 3. Off-page SEO

*Alles wat op andere websites gebeurt*

<!-- slide 37 -->

### Links links links

- Links van andere websites naar die van jou
- Hoe sterker de site die linkt, hoe meer die link waard is
- Ze brengen ook gewoon bezoekers binnen

<!-- slide 38 -->

### Webmaster tools

**[Google Search Console](https://search.google.com/search-console)**

**[Bing Webmaster Tools](https://www.bing.com/webmasters)**

Registreer je site zodat hij sneller opgepikt wordt, en krijg inzicht in hoe je scoort.

![Performance grafiek met web search clicks in Google Search Console](https://slides.mctantwerp.be/decks/nl/web-production/02-seo/search-console.jpg)

<!-- slide 39 -->

### Google Business Profile

*Lokale SEO*

- Handig voor bedrijven om snel zichtbaar te zijn op Google en Maps
- Een info blokje naast de zoekresultaten
- Website, telefoonnummer, locatie en openingsuren in één oogopslag

<!-- slide 40 -->

## 4. AI en GEO

*Generative engine optimization*

<!-- slide 41 -->

### AI ❤️ SEO

- Wat je voor SEO doet, helpt ook bij hoe AI over jouw info vertelt
- Google toont AI Overviews bovenaan de zoekresultaten, in België sinds maart 2025
- GPTBot of ClaudeBot blokkeren kan via robots.txt. Uit AI Overviews blijven kan enkel met nosnippet of noindex
- Blokkeer je alles, dan vertelt AI over jou op basis van andere sites. Beter zelf de juiste info geven

![Google AI-overzicht over Karel de Grote Hogeschool](https://slides.mctantwerp.be/decks/nl/web-production/02-seo/ai-overview.jpg)

<!-- slide 42 -->

### Je zet `User-agent: Google-Extended` op `Disallow: /`. Kan je content nog in een AI Overview komen?

- A. Nee, Google-Extended is de AI van Google
- B. Ja, AI Overviews horen bij gewone Search
- C. Enkel als je ook Googlebot blokkeert
- D. Enkel in het Engels

**Antwoord:** B. Ja, AI Overviews horen bij gewone Search

Google-Extended regelt enkel of Gemini je content mag gebruiken voor training. AI Overviews en AI Mode vallen onder Search, daarvoor heb je `nosnippet` of `noindex` nodig.

## Begrippen

- **SEO**: Search engine optimization. Alles wat je doet zodat de juiste bezoekers je site vinden via een zoekmachine. (slide 3)
- **Crawler**: Een bot van een zoekmachine die links volgt, je pagina's leest en ze in de index zet. Ook spider genoemd. (slide 9)
- **Index**: De database van een zoekmachine. Enkel een pagina die erin zit, kan in de zoekresultaten verschijnen. (slide 9)
- **Technical SEO**: SEO op je eigen website: laadtijd, correcte HTML tags, afbeeldingen, urls, sitemap en robots.txt. (slide 8)
- **Off-page SEO**: SEO die op andere websites gebeurt. Vooral links van andere sites naar die van jou. (slide 36)
- **Title**: De <title> in de head van een pagina. Google toont hem als klikbare kop in de zoekresultaten en kort af rond 600px, zo’n 50 à 60 tekens. (slide 11)
- **Meta description**: Het tekstje onder je titel in de zoekresultaten. Geen rankingfactor, wel wat mensen doet klikken. Google herschrijft het vaak. (slide 12)
- **Snippet**: Hoe je pagina in de zoekresultaten staat: title, url en description. Google kort af op pixels, niet op tekens. (slide 14)
- **Open Graph**: Meta tags (og:title, og:image, ...) die bepalen hoe een gedeelde link eruitziet in Teams, WhatsApp of LinkedIn. Ze gebruiken property, geen name, en og:image heeft een absolute url nodig. (slide 16)
- **Canonical**: Een link in de head die zegt welke url de echte versie van een pagina is, als dezelfde inhoud op meerdere urls staat. Met en zonder www, bijvoorbeeld. (slide 20)
- **Sitemap**: Een XML-bestand met alle publieke url's van je site, zodat een zoekmachine meteen ziet welke pagina's er zijn. Meld het aan in Search Console. (slide 23)
- **Robots.txt**: Een bestand in de root van je site dat zegt welke crawlers wat mogen crawlen. Een afspraak, geen slot: nette bots houden zich eraan, de rest niet. (slide 24)
- **noindex**: Een meta tag die een pagina uit de zoekresultaten houdt. Google moet de pagina wel kunnen crawlen, anders ziet hij de tag nooit. (slide 25)
- **Keyword stuffing**: Zoveel mogelijk zoekwoorden in een tekst of alt proppen. Helpt niet, Google straft het af. (slide 28)
- **Semantische HTML**: De tag gebruiken die past bij de inhoud: een button voor een actie, een link om te navigeren, headings in volgorde. Zoekmachines en schermlezers snappen je pagina er beter door. (slide 32)
- **Backlink**: Een link van een andere website naar die van jou. Hoe sterker die site, hoe meer de link waard is. (slide 37)
- **Google Search Console**: De tool van Google om je site aan te melden, je sitemap door te geven en te zien hoe je scoort. Bing heeft Bing Webmaster Tools. (slide 38)
- **Google Business Profile**: Het infoblok naast de zoekresultaten en op Maps, met website, telefoonnummer, locatie en openingsuren. Lokale SEO. (slide 39)
- **GEO**: Generative engine optimization. Zorgen dat ChatGPT, Perplexity en AI Overviews het juiste over jou vertellen. Wat je voor SEO doet, helpt hier ook. (slide 40)
- **AI Overviews**: Het AI-antwoord bovenaan de zoekresultaten van Google. Eruit blijven kan enkel met nosnippet of noindex, robots.txt helpt daar niet. (slide 41)

## Links en bronnen

### In de presentatie

- [kdg.be/sitemap.xml](https://www.kdg.be/sitemap.xml) (slide 23)
- [Google Search Console](https://search.google.com/search-console) (slide 38)
- [Bing Webmaster Tools](https://www.bing.com/webmasters) (slide 38)