Webrichtlijn 13, 14 & 15: Beschrijvende markup, kopregels
Schrijf zowel grammaticaal correcte, als beschrijvende markup. (R-pd.3.1) Gebruik markup voor kopregels die de hiërarchie van de informatie op de pagina uitdrukken. (R-pd.3.2) Sla in de markup geen niveaus in de hiërarchie van kopregels over. (R-pd.3.3)
De webrichtlijnen leggen veel focus op semantische markup. Validiteit wordt even aangehaald (hoewel dat niet hetzelfde is als well-formedness). Gestreefd wordt naar zowel grammaticaal correcte (valide) als beschrijvende (semantische) markup. Ik denk dat we validiteit al aardig besproken hebben, dus laten we meteen beginnen met semantiek en kopregels.
In HTML 4.01 hebben we de keuze uit <h1>, <h2>, <h3>, <h4>, <h5> en <h6>, waarmee we de hiërarchie van de informatie op een pagina kunnen uitdrukken. Volgens de webrichtlijnen mogen we geen niveau overslaan op een pagina. Hoeveel CMS'en volgen die richtlijn ook echt?
Wat doe jij meestal met de <h1>? Zet je het logo van een site wel eens op het hoogste niveau (zoals hier op fronteers.nl)? Waarom wel/niet? En gebruik jij wel eens meerdere <h1>'tjes op 1 pagina?
Geef je navigatiemenu's ook altijd een kop? En hou je daarbij rekening met de hiërarchie in de pagina, of zet je daar soms stiekem gewoon een <h6> boven? :)
Zijn er trouwens SEO experts die meelezen en hierover nog iets kunnen vertellen? Hoe belangrijk vinden zoekmachines een goede koppenstructuur? En is het echt zo dat (verborgen) koppen boven een menu de overige kopjes op datzelfde niveau in een pagina minder belangrijk maken? En wat vindt de SEO wereld van bijvoorbeeld <h2><img src="..." alt="Koptekst"></h2>?
Tot slot: wat vinden we van toekomstige oplossingen die bijvoorbeeld XHTML 2 en HTML 5 voor ogen hebben?
Reacties
- 1 Krijn op 11-03-2008 om 11:20 uur:
- (Lekker leesbare URI trouwens :+)
- 2 Marc op 11-03-2008 om 12:12 uur:
- Vooral wat betreft de H1 ben ik er eerlijk gezegd nog niet helemaal uit wat ik het beste vind.
De vraag is of de H1 gebruikt moet worden voor de site-titel (en dus door de hele site gelijk is) of voor de paginatitel. De uitleg op webrichtlijnen.nl lijkt voor de tweede optie te kiezen, maar hoe geef je dan semantische mark-up aan je site-titel?
Misschien is in verband met SEO het wel het beste om per site te kiezen voor een van de twee opties. Als je een webshop maakt met productpagina's die stuk voor stuk gevonden moeten worden, lijkt het mij beter om de paginatitel (hier de productnaam) als H1 te markeren. Bij een actie-site, waar je graag wilt dat bezoekers op de homepage binnenkomen, zou ik de H1 voor de site-titel gebruiken.
Overigens lijken de webrichtlijnen niet te verbieden dat je meer dan 1 H1 gebruikt: "De <h1></h1> tags worden gebruikt voor de belangrijkste kopregel(s) op een pagina." Maar of dat nou goed is voor je SEO... - 3 Vasilis op 11-03-2008 om 13:11 uur:
- H1 gebruik ik alleen op de homepage, elke dieper liggende pagina heeft een andere functie en dus een andere titel en dus een andere H1. Lijkt me nogal logisch. De naam van deze website is toch niet het belangrijkste element op deze pagina? Dat is toch gewoon de titel van dit artikel? Wat mij betreft kan het logo zelfs helemaal onderaan de HTML staan.
Zelfs als je meerdere H1's gaat gebruiken zou ik het logo hier niet in zetten. En op deze pagina zie ik ook geen andere H1. - 4 Krijn op 11-03-2008 om 13:16 uur:
- @Vasilis: En wat zou je op /blog en /blog/categorieen/webrichtlijnen de
<h1>maken in dat geval? Of vind je dat op die pagina's de<title>nogmaals terug moet komen in de pagina zelf? - 5 Vasilis op 11-03-2008 om 13:21 uur:
- Op /blog kan wat mij betreft het logo in de H1 staan. Eventueel met 'Het blog van Fronteers' in het alt-attribuut. Want dat is wat er op die pagina staat.
- 6 Vasilis op 11-03-2008 om 13:27 uur:
- Overigens ben ik er niet helemaal uit of ik een plaatje met alt in de H1 wel voldoende vind. Volgens mij wordt de alt niet altijd getoond als plaatjes niet beschikbaar zijn. En ik weet ook niet of zoekmachines dezelfde waarde toekennen aan een alt als aan een stuk tekst.
- 7 Krijn op 11-03-2008 om 13:29 uur:
- Hoe dan ook, 'Het blog van Fronteers' opnemen in de
alt=""lijkt me totaal niet de bedoeling. Kom maar even op IRC, zodat we je kunnen slappen ;) - 8 Kilian Valkhof op 11-03-2008 om 13:45 uur:
- Het grote semantische vraagstuk over de <h1> hier is of je de site als geheel ziet, of elk document als een op zichzelf staand document.
Ik geloof dat in 99% van de gevallen dat laatste niet opgaat, en daarom zet ik altijd de sitenaam in de h1, en de pagina titel in een h2.
Overigens, een stapje verder, hebben mensen hier ook voor zichzelf een max. per h-element op een pagina? in het kader van SEO is één H1 het best, maar hoe doe je dat met h2, h3 en verder?
Ikzelf gebruik meestal h1 en h2 slechts één keer per pagina, tenzij een pagina het echt over twee onderwerpen heeft, in dat geval twee keer een h2 (3 hoofdonderwerpen op één pagina kan niet en moet in meerdere pagina's gesplitst worden). H3 kan je wat mij betreft rond de 10 keer gebruiken, en alles daaronder maakt niet zoveel uit.
Overigens ben ik wel geinteresseerd in het alt tekst vs. gewone tekst in een h1 SEO verhaal, kan iemand hier licht op werpen? - 9 Ronald van den Boogaard op 11-03-2008 om 14:42 uur:
- Ik doe exact hetzelfde als Kilian. Echter de h1 als echte tekst met een image replacement vanuit de css.
Lijkt SEO-gewijs goed te werken. - 10 Sander op 11-03-2008 om 15:06 uur:
- Voor zover mij bekend is ziet Google de koptekst in <h1><img src="" alt="Koptekst"></h1> niet als minder waard dan in <h1>Koptekst</h1>.
Als het logo dan ook betekenis heeft (wat naar mijn mening bijna altijd zo is), dan hoort dit dus ook een <img> te zijn (dus precies zoals hier bij fronteers), en niet een platte tekst die met een van de vele image replacement technieken wordt verborgen. (Die geven bovendien vaak ellende met toegankelijkheid e.a.)
In z'n algemeenheid schrijf ik semantische code en laat het aan de zoek machines over om deze juist te interpreteren. Dit werkt op de lange termijn veel beter dan bewust proberen om Google te slim af te zijn; dat laatste is een niet-aflatende race, terwijl de eerste methode je bij elke verbetering in de logica van Google betere resultaten zal geven.
Ik ben van mening dat het hele <h1> per pagina/site verhaal minder interessant is, maar wat ik persoonlijk altijd doe is om elke pagina een <h1> met de naam/titel van de site te geven. (Tenminste zolang de site een logisch geheel vormt.)
Ik zie de volledige site dan als "document" (met een h1 titel, die vervolgens overal wordt herhaalt omdat je tenslotte niet met een papieren document werkt), met elke pagina als "hoofdstuk" (met een h2 titel uniek voor die pagina; en misschien ook een herhaalde h2 "inhoudsopgave" (navigatie)).
Maar zolang je als developer bewust een keuze maakt voor het wel of niet gebruiken van <h1> ben ik ook van mening dat het minder uitmaakt wat die keuze is.
Het is alleen een probleem als iets gedaan wordt zonder over de semantische betekenis nagedacht te hebben. - 11 Blaise Kal op 11-03-2008 om 15:53 uur:
- Alt tags worden minder belangrijk gevonden dan tekst omdat alt tags in het verleden vaak is misbruikt om keywords mee te spammen. Je kan er namelijk inzetten wat je wilt zonder dat de bezoeker er last van heeft. Met CSS kan dit ook (image replacement techniek), maar dat is minder populair en minder goed te herkennen, dus dat werkt nog.
Over h1 en h2: Wat je ook doet, gebruik niet meerdere h1's, dat vinden zoekmachines niet leuk. Zie http://www.seomoz.org/ugc/h1s-and-h2s-the-right-tool-for-the-job
Zelf doe ik ook hetzelfde als Kilian.
Maar wat doe je dan met de titels van subsecties, zoals hier het archief, de categorieën en de feed?
Een h2 (zoals hier) is logisch voor de hiërarchie, maar qua SEO is een h2 wel erg belangrijk. Moet je dan deze subsecties even "hoog" plaatsen als de titel van het artikel? Een h3 zou betekenen dat het onderdeel is van het artikel, dus dat klopt ook niet.
Dat is een kwestie waar ik soms mee zit. Meestal gebruik ik dan toch een h2, en in sommige gevallen een dl. - 12 Ruben op 11-03-2008 om 18:07 uur:
- Wat mij betreft komt de H1 overeen met de title. H1 zegt dus iets over het document, niet over de site. En dus alleen op de homepage pak je H1 voor logo/site titel. Ben het dus eens met Vasilis in dit geval.
Kilian: wat je zegt vind ik verwarrend. Natuurlijk staat een document niet op zich, maar om de belangrijkste header van een doc de naam van de site te geven, vind ik een slecht plan. Dit lijkt me ook een heldere uitleg in dit geval:
http://www.w3.org/QA/Tips/Use_h1_for_Title
Daar wordt overigens ook letterlijk van "first-level heading of a document" gesproken, terwijl het hier:
http://www.w3.org/TR/html401/struct/global.html#edef-H1
nog iets vager wordt gehouden ;)
img binnen H1 zetten lijkt me raar, ik denk dat zoekmachines dat in ieder geval niet interpreteren zoals je zou willen (extra waarde voor de ALT tekst).
Voor navigatiekoppen gebruik ik H3, in het geval er geen belangrijkere content is (op blogs is dat meestal zo), anders H4 of H5 (op sites met meerderen content items op 1 pagina). - 13 Colin Meerveld op 12-03-2008 om 10:03 uur:
- Om maar gelijk met de deur in huis te vallen. Elke pagina op je website kan de startpagina van je bezoeker zijn! De vraag of je H1 dan de titel van de site moet noemen of het document is lastig. persoonlijk lijkt het mij dat je H1 altijd de document titel moet geven. De pagina waar je op dat moment zit gaat over het document titel en niet over de site. Om verwarring te voorkomen. Elke document is verplicht 1 of meerdere h1 elementen te hebben. Dit kun je gewoon na lezen op het w3c ("h2 should follow h1"). Ik ben geen voorstander om meerdere H1 te gebruiken maar is niet per definitie fout.
Ik ben geen SEO expert maar dat een ALT-tekst minder gewaardeerd wordt lijkt mij onzin.
Het menu item een koptekst geven is een interessante vraag. semantisch gezien zegt de koptekst over het stuk eronder bv. een alinea. Bij een menu item zegt de koptekst iets over de links eronder. Dit lijkt mij dus correct. Als we het toch over SEO hebben zou ik dit laatste niet aanraden. de kopteksten zijn 1 van de belangrijkste elementen in de pagina. stel dat je een menu item archief, categorieën en feeds hebt. deze 3 elementen worden steeds als belangrijke content gezien maar wil je helemaal niet op gevonden worden. Ik ben daarom een voorstander om voor menu items geen kopteksten te gebruiken als het gaat om SEO. Als het gaat om toegankelijkheid ben ik juist een voorstander van kopteksten voor menu items. Mensen met een visuele of motorische beperking navigeren aan de hand van de kopteksten (idd het is nooit zwart/wit je moet altijd een afweging maken). Een screenreader gebruiker vraagt bijvoorbeeld een lijst met kopteksten op om snel door de website te navigeren. door kopteksten als menu item te gebruiken zal hij snel naar de juiste items kunnen gaan. Dit laatste is ook de rede om geen kopteksten over te slaan. Sommige screenreaders gebruikers geven aan welk level de koptekst is. als een screenreader aangeeft dat er geen h2 koptekst is zal de gebruiker ook niet verder zoeken naar h3. - 14 Marcel op 12-03-2008 om 10:31 uur:
- De H1-tag gebruik ik voor het logo en de bijhorende slogan (indien aanwezig) van een website. Keywords hierin zijn belangrijk. Deze H1-tag komt terug op iedere vervolg pagina. Een logo geef ik het liefst weer als plaatje, deze wordt dan makkelijker geindexeerd binnen image-zoek functies van bijvoorbeeld Google.
Menu's beschrijf ik middels een paragraaf (P-tag) omdat het niet een hoofdstuk is. Het menu wordt wel gescheiden van de overige content door of gebruik te maken van fieldsets (vind ik meer iets voor formulieren eigenlijk) of HR-tags. Deze zijn niet noodzakelijk zichtbaar voor de standaard gebruiker.
Daadwerkelijke content van een pagina wordt wel beschreven middels H-tags, de H1 misbruik ik verder niet meer en ik begin met de H2-tag.
Bijvoorbeeld:
H1: Website naam + slogan
H2: Pagina titel (eg: "Nieuws overzicht")
H3: Opsomming van items (eg: de titels van nieuws artikelen)
H4: Extra titels in nieuwsbericht
H5: Extra titels binnen een H4
Daarnaast heb je nog de aller hoogste "H-tag", de TITLE-tag. Deze doet eigenlijk hetzelfde als mijn H1 en H2 tags samen. Dus: "Nieuws artikel hier - Websitenaamhier", waarbij het belangrijk is de pagina voor de site naam te plaatsen - bookmark labels hebben vaak een beperkte lengte, de omschrijving van een bookmark plaats ik liever aan het begin van de titel. Da's direct handig als mensen besluiten je site op te nemen in social bookmark sites als del.icio.us en stumbleupon, etc.