Koppen en de opbouw van een pagina

Module 3: De technische basis van een pagina · Leestijd: 11 minuten

Leerdoel: Na deze les kun je een pagina opbouwen met een duidelijke hoofdkop en logische tussenkoppen, uitleggen wat Google en schermlezers met koppen doen, en goede alt-teksten en bestandsnamen voor afbeeldingen schrijven.

Kernbegrippen: kop (<h1> tot <h6>), hoofdkop, tussenkop, niveau overslaan, semantische HTML, schermlezer, opgemaakte tekst die geen kop is, alt-tekst, leeg alt="" voor decoratie, bestandsnaam, tekst in afbeeldingen

Koppen zijn de inhoudsopgave van je pagina

Een lange tekst zonder tussenkopjes leest niemand graag. Op internet is dat nog sterker: bezoekers scannen een pagina eerst en lezen pas als ze zien dat het antwoord erin staat. Koppen helpen daarbij. Maar koppen zijn meer dan grote, vette letters. In HTML zijn het aparte elementen met een niveau:

<h1>Bruidsboeketten op maat</h1>
  <h2>Zo werken we</h2>
    <h3>De kennismaking</h3>
    <h3>Het proefboeket</h3>
  <h2>Voorbeelden</h2>
  <h2>Veelgestelde vragen</h2>

De <h1> is de hoofdkop: waar gaat deze pagina over? De <h2>'s zijn de hoofdstukken, de <h3>'s de paragrafen daarbinnen, en zo verder tot <h6>. De inspringing hierboven is alleen om het te laten zien; in echte HTML doet die er niet toe.

Twee groepen lezen die structuur echt:

1. Mensen met een schermlezer. Een blinde of slechtziende bezoeker laat de schermlezer vaak eerst alle koppen opnoemen, en springt dan naar het stuk dat hij zoekt. Zonder echte koppen is de pagina één lange lap tekst.
2. Zoekmachines. Google gebruikt koppen om te begrijpen waar de verschillende delen van een pagina over gaan.

Wat Google zegt over koppen

Over koppen gaan veel fabels rond. Dit is wat Google zelf zegt:

• In de SEO-startgids van Google staat dat de volgorde van koppen voor Google Zoeken niet uitmaakt, en dat er geen magisch aantal koppen is dat een pagina moet hebben. Koppen in een logische volgorde zijn wel heel goed voor schermlezers.
• John Mueller van Google zei in een video (2019) dat de systemen van Google geen probleem hebben met meerdere <h1>-koppen op een pagina. Google probeert te werken met de HTML zoals die is: één <h1>, meerdere, of alleen opgemaakte tekst zonder echte koppen.
• In de documentatie over titellinks (les 3.1) noemt Google wel een situatie die mis kan gaan: geen duidelijke hoofdtitel. Staan er meerdere grote, opvallende koppen bovenaan en is niet duidelijk welke de hoofdtitel is, dan kan Google moeite hebben een goede titellink te kiezen. Google raadt aan de hoofdkop duidelijk te onderscheiden, bijvoorbeeld als de eerste zichtbare <h1>.

De conclusie van deze cursus: één duidelijke <h1> per pagina is een goede gewoonte, niet omdat Google je anders straft, maar omdat de pagina dan voor iedereen duidelijk zegt waar hij over gaat. Lezers, schermlezers en Google kunnen er dan niet omheen. De controle in opdracht A3.2 geeft daarom groen bij precies één niet-lege <h1>, oranje bij meer dan één en rood als er geen is.

Wat er vaak misgaat

Een pagina opbouwen die antwoord geeft

Een goede volgorde voor bijna elke pagina:

1. Hoofdkop (<h1>) die zegt wat de bezoeker hier vindt. Vaak lijkt hij op de titel uit les 3.1, maar hij hoeft niet gelijk te zijn. De titel staat in de zoekresultaten, de hoofdkop op de pagina zelf.
2. Een korte inleiding met meteen het belangrijkste antwoord.
3. Tussenkoppen (<h2>) voor elk deelonderwerp, geschreven als iets wat de lezer zoekt: "Wat kost een bruidsboeket?" zegt meer dan "Prijzen".
4. Waar nodig <h3> onder een <h2>, niet los.

Les 7.3 gaat verder in op het schrijven zelf. Hier gaat het om het geraamte.

Afbeeldingen: alt-tekst en bestandsnaam

Een zoekmachine "ziet" een foto niet zoals jij. Google gebruikt computervisie, maar haalt veel uit de tekst eromheen. De belangrijkste bron noemt Google zelf: de alt-tekst.

<img src="/beelden/bruidsboeket-pioenrozen-wit.jpg"
     alt="Bruidsboeket met witte pioenrozen en eucalyptus">

De alt-tekst (alternatieve tekst) heeft twee taken:

• Toegankelijkheid: een schermlezer leest hem voor aan wie de afbeelding niet kan zien. Kan de afbeelding niet laden, dan toont de browser hem in plaats van de foto.
• Begrip: Google gebruikt de alt-tekst, samen met computervisie, om te begrijpen wat er op de afbeelding staat. Dat helpt vooral in Google Afbeeldingen.

Zo schrijf je een goede alt-tekst:

• Beschrijf wat er te zien is en waarom het op deze pagina staat, in één korte zin.
• Gebruik zoekwoorden alleen als ze vanzelf passen. Google waarschuwt dat alt-teksten volgestopt met zoekwoorden een slechte ervaring geven en als spam kunnen worden gezien.
• Een afbeelding die alleen versiering is (een lijntje, een achtergrondpatroon) krijgt een lege alt: alt="". Dan slaat een schermlezer hem over. Een ontbrekend alt-attribuut is iets anders: dan leest een schermlezer soms de bestandsnaam voor.
• Staat er belangrijke tekst in de afbeelding (een openingstijd, een prijs, een folder), zet die tekst dan ook gewoon op de pagina. Tekst in een plaatje is voor een schermlezer en voor een zoekmachine lastig te lezen.

Ook de bestandsnaam helpt een beetje. Google raadt korte, beschrijvende namen aan en noemt image1.jpg of pic.gif als voorbeeld van wat je beter niet doet. bruidsboeket-pioenrozen-wit.jpg vertelt meer dan IMG_4032.jpg.

Snelheid en afmetingen van afbeeldingen komen in les 4.3 aan bod.

In de praktijk: koppen in websitebouwers

• In de AI Builder van WebOké wordt de eerste kop van een pagina automatisch de <h1> en worden alle volgende koppen <h2>. Zo heeft elke pagina precies één hoofdkop. Bij elke foto kun je een beschrijving invullen; dat wordt de alt-tekst. De SEO-controle waarschuwt bij foto's zonder beschrijving.
• In WordPress kies je in de blokeditor bij het blok Kop het niveau (H1 tot H6). Het thema maakt meestal van de paginatitel zelf al de <h1>; gebruik in de tekst dan H2 en lager. De alt-tekst vul je in bij de afbeelding in de mediabibliotheek of in het blok.

Andere websitebouwers werken vergelijkbaar. Kijk bij twijfel in de broncode (Ctrl+U) of zoek met Ctrl+F naar <h1.

Samenvatting

• Koppen (<h1> tot <h6>) zijn de inhoudsopgave van je pagina, voor lezers, schermlezers en zoekmachines.
• Google heeft geen probleem met meerdere <h1>'s of een andere volgorde, maar raadt wel een duidelijke hoofdtitel aan. Eén duidelijke <h1> is een goede gewoonte.
• Kies het niveau op basis van de opbouw, niet op lettergrootte; sla bij voorkeur geen niveaus over.
• Een goede alt-tekst beschrijft kort wat er te zien is; versiering krijgt alt=""; geen zoekwoordstapeling.
• Belangrijke tekst hoort op de pagina, niet alleen in een afbeelding.

Quiz

Opdracht

Opdracht A3.2: Eén hoofdkop en een logische opbouw. Vul het adres van een pagina van je eigen site in. Het programma haalt de pagina op, telt de <h1>-koppen en laat de kopstructuur zien als inhoudsopgave. Je ziet of er precies één niet-lege hoofdkop is, of er niveaus worden overgeslagen en hoeveel afbeeldingen geen alt-attribuut hebben. Vul vooraf in hoeveel <h1>'s je denkt dat er zijn. Geen eigen site? Gebruik www.rijksoverheid.nl.

Verder lezen

• Google Search Central, SEO-startgids (koppen, alt-tekst): https://developers.google.com/search/docs/fundamentals/seo-starter-guide
• Google Search Central, Best practices voor afbeeldingen: https://developers.google.com/search/docs/appearance/google-images
• W3C WAI, Headings (toegankelijke koppen): https://www.w3.org/WAI/tutorials/page-structure/headings/
• W3C WAI, Alt-teksten: https://www.w3.org/WAI/tutorials/images/
• Gratis WordPress-cursus 4.4: Media: afbeeldingen en alt-tekst