Back to the basics – Headings

Headings zijn HTML-elementen voor het structureren van teksten. Net zoals een geprinte tekst een hoofdkop en verschillende tussenkoppen heeft, zo heeft een online tekst ook één of meerdere koppen. Deze koppen worden op webpagina’s in de HTML met <h*>- attributen aangegeven, waarbij op de plaats van de asterisk een getal van 1 tot 6 komt te staan. Er bestaan voor de header tags namelijk zes niveaus: <h1> tot en met <h6>. Ieder niveau heeft een eigen lettergrootte die correspondeert met het niveau in de tekst.

Voorbeeld <h1> kop als HTML-element

Voorbeeld <h2> kop als HTML-element

Voorbeeld <h3> kop als HTML-element

Best practices voor headings

Headings moeten relevant zijn voor het onderwerp van de pagina waarop zij staan. Voor het gebruik hiervan is het belangrijk dat iedere onderliggende heading specifiek ingaat op het onderwerp van de bovenliggende tag. Headings vormen op deze manier een belangrijke stap in het overzichtelijk maken van een website voor zowel consumenten als crawlers. Bovenstaande voorbeelden zijn correct gebruikte headings voor een pagina die over ‘SEO-optimalisatie’ gaat.

Met headings kan aangeven worden wat het hoofdonderwerp van een pagina is. Omdat elke pagina een ander hoofdonderwerp kan hebben, gelden header tags dan ook per pagina en niet voor gehele websites.

Er zijn enkele regels betreffend het gebruik van headings:

Het <h1>-attribuut: de <h1>-tag mag niet vaker dan één keer per pagina gebruikt worden. Dit element duidt het hoofdonderwerp van een pagina aan: als er vaker een <h1>-tag gebruikt wordt, dan is het voor de zoekmachines niet meer duidelijk wat het onderwerp van de pagina daadwerkelijk is. Verwerk in de <h1>-tag indien mogelijk het voor de bijbehorende pagina belangrijkste zoekwoord.
De <h2>– tot en met <h6>-attributen: gebruik de dieperliggende <h*>-attributen om het hoofdonderwerp van de pagina genoemd in de <h1>-tag verder uit te diepen. Gebruik heading-elementen dus hiërarchisch: zo mag een <h3>-tag alleen gebruikt worden als de tag voor het bovenliggende niveau, de <h2>-tag, ook aanwezig is in de tekst. Verwerk in de dieperliggende <h*>-tags meer algemene, relevante zoektermen.
Links: Koppel nooit een link aan een heading. Door een link aan een <h*>-attribuut te koppelen wordt ongewild aan de zoekmachine doorgegeven dat het belangrijkste element van die pagina niet op die pagina staat, maar ergens anders. Dit is verwarrend en heeft daardoor een negatief effect op de positie van de pagina in de zoekmachine resultaten.
Opmaak: De <h*>-attributen mogen niet gebruikt worden als onderdeel van de lay-out van een gehele website, maar moeten per specifieke pagina ingezet worden, zoals in een hoofdstuk van een boek. Voor het instellen van de opmaak van een website kunnen beter Cascading Style Sheets (CSS) gebruikt worden.
Zoekwoorden: Verwerk op een natuurlijke wijze de juiste, meest belangrijke zoekwoorden in header tags.
Lengte: Een goede kop of tussenkop telt ongeveer zes woorden.

Veelgemaakte fouten in headings

Eén van de meest voorkomende fouten op websites is het sitewide gebruik van <h*>-attributen in de footer van een website. Zorg ervoor dat dit niet gebeurt: de informatie in de footer van een website is géén sub onderwerp van individuele pagina’s.

Indien deze fout op een website voorkomt raden wij aan de gedetecteerde <h*>-attributen te verwijderen en te vervangen door <div>- of <span>-elementen. Het <div>-element is een HTML-code waarbij de tekst tussen de openingstag <div> en de sluitingstag </div> de in de <head> bepaalde layout voor het div element aanneemt. Het <span>-element geeft daarnaast een specifieke opmaak aan een enkel stuk tekst mee.

Andere veelvoorkomende fouten zijn:

Het gebruiken van twee of meer <h1>-tags;
Het sitewide gebruik van <h*>-attributen in zijmenu’s en/of widgets;
Het ontbreken van een logische hiërarchische structuur in het gebruik van de <h2>- tot en met <h6>-attributen, zoals het overslaan van een bovenliggend <h*>-element.