Een inhoudsopgave is een enorm handig iets wanneer je groteren pagina’s hebt op je blog en het soms te lang is om overzicht te houden en om zo eventjes te scrollen. Dan is een inhoudsopgave maken een eenvoudige manier om aan dit probleem op te lossen. Daarnaast heeft het ook SEO voordelen.
Inhoudsopgave
Waarom je een inhoudsopgave moet hebben
Het hebben van een inhoudsopgave op sommige webpagina’s vergroot het gebruiksgemak enorm. Zij navigeren dan eenvoudig en snel door je pagina heen. Het is dan ook alleen verstandig om een inhoudsopgave toe te voegen op langere pagina’s anders heeft het weinig toevoeging.
Daarnaast breng je een aantal linkjes aan op je pagina, iets wat Google fijn vind. Het kan ook zijn dat er extra linkjes ontstaan onder je zoekresultaten. Bezoekers hoeven dan niet helemaal te zoeken naar dat deel maar kunnen er direct heen.
Hoe doe je dat? Een inhoudsopgave maken
Voordat je daadwerkelijk kan gaan beginnen is het belangrijk dat je een aantal dingetjes op een rijtje hebt. Het begint bij het in je hoofd hebben van wat je allemaal in je inhoudsopgave wilt verwerken. Zijn dat alle koppen of slechts een aantal. Voor mijn SEO stappenplan heb ik er bijvoorbeeld bewust voor gekozen alleen de H2 en H3 koppen te verwerken. Toen ik het testte met ook met H4 koppen merkte ik dat het juist onoverzichtelijk werd. Niet alleen tijdens het maken was ik het bijna kwijt maar ook toen ik de pagina bezocht was het rommelig. Kijk dus goed van te voren hoe je het precies aan wilt gaan pakken.
Daarnaast zul je een klein beetje in de code van je blog of pagina moeten gaan werken. Is dat lastig? Totaal niet, het is belangrijk dat je goed weet hoe je pagina ingedeeld is en dat je verder niets aanpast. Je zou er ook een plugin voor kunnen gebruiken. Die zullen ongetwijfeld bestaan. Echter heb je voor zo iets eenvoudigs geen plugin nodig, zeker wanneer je weet dat dit je website wel zal vertragen.
Stappenplan inhoudsopgave maken
Wanneer je een inhoudsopgave gaat maken in WordPress zul je voordat je begint twee stukje code moeten hebben en deze vervolgens ook deels weten hoe ze zijn opgebouwd. Zoals je hieronder ziet heb je twee codes. Code 1 is voor de inhoudsopgave zelf en code 2 zet je neer op de pagina waar wilt heen gelinkt wordt.
Code 1 heeft drie mogelijkheden om zelf iets toe te voegen. De eerste is de alt-tag, dit is wat je ziet wanneer je met je muis over de link gaat. Dit heeft ook SEO voordelen.
Vervolgens heb je de link, deze begint altijd met een hastag. Deze wordt namelijk wanneer je er op klinkt achter de URL geplaatst. Vervolgens zoekt je browser naar het stukje code in de tekst met deze link. Daarom vul je bij code 1 en code 2 dezelfde link. Bij code 2 voeg je echter geen hastag toe, de tekst is wel hetzelfde.
Bij tekst voer je de tekst in die je wilt die mensen aan de voorkant zien.
Om het iets te verduidelijken geef ik je een voorbeeld. Voor het voorbeeld maak ik een inhoudsopgave voor deze pagina. Ik ga nu de stukje code maken voor de stappenplan deel van deze pagina:
<a title=”Inhoudsopgave stappenplan” href=”#stappenplan”>Stappenplan inhoudsopgave maken</a>
Dit ziet er vervolgens zo uit wanneer je het in de code plakt:
Stappenplan inhoudsopgave maken
Vervolgens heb ik het andere stukje code geplakt boven de het kopje ‘Stappenplan inhoudsopgave maken’. Dit stukje code ziet er zo uit:
<a name=”stappenplan”></a>
Vanaf de voorkant zie je hier niks van maar aan de achterkant staat een stukje code waar naar toe wordt gelinkt. Bij het maken van een inhoudsopgave werkt dit hetzelfde. Je plaatst in je inhoudsopgave de stukje code 1 en vervolgens zet je de stukjes code 2 boven de juiste koppen. Ik neem je mee aan het onderstaande stappenplan om jou inhoudsopgave ook zo op te bouwen.
Stukjes code die je nodig hebt (op de delen waar je zelf iets in moeten vullen vind je driemaal een 0):
<a title=”000″ href=”#000″>000</a>
<a name=”000″></a>
Let op: het kan zo zijn dat wanneer je in de code editor aan het werken bent er automatisch extra aanhalingstekens bij komen. Deze zorgen ervoor dat de linkjes niet meer werken. Verwijder deze dus altijd zodat ze er uit zien zoals in het voorbeeld.
Stap 1 Bepaal waar je inhoudsopgave moet komen
Voordat je kan gaan beginnen is het belangrijk dat je goed bepaald waar je inhoudsopgave moet komen. Je zult deze plaats namelijk moeten onthouden om vervolgens de code hiervoor te plaatsen. Weet je niet precies waar dit is zul je snel de weg kwijt zijn.
Stap 2 Plaats de code voor de inhoudsopgave
Wanneer je plek terug heb gevonden binnen de code editor kun je de code gaan plaatsen. Door dit netjes onder elkaar te doen zul je merken dat je beter het overzicht bewaart. Wanneer je de code hebt geplakt kun je hem in de visuele editor verder bewerken zodat de lay-out naar wens is. Zo kun je er bijvoorbeeld een lijst van maken.
Stap 3 Plaats de andere code voor de kopjes
Nu je inhoudsopgave gereed is kun je de andere stukjes code plaatsen voor de kopjes waar je naar toe dient te plaatsen. Zonder deze code weet je browser namelijk niet precies waar je heen moet linken.
Plaats deze stukjes code telkens voor de kopjes. Pas het stukje code wel aan naar wat je in je inhoudsopgave hebt ingevuld. Voeg vervolgens niet de hashtag toe anders werkt je inhoudsopgave niet.
