[SEO / Semantiek] Gebruik van H1-6

[geert1]

Algemeen bekend is dat Google de inhoud van H1-6 elementen ziet als titel en hier dus een bepaalde waarde aan verbindt. In een lopende tekst met meerdere niveau's is het dus logisch deze elementen te gebruiken voor de koppen en tussenkoppen, te beginnen met een enkele H1 en zo door te werken naar de lagere hierarchische niveau's. Allemaal beginnerswerk en hardstikke duidelijk tot dusver.

Mijn vraagstuk doet zich echter voor bij het volgende: Stel je hebt ook content-blokjes in de sidebar of footer van je website. Met bijvoorbeeld het laatste twitter-bericht erin, de laatste drie agenda-punten, een "neem contact op" blokje, of wat dies meer zij. Deze blokjes hebben vaak ook een titel, maar zijn niet direct gerelateerd aan de content op de pagina, en worden herhaald op vele (of alle) pagina's binnen een website. Vanuit SEO-opzicht is het dan wellicht verstandiger om deze elementen geen h1-6 element als titel te geven, maar juist een generiek element (div class="title" ofzo). Dit zodat de h1-6 elementen gereserveerd blijven voor de hoofd-content, en de waarde daarvan stijgt. Maar semantisch gezien zouden het weer prima h2's of h3's kunnen zijn, afhankelijk van hoe je het bekijkt.

Hoe zouden jullie dit aanpakken? Wel of geen H1-6 tags voor dit soort titels? Inzichten zijn welkom.

[MoietyMe]

H1-6 is bedoelt voor titels. Zelf gebruik het dan ook voor alles wat een titel is.

[Bosmonster]

Tip: Zet je CSS uit en kijk of je een fatsoenlijk leesbare structuur overhoudt.

[geert1]

Good Fella schreef op donderdag 16 september 2010 @ 14:15:
H1-6 is bedoelt voor titels. Zelf gebruik het dan ook voor alles wat een titel is.

Zo dacht ik tot voorkort ook, en semantisch gezien is daar ook zeker iets voor te zeggen. Maar vanuit SEO-oogpunt vind ik het toch waard om erover na te denken.

Bosmonster schreef op donderdag 16 september 2010 @ 14:18:
Tip: Zet je CSS uit en kijk of je een fatsoenlijk leesbare structuur overhoudt.

Dit is in het algemeen een goede tip, ook één van de richtlijnen die ik zelf aanhou. Maar ja, er valt toch over na te denken om de H1-6 tags weg te laten in dit geval. Maar ik sta open om overtuigd te worden naar welke kant van de discussie dan ook

[marty830]

Ik heb zelf een aantal maanden geleden ook raar opgekeken toen ik merkte dat ik "headers" gebruikte in mijn menu. Al is het maar een klein deel van de totale SEO, dat kon beter! Heb ze dus vervangen door, zoals je zelf ook al bedacht, generieke elementen. Uitzicht is ongeveer hetzelfde voor de gebruiker, niet voor Google! "Headers" dienen als ondertitels, gebruik ze ook zo.

[Bosmonster]

Accessibility > SEO

En als je site goed accessible is en goed leesbaar, zit het met de SEO over het algemeen ook wel prima. Accessibility laten schieten voor SEO is omgekeerde wereld.

[marty830]

Het één moet toch niet ten koste gaan van het ander?! Of je nu h1/h2/... een bepaalde stijl aanmeet of je geeft diezelfde stijl aan een generiek element... Geen bezoeker die er iets van merkt.

[Bosmonster]

marty830 schreef op donderdag 16 september 2010 @ 14:30:
Of je nu h1/h2/... een bepaalde stijl aanmeet of je geeft diezelfde stijl aan een generiek element... Geen bezoeker die er iets van merkt.

Je schrijft net het complete nut van semantiek af in 1 zin

Lees je eens in in "toegankelijkheid".

[ Voor 13% gewijzigd door Bosmonster op 16-09-2010 14:32 ]

[geert1]

marty830 schreef op donderdag 16 september 2010 @ 14:30:
Het één moet toch niet ten koste gaan van het ander?! Of je nu h1/h2/... een bepaalde stijl aanmeet of je geeft diezelfde stijl aan een generiek element... Geen bezoeker die er iets van merkt.

Hoe het er aan de voorkant uitziet is niet onderdeel van deze discussie. Je kunt bijna elk onderdeel er uit laten zien als een titel, doet niet terzake. We hebben het over Seo / semantiek / accessibility

[marty830]

Eu nee, ik heb het nu over bezoekers van vlees en bloed. Eender welke zoekrobot zal nog steeds kijken welke semantiek gebruikt is. Ik geef toe dat het niet de belangrijkste factor is voor een goede totale SEO, maar onbelangrijk zou ik het toch niet noemen.

[marty830]

geert1 schreef op donderdag 16 september 2010 @ 14:34:
[...]

Hoe het er aan de voorkant uitziet is niet onderdeel van deze discussie. Je kunt bijna elk onderdeel er uit laten zien als een titel, doet niet terzake. We hebben het over Seo / semantiek / accessibility

Klopt en ik heb reeds mijn mening gegeven: headers bewaren voor relevante inhoud. Dus niet in sidebars als deze inhoud op elke pagina staat.

[geert1]

@marty830: Okay, nu snap ik je mening pas, maar ik ben eigenlijk nu overtuigd van het tegendeel

@Bosmonster: Mijn gevoel zei dus ook altijd al dat h1-6 gewoon voor alle titels gebruikt konden worden, en dat blijf ik ook maar doen denk ik. Google zal vast ook wel merken dat bepaalde titels op elke pagina hetzelfde zijn (die in de sidebar bijvoorbeeld) en deze lager waarderen dan degenen die telkens uniek zijn en in relatie staan tot de hoofdcontent.

[ Voor 31% gewijzigd door geert1 op 16-09-2010 14:42 ]

[Bosmonster]

Relevantie van content en headers zelf hebben ook helemaal niks met elkaar te maken. Het gaat om het structuur en semantiek, dus het kunnen identificeren van content, en dat doe je met headers.

Er is blijkbaar een misvatting dat content onder een H6 minder belangrijk is dan content onder een H1. Terwijl waar het om gaat is als je een H3 hebt met daarin "Twitter" en dan een UL met twitter-berichten, dat die header dus semantisch gekoppeld is aan de inhoud van die UL.

Het belangrijkste waar je voor wilt zorgen is dat die structuur klopt, dus dat je bijvoorbeeld niet van een H2 naar een H4 springt, dat je de juiste elementen gebruikt zoals P-tags en lists, etc (zonder CSS dus, in je logische structuur). Dit is tevens onderdeel van de webrichtlijnen voor toegankelijkheid.

Als je voor je HTML zoveel mogelijk rekening houdt met accessibility (en dus semantiek), kun je voor SEO je voornamelijk focussen op content. Dit laatste is namelijk veel belangrijker voor SEO dan je html. De spiders zijn er toch wel op gemaakt om de grootste bagger door te spitten en daar relevantie uit te halen. Dus als je structuur klopt en je content ook heb je alles onder controle.

[ Voor 42% gewijzigd door Bosmonster op 16-09-2010 14:53 ]

[mcDavid]

Voor zo'n blokje kun je toch prima een <h5> ofzo gebruiken?

Ik weet niet hoe diep jouw content gaat, maar ik kom meestal al niet verder dan H3.
h1 voor de titel van de website (meestal in de header),
h2 voor de titel van de pagina
h3 voor tussenkopjes

Ik zou me nog kunnen voorstellen dat je h4 gebruikt voor titels van foto's e.d. in je content, maar vervolgens kun je h5 of h6 toch wel prima gebruiken voor de generieke contentblokjes waar jij het over hebt?

Lijkt me juist alleen maar beter, want dan geef je zelf eigenlijk al aan dat deze blokjes minder ter zake doen dan de "hoofdcontent" waarin je hogere h... elementen gebruikt.

[geert1]

@Bosmonster: Mooie eindnoot lijkt me, ik ben over

mcDavid schreef op donderdag 16 september 2010 @ 14:53:
Voor zo'n blokje kun je toch prima een <h5> ofzo gebruiken?

Ik weet niet hoe diep jouw content gaat, maar ik kom meestal al niet verder dan H3.
h1 voor de titel van de website (meestal in de header),
h2 voor de titel van de pagina
h3 voor tussenkopjes

Ik zou me nog kunnen voorstellen dat je h4 gebruikt voor titels van foto's e.d. in je content, maar vervolgens kun je h5 of h6 toch wel prima gebruiken voor de generieke contentblokjes waar jij het over hebt?

Lijkt me juist alleen maar beter, want dan geef je zelf eigenlijk al aan dat deze blokjes minder ter zake doen dan de "hoofdcontent" waarin je hogere h... elementen gebruikt.

h1 voor de titel van je website moet je niet doen. De hoofdtitel is de titel van de pagina, dat is waar de bezoeker voor op je pagina komt. Dat wordt dus een h1, en de website-titel staat wel (achteraan) in je title-tag.

Verder ben ik het wel met je eens dat je het eerstvolgende diepteniveau gebruikt die nog niet in je pagina zit. Dus h4 als je h1-3 al in gebruik hebt op die pagina. Maar omdat de pagina's uit een cms komen, weet je dat nooit precies vantevoren.

[ Voor 95% gewijzigd door geert1 op 16-09-2010 15:46 ]

[Bosmonster]

h1 voor de titel van je website moet je niet doen. De hoofdtitel is de titel van de pagina, dat is waar de bezoeker voor op je pagina komt. Dat wordt dus een h1, en de website-titel staat wel in je title-tag.

Je hebt gedeeltelijk gelijk. De H1 wil je inderdaad de titel van je pagina, maar de browser-title wil je ook specifiek hebben per pagina. Over het algemeen dus iets als "websitenaam - paginatitel", of een andere variatie.

[geert1]

Klopt, ik heb 'em even ge-edit. De meeste stemmen gaan op naar het plaatsen van de artikel-naam vóór in de title-tag, gevolgd door eventueel een korte categorie-aanduiding of iets in die trant, om vervolgens af te sluiten met de website-titel achteraan. Vind ik zelf ook de meest logische volgorde. Maar dit gaat off-topic

[MoietyMe]

Een pagina met bijvoorbeeld een nieuwsbericht maak ik altijd zo:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Nieuws titel - Nieuws - Websitenaam</title>
    </head>
    <body>
        <div id="root">
            <div id="header">
                <a href="index.php" title="Websitenaam homepage">
                    <img src="images/websitenaam-logo.png" alt="Websitenaam logo" />
                </a>
            </div>
            <div id="page">
                <div id="content">
                    <h1>Het laatste nieuws</h1>
                    <h2>Nieuws titel</h2>
                    <p class="date">Donderdag 10 maart 1988</p>
                    <p><strong>Inleiding</strong></p>
                    <p>Tekst</p>
                    <p class="bron">Bron: <a href="http://www.nu.nl/" title="Bezoek Nu.nl">Nu.nl</a></p>
                </div>
                <div id="sidebar">
                    <div class="section">
                        <h2>Contact</h2>
                        <ul>
                            <li>[phone]</li>
                            <li><a href="mailto:[e-mail]" title="Stuur een e-mail naar [e-mail]">[e-mail]</a></li>
                            <li><a href="maps.google.nl/" title="Plan een route naar bedrijfsnaam">Tuinstraat 19, Veenendaal</a></li>
                    </div>
                    <div class="section">
                        <h2>Twitter</h2>
                        <!-- twitter -->
                    </div>
                </div>
            </div>
            <div id="footer">
                <p id="copyright">&copy; 3010 Bedrijfsnaam</p>
                <p id="credits">Webdesign door <a href="http://www.designeradres.nl/" title="Bezoek Designeradres.nl">designernaam</a></p>
            </div>
        </div>
    </body>
</html>

IMO is de sidebar niet ondergeschikt aan de content dus waarom zou ik daar dan een <h4> of <h5> moeten gebruiken? Het is gewoon een nieuw onderdeel in het document. Daar begin ik dus gewoon weer opnieuw. In HTML 5 mag je daar ook gewoon weer met een <h1> beginnen (als je <section> gebruikt dan).