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

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.

Heading tags en kopteksten

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.

https://vimeo.com/276433883/844b0fa0d1

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:

Interessant? Deel dit artikel zodat ook andere ondernemers ervan kunnen profiteren.

16 reacties op “CHEAT SHEET: alles over het invoegen van tussenkoppen (heading tags)

  1. Els schreef:

    Beste,

    Mooie heldere uitleg, maar ik heb nog een vraag. is er een bepaalde verdeelsleutel? Dus hoevaak gebruik je H1, H2 en eventueel H3 op 1 pagina of maakt dat niet uit?

    1. Jessie van Loon schreef:

      Ha Els, h1 alleen voor titel dus maar 1x per pagina. WordPress wijst paginatitel en kop van blog automatisch die h1 toe. Voor meeste tussenkopjes gebruik je h2. Hoeveel is afhankelijk van lengte bericht. H3 alleen inzetten als je een aantal items onder 1 h2 wilt hangen. Kan je hier mee uit de voeten? Succes met je teksten!

  2. Elsemieke schreef:

    Je hebt heel duidelijk beschreven waarom tussenkopjes noodzakelijk zijn. Ik gebruik ze zelf ook, maar niet voor iedere alinea.

    1. Jessie van Loon schreef:

      Ha Elsemieke, fijn dat het duidelijk is. Blog ze!

  3. Susan schreef:

    Handig, hoor! Ik ben ook fanatiek voorstander van kopregels, al is ’t alleen al voor de SEO. Maar voor de lezer is ’t ook veel prettiger; weet je meteen een beetje waar het over gaat wanneer je eerst scannend leest. Doe ik zelf namelijk wel bij blogs.

    1. Jessie van Loon schreef:

      Herkenbaar Susan, ook ik scan vaak eerst de tekst. Als ik weet wat ik zoek, haak ik af als ik niet snel (genoeg) weet of een artikel me het antwoord zal geven.

  4. CustÒdia Chineva schreef:

    Super duidelijk, vooral als je je blog duidelijk wil maken, deze tips zullen zeker van pas komen indien het nodig is… leuk blog

    1. Jessie van Loon schreef:

      Dankjewel Custòdia! Ja, tussenkoppen helpen echt bij het beter leesbaar maken van artikelen.

  5. Roland van Tilborg schreef:

    Hoi, goed en duidelijk uitgelegd. Zeker bruikbaar voor iedereen.

    1. Jessie van Loon schreef:

      Ha Roland, dankjewel!

  6. Rinette - GeldVoorNop schreef:

    In het begin van bloggen lette ik er helemaal niet op, maar inmiddels gelukkig wel. Ook heb ik oude berichten aangepast zodat ze beter te lezen zijn en meer aanspreken voor de lezer. Bedankt voor het fijne en uitgebreide artikel!

    1. Jessie van Loon schreef:

      Ha Rinette, super! Leuk dat je berichten er beter leesbaar mee geworden zijn.

  7. Nicole Orriëns schreef:

    Ja, ik gebruik ze altijd. Al was het maar vanwege de SEO.

    1. Jessie van Loon schreef:

      SEO is een aspect, maar zoals Rinette al aangeeft, leesbaarheid is ook een ding!

  8. Sylvia schreef:

    Ik probeer er idd wel op te letten ja..maar denk er niet altijd over na tijdens het schrijven

    1. Jessie van Loon schreef:

      Ha Sylvia, als je wat langer werkt met tussenkoppen, hoef je er op een gegevens moment echt niet meer bij na te denken (is mijn ervaring). Sterker nog, de tussenkoppen helpen mij om gestructureerder te schrijven en dat levert vaak betere blogs op. Succes!

Geef een reactie

Je e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *