Koppen. Je kent ze vast wel uit de Nederlandse les. Als je een verslag moest schrijven, of een werkstuk moest maken, om de hoofdstukken netjes aan te geven. Je tekstverwerker heeft er waarschijnlijk een handig en snel keuzemenu voor. Online heb je HTML koppen. Eigenlijk werkt het precies hetzelfde, maar vaak wordt het toch nog verkeerd gebruikt. Na het lezen van deze blogpost doe jij het nooit meer fout!

Wat zijn HTML koppen?

Zoals gezegd, koppen geven structuur. Ze maken je tekst scanbaar. Online kun je dat net zo goed doen als in je tekstverwerker. In HTML, de code die gebruikt wordt om websites te maken, wordt daar de heading tag voor gebruikt: <H>. Je kunt bij deze tag kiezen uit H1 tot en met H6. H1 is doorgaans het grootst, H6 is heel klein.

Verkeerd gebruik van koppen

Voor de grootte

Omdat die heading tags allemaal komen met een mooie opeenvolgende standaardgrootte, worden ze vaak gebruikt om simpelweg de grootte van je tekst te bepalen, en niet de structuur. Ziet er misschien goed uit, maar kan voor zoekmachines heel verwarrend zijn, en negatief zijn voor je zoekresultaten.

Geen gebruik van koppen

Ook komt het soms voor dat iemand geen gebruik maakt van heading tags, maar de koppen handmatig opmaakt. Het kan er exact zo uitzien als wanneer je wel koppen gebruikt, maar ook dit is zonde voor je SEO. Je geeft hierbij niet alleen een verwarrende hiërarchie aan, maar zelfs helemaal géén hiërarchie! Zo wordt het voor een zoekmachine heel moeilijk om te bepalen hoe waardevol jouw pagina of blogpost is.

Zo gebruik je koppen wél

Hiërarchie

HTML koppen zijn in eerste plaats bedoeld om hiërarchie en structuur in jouw tekst aan te brengen. Hoe kleiner het nummer, hoe hoger een kop staat in de hiërarchie. Normaal gesproken gebruik je H2 voor de koppen in je artikel. Wil je onder zo’n kop verschillende deelonderwerpen aansnijden, dan gebruik je H3. Wil je die nog verder uitsplitsen, dan gebruik je H4, etc.

In een normale tekst kun je doorgaans toe met H2 en H3, soms H4 als je een erg uitgebreid artikel maakt. Daarnaast worden heading tags bij WordPress ook gebruikt voor de titels van de widgets in je sidebar en footer. Vaak is dit H4 of H5.

Deze hiërarchie is heel belangrijk voor zoekmachines: zij kunnen zo jouw tekst goed scannen en indexeren, en bepalen hoe waardevol hij is, en welk deel van jouw tekst waarover gaat.

Verder is het correct gebruiken van heading tags superfijn als je in de WordPress Gutenberg editor een blok hebt dat automatisch een inhoudsopgave genereert. Meestal worden subheadings dan automatisch ingesprongen, wat natuurlijk heel fijn is voor de lezer!

H1 exclusief voor paginatitel

Het is je misschien opgevallen dat ik begin te tellen bij H2. Dat heeft een reden: In WordPress wordt H1 doorgaans gebruikt voor de pagina- of berichttitel. Dit is namelijk de belangrijkste kop op je pagina! Om deze reden gebruik je verder dus geen H1 tags in je bericht zelf, omdat dat verwarrend is voor zoekmachines.

Leesbaarheid

Naast hiërarchie is leesbaarheid een belangrijke functie van koppen. Leesbaarheid voor mensen. Ik zeg altijd: online lezers zijn luie lezers. I mean, waarschijnlijk lees je zelf ook weinig artikelen helemaal door. Ik durf te wedden dat je het meeste scant en vervolgens alleen leest wat voor jou nuttig of interessant is.

Daarom is het belangrijk om jouw heading tags een opmaak te geven die goed contrasteert met jouw body tekst. In WordPress kun je dit heel makkelijk sitewide doen in de customizer. Als je handig bent, kun je ook zelf nog extra CSS toevoegen.

Dit zijn punten waar je op kunt letten:

  • Zorg voor een duidelijk verschil in grootte
    Let hierbij ook op verschil in grootte tussen de koppen zelf, om de hiërarchie ook voor lezers duidelijk te houden.
  • Geef je koppen een andere dikte
    Letterdiktes kunnen variëren tussen 100 en 900. Veel lettertypes hebben een standaard bold-optie van 600 of 700. Maar er zijn ook lettertypes die je meer keuzes in dikte geven, zoals Exo2, het lettertype dat ik hier gebruik.
  • Geef je koppen een constrasterend lettertype
    Bijvoorbeeld een sierlijker lettertype bij een strakkere body tekst. Zorg er wel voor dat de lettertypes goed bij elkaar passen, en natuurlijk bij jouw huisstijl passen!
  • Geef je koppen een andere kleur
    Natuurlijk iets wat binnen je huisstijl past, maar het kan heel effectief zijn om jouw koppen iets donkerder te maken dan jouw body tekst.

Schrijf je graag je eigen artikelen, maar besteed je al dat technische website-gedoe liever uit? Dan is mijn onderhoudsservice wat voor je!

Klik hier voor meer informatie

Winkelwagen
Scroll naar top

Download gratis mijn checklist voor een duurzame website!

Door je in te schrijven ga je ermee akkoord dat ik je af en toe mail met inspiratie of een fijne aanbieding. Je kunt je op elk gewenst moment weer uitschrijven.