Korte versie

Semantische opmaak betekent dat je HTML-elementen kiest op hun betekenis: één <h1> voor je titel, <h2> en <h3> voor logische secties, <figure> met <figcaption> voor beelden, <time> voor je publicatiedatum en JSON-LD als BlogPosting voor zoekmachines. In deze gids lees je waarom dat uitmaakt voor je SEO en vind je per element een copy-paste-voorbeeld dat je meteen kunt valideren.

Semantische opmaak betekent dat je HTML-elementen kiest op hun betekenis: één <h1> voor je titel, <h2> en <h3> voor logische secties, <figure> met <figcaption> voor beelden, <time> voor je publicatiedatum en JSON-LD als BlogPosting voor zoekmachines. In deze gids lees je waarom dat uitmaakt voor je SEO en vind je per element een copy-paste-voorbeeld dat je meteen kunt valideren.

Introductie tot semantische opmaak

Semantische opmaak is het gebruik van HTML-elementen om de structuur en betekenis van je webpagina duidelijk te maken aan zoekmachines en hulpsoftware. Elke blogpost begint daarom met precies één <h1> : de titel van je artikel. Daaronder volg je een logische hiërarchie zonder niveaus over te slaan, eerst <h2> voor hoofdsecties en <h3> voor subsecties. Die opbouw maakt je artikel scanbaar voor lezers en begrijpelijk voor machines.

Je kunt eveneens het id attribuut toevoegen aan je <h2> en <h3> elementen, waarbij de tekstuele inhoud van het element wordt gebruikt en spaties worden vervangen door een ‘-’. Op deze manier kun je eenvoudig vanuit de inhoudsopgave navigeren door een link te plaatsen naar #naam-van-het-id .

De basisstructuur van een blogpost

Hier is een voorbeeld van de basisstructuur van een blogpost met semantische opmaak :

html
<!DOCTYPE html>
<html lang="nl">
  <head>
    <title>Mijn website</title>
  </head>
  <body>
    <header>
      <figure>
        <img src="logo.svg" alt="Bedrijfsnaam" />
      </figure>
      <nav aria-label="Hoofdnavigatie">
        <!-- aria-label i.p.v. heading: navigatie hoort niet in de content-outline -->
        <menu>
          <li><a href="/">Home</a></li>
          <li><a href="/contact">Contact</a></li>
        </menu>
      </nav>
    </header>
    <main>
      <article>
        <h1>Hoofdtitel</h1>
        <h2>Titel 1</h2>
        <p>Paragraaf 1</p>
        <h2>Titel 2</h2>
        <p>Paragraaf 2</p>
        <h2>Titel 3</h2>
        <p>Paragraaf 3</p>
      </article>
    </main>
    <footer>
      <nav aria-label="Footernavigatie">
        <menu>
          <li><a href="/">Home</a></li>
          <li><a href="/contact">Contact</a></li>
        </menu>
      </nav>
      <p>&copy; 2023 Bedrijfsnaam</p>
    </footer>
  </body>
</html>

Merk op dat de navigatie geen <h2> meer gebruikt. Headings zijn voor je content; navigatie benoem je met een aria-label op het <nav> -landmark. Zo blijft je heading-outline schoon en weet een screenreader toch precies welke navigatie hij tegenkomt.

Afbeeldingen en hun alt teksten

Afbeeldingen zijn een belangrijk onderdeel van je blogpost, en het is belangrijk om ze correct te gebruiken in termen van semantische opmaak. Zorg ervoor dat je afbeeldingen passende bestandsnamen en alt teksten hebben die de inhoud van de afbeeldingen beschrijven. Alt teksten zijn essentieel voor de toegankelijkheid en SEO. Hier is een voorbeeld van het correct gebruiken van afbeeldingen met semantische opmaak :

Een <figcaption> geeft zoekmachines extra context naast je alt-tekst: de alt-tekst beschrijft wat er op het beeld staat, de figcaption plaatst het in de context van je artikel. Houd beide kort en beschrijvend.

html
<figure>
  <img
    src="voorbeeld-afbeelding.jpg"
    alt="Een voorbeeld van een goed geformatteerde afbeelding"
  />
  <figcaption>Een voorbeeld van een goed geformatteerde afbeelding</figcaption>
</figure>
```html

## Gebruik van time en address

Het is belangrijk om ruimte te voorzien voor een `<time>` en `<address>` element in je blogpost. Het `<time>` element kan door zoekmachines worden gebruikt om te lezen wanneer het artikel is gepubliceerd of aangepast. Het `<address>` element bevat een verwijzing naar de auteur van het artikel. Zorg ervoor dat er nuttige informatie over de auteur op de auteurspagina staat, inclusief links naar sociale media.

Hier is een voorbeeld van het gebruik van een `<time>` en `<address>` element:

```html
<time datetime="2023-03-21">21 maart 2023</time>
<address>
  Geschreven door <a href="auteurspagina.html">De Auteur</a>
  Volg me op <a href="https://twitter.com/deauteur">Twitter</a>
</address>
```html

## Schema markup voor blogposts

[Schema markup](https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data) is ook belangrijk om in je HTML te verwerken. Voor een blogpost kun je [schema markup](https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data) voor [FAQ](https://developers.google.com/search/docs/appearance/structured-data/faqpage) en [Article](https://developers.google.com/search/docs/appearance/structured-data/article) gebruiken.

Hier is een voorbeeld van [schema markup](https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data) voor een [Article](https://developers.google.com/search/docs/appearance/structured-data/article) (BlogPosting):

```json
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Een gids voor de juiste semantische opmaak van blogposts",
  "url": "https://voorbeeld.com/blog/semantische-opmaak-blogposts",
  "image": [
    "https://voorbeeld.com/afbeelding/1x1/afbeelding.jpg",
    "https://voorbeeld.com/afbeelding/4x3/afbeelding.jpg",
    "https://voorbeeld.com/afbeelding/16x9/afbeelding.jpg"
  ],
  "datePublished": "2023-03-20T12:42:21.345Z",
  "dateModified": "2023-03-21T12:12:44.220Z",
  "author": {
    "@type": "Person",
    "name": "De Auteur",
    "url": "https://voorbeeld.com/de-auteur",
    "sameAs": [
      "https://twitter.com/de-auteur",
      "https://www.linkedin.com/in/de-auteur/"
    ]
  },
  "publisher": {
    "@type": "Organization",
    "name": "Bedrijfsnaam",
    "url": "https://voorbeeld.com",
    "sameAs": ["https://www.linkedin.com/company/bedrijfsnaam/"],
    "logo": {
      "@type": "ImageObject",
      "url": "https://voorbeeld.com/logo.svg"
    }
  }
}

Hier is een voorbeeld van schema markup voor een FAQ (FAQPage, Question, Answer):

json
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Waarom is semantische opmaak belangrijk voor SEO?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Semantische opmaak helpt zoekmachines om de structuur en betekenis van je webpagina's beter te begrijpen. Dit leidt tot een betere indexering en rangschikking in zoekresultaten, wat uiteindelijk meer verkeer naar je website genereert."
      }
    },
    {
      "@type": "Question",
      "name": "Moet ik altijd alt-teksten gebruiken voor afbeeldingen?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Ja, het is belangrijk om alt-teksten te gebruiken voor alle afbeeldingen op je website. Alt-teksten zijn niet alleen nuttig voor SEO-doeleinden, maar ook voor toegankelijkheid. Ze helpen mensen met een visuele beperking om de inhoud van afbeeldingen te begrijpen via schermlezers."
      }
    }
  ]
}

Valideer je markup altijd nadat je hem geplakt hebt: met de Rich Results Test van Google zie je direct of je JSON-LD geldig is, en via URL-inspectie in Google Search Console check je hoe Google de pagina ziet. Een snelle eigen check: de JSON moet JSON.parse -baar zijn zonder HTML-entity-corruptie. Ter controle: dit artikel op straffesites.com staat zelf als BlogPosting in JSON-LD in de paginabron.

Conclusie

De juiste semantische opmaak is cruciaal voor het succes van je blogposts op het gebied van SEO en toegankelijkheid. Vergeet niet om de juiste HTML elementen, afbeeldingen met alt teksten en schema markup te gebruiken om je blogposts te optimaliseren. Door deze best practices te volgen, ben je op weg naar een betere zichtbaarheid en hogere rangschikking in zoekmachines.

Als je meer wilt weten over de juiste opmaak en structuur van tekst voor een blogpost, raad ik je aan om mijn andere artikel hierover te lezen. Je kunt ook meer informatie over semantische opmaak vinden op de website van MDN. Door je blogposts goed te structureren, verbeter je niet alleen de ervaring voor je lezers, maar zorg je er ook voor dat je content beter gevonden wordt door zoekmachines. Veel succes met het toepassen van deze opmaaktips!

Wil je dit liever aan een professional overlaten? Bij Straffe Sites is semantisch correcte HTML en valide schema standaard onderdeel van elk traject. Voor vragen over je eigen blogposts kun je altijd contact met me opnemen.