CHEAT SHEET: alles over het invoegen van tussenkoppen (heading tags)

Een tussenkop boven een alinea springt eruit; handig voor lezer én de zoekmachine. In deze blog alles over headings en 3 manieren waarop je heading tags invoegt.

Ik kom zoveel frustrerende websites tegen: inhoudelijk goede content maar de lay-out is zo slecht dat pagina’s en blogs er nog het meest uitzien als bladzijden van een roman. Lange lappen tekst waarbij gebrek aan witregels eerder… ehh, regel (*grijns*) dan uitzondering is.

Zo’n lay-out maakt de online gebruikerservaring ronduit slecht. Ook ik haak dan af. Ik klik een ander zoekresultaat aan in Google, hopend op een beter leesbare tekst.

Natuurlijk kost dit extra tijd, maar ik heb het er voor over. Dus blijkbaar vind ik een slechte lay-out zó irritant… Zou ik daarin de enige zijn? Vast niet. En wat al enorm helpt, is als teksten zijn ingedeeld in korte alinea’s, elk met een tussenkop erboven.

Tussenkoppen zijn woorden of korte zinnetjes boven je alinea’s. Ze vertellen waar de alinea over gaat en springen er visueel uit: er staat extra witruimte omheen en de letters zijn groter dan van de ‘gewone’ tekst.

Verschillende benamingen voor de heading tag

Er circuleren allerlei termen die zo goed als hetzelfde betekenen:

• tussenkop: deze term komt uit de offline drukwereld;
• koptekst: zo heet de tussenkop in de Nederlandse versie van WordPress;
• heading: zo noemt de Engelstalige WordPress een tussenkop;
• subkop of subheading: spreektaal;
• heading tag: officiële naam voor het HTML-element dat een tussenkop definieert;
• kop 1, kop 2, kop 3 t/m kop 6: informele benaming voor de heading tag;
• h1, h2, h3 t/m h6: zo noem je de tags die je toevoegt aan de tussenkop in HTML;
• soms hoor je ook (sub)header, maar dat vind ik geen juiste benaming.

Tussenkoppen voor betere leesbaarheid

Zoals ik al aanstipte, is een prettige lay-out essentieel voor een goede leesbaarheid. Je kan de leesbaarheid van een tekst heel simpel verbeteren door een heldere opmaak: niet te lange zinnen, korte alinea’s, voldoende witruimte én tussenkoppen.

Veel lezers scannen een tekst voordat ze besluiten of ze die de moeite van het lezen waard vinden. Ze lezen de titel, de inleiding en de tussenkoppen. Samen vormen deze elementen, als het goed is, de rode draad van je verhaal.

NB: Natuurlijk spelen bij leesbaarheid ook hele andere zaken dan lay-out een rol. Denk aan aansluiten bij de voorkennis van de lezer en je artikel een heldere structuur geven.

Headings als SEO kans

Tussenkoppen zijn ook een mooie SEO kans. Je kan de vindbaarheid van je webpagina verbeteren door slim gebruik te maken van zoekwoorden in je headings. Ook al bestaan kopteksten uit maximaal enkele woorden, de kracht van deze woorden is relatief groot.

De zoekrobot herkent tussenkoppen en hecht hier meer waarde aan dan aan de ‘gewone’ tekst. Hij scant net als lezers een webpagina, al gaat hij iets anders te werk dan een mens. De bot leest de titel (dit is de h1 heading) en daarna de tussenkoppen (koptekst h2, h3, h4, h5 en h6). Daarna komt de vetgedrukte tekst en dán pas de rest.

Deel op Facebook of Twitter:
Goede #layout vergroot #leesbaarheid én #vindbaarheid van #blogs en andere #webteksten. Werk o.a. met #tussenkoppen. http://bit.ly/2hdGora #SEO #opmaak

Hoe maak je een koptekst of heading in WordPress?

Tussenkoppen zijn eenvoudig aan te maken. Je kan:

1. de visuele of wysiwyg editor (what you see is what you get) gebruiken;
2. tussenkoppen invoegen in Gutenberg;
3. de heading tag rechtstreeks als HTML invoeren (werkt bij alle platformen);
4. gebruikmaken van sneltoetsen.

Onderaan dit blogartikel vind je een filmpje waarin ik alle 3 de manieren voordoe.

In de onderstaande screenshots zie je hoe deze blog er aan de ‘achterkant’ van je website uitziet (waar je je blog of pagina bewerkt in WordPress). Je switcht tussen de visuele editor en de teksteditor door rechtsboven je tekst te klikken op ‘visueel’ of ’tekst’.

1. Tussenkoppen maken via de visuele editor

Weergave in tekst- of HTML editor

WordPress laat standaard de visuele editor zien. Wil je een tussenkop invoegen en gebruik je deze wysiwyg editor, selecteer dan de tekst die je als tussenkop wilt gebruiken. Klik linksboven de tekst op Paragraph (Engelstalige versie van WordPress) of Alinea (Nederlandstalige versie). Hier kan je kiezen uit een aantal voorgedefinieerde opties voor tekstopmaak. De geselecteerde tekst krijgt nu de opmaak van een tussenkopje.

WordPress biedt de volgende opties voor tekstopmaak.

• NL: Alinea, Koptekst 1 t/m Koptekst 6 en Vooraf opgemaakt.
• EN: Paragraph, Heading 1 t/m Heading 6 en Preformatted.

Normaal gesproken is Heading 1 het grootste en Heading 6 het kleinste. Heading 1 gebruikt WordPress automatisch voor de titel van je blog of pagina.

NB: Koptekst 1 gebruik je dus nóóit als tussenkop.

Links zie je een screenshot van de Engelstalige WordPress. Rechts zie je hoe het invoegen van een koptekst werkt in de Nederlandstalige versie.

2. Tussenkoppen invoegen in Gutenberg

In Gutenberg is het zo mogelijk nog eenvoudiger om tussenkoppen in te voegen. Je kan natuurlijk ook html gebruiken (optie 3), maar waarom zou je? Bij mij werken de sneltoetscombinaties (optie 4) in Gutenberg niet.

3. Heading tags als HTML invoegen

In plaats van de visuele editor te gebruiken, kan je een tussenkop ook rechtstreeks in HTML creëren. Afhankelijk van je voorkeur en ervaring kan dit een snellere optie zijn. Via het tabje Tekst kan je de hele tekst in HTML schrijven of bewerken.

NB: Deze manier werkt ook in andere editors en is dus niet specifiek voor WordPress.

Om een tussenkop in te voegen, zet je de tekst van de tussenkop simpelweg tussen zogeheten heading tags zoals <h2> en de afsluitende tag </h2>. Hierboven bij het screenshot van de teksteditor zie je hoe een tussenkop er in HTML uitziet.

Behalve h2 kan je ook andere koppen toevoegen. Net als bij de visuele editor lopen de opties van kop 2 tot 6. Je gebruikt respectievelijk <h2>, <h3>, <h4>, <h5>, of <h6> om je kop naar keuze in te voegen. Vergeet niet om altijd de afsluitende heading toe te voegen; anders ziet WordPress de hele alinea aan voor een tussenkop.

4. Sneltoetsen gebruiken om heading tags in te voegen

De laatste methode is misschien nog wel de snelste manier, alleen moet je wel de toetsencombinaties onthouden. Voor gewone tekst heb je geen sneltoets nodig. Om een tussenkop te maken, selecteer je de tekst van de kop. Daarna geldt:

• Shift + Alt + 2 = heading tag 2
• Shit + Alt + 3 = heading tag 3 (enzovoorts)

NB: Met Gutenberg lijken deze sneltoetsen niet meer te werken.

Heading tag definiëren in CSS

Veel ondernemers gebruiken geen voorgedefinieerde tussenkoppen in hun tekst. In plaats daarvan zijn het bijvoorbeeld vetgedrukte zinnetjes. Of ze gebruiken h6.

Als ik dan vraag waarom ze dat zo doen, is het antwoord soms: “Joh, h2 is even groot als de titel. Nou ja, misschien iets kleiner. Maar ik vind de opmaak gewoon niet mooi.”

Dit antwoord duidt meestal op een stukje onwetendheid (en soms op gemakzucht!). De opmaak van een koptekst ligt in zoverre vast dat deze bij het opleveren van je website is gedefinieerd. Vind je de opmaak lelijk, vraag dan je webbouwer om de opmaak van de headings in je stylesheet aan te passen. En als je dit zelf kan doe dat dan een keer. Voor dit artikel gaat het te ver om dat stap voor stap uit leggen.

Op zich benadeel je niet de lezer als je vetgedrukt of h6 blijft gebruiken. Je redenering is immers ‘dat dat er beter uitziet’. Maar de zoekrobot schenkt veel meer aandacht aan h2 dan aan een vetgedrukt zinnetje of een stukje h6. Je doet dus jezelf tekort!

Je hoeft koppen maar één keer te definiëren in style.css. Pas je bijvoorbeeld de lettergrootte van h2 aan, dan geldt die opmaak voor alle h2 headings op je website.

Wat je moet onthouden over heading tags

• WordPress reserveert Koptekst 1 (Heading 1 of h1) voor de titel;
• Gebruik voor een standaard tussenkop Koptekst 2 (Heading 2 of h2);
• Voor subkoppen binnen een alinea is Koptekst 3 (Heading 3 of h3) geschikt;
• In feite heb je Koptekst 4, 5 en 6 (Heading 4, 5 en 6, of h4, h5 en h6) niet nodig;
• Werk je in de HTML editor? Vergeet de afsluitende heading tag </h2> niet.

Gebruik jij al tussenkoppen om je teksten beter leesbaar en vindbaar te maken?

Ook interessant voor je:

• Filter jezelf uit de Google Analytics statistieken
• Free publicity krijgen met je zakelijke blog
• Dick Bruna: de 4 voordelen van een proeflezer