.NET CMS DNN

Online marketing blog

Anonym
/ Categorie: Online marketing
Gestructureerde DOM in DNN

Gestructureerde DOM in DNN

De outline van een HTML-document is de kern van zoekmachineoptimalisatie. Voor SEO zijn de HTML5-elementen, die van invloed zijn op het structureren van het Document Object Model (DOM), van belang. Naast semantisch HTML biedt schema.org de mogelijkheid om objecten aan elkaar te koppelen, het zogenaamde semantisch web. 

 

Waarom is het DOM voor SEO belangrijk?

Het DOM toont wat door zoekmachines zoals Google wordt geïndexeerd. Google haalt de website op bij de server en interpreteert vervolgens het DOM. De wijze waarop het DOM wordt opgebouwd, is afhankelijk van de Content Models die het W3C voorschrijft.

In HTML4.1 werd een website meestal opgebouwd uit nietszeggende elementen, zoals een div. Een typische outline van het DOM zag er als volgt uit:

DOM Outline met HTML4.1

Hierdoor was het voor zoekmachines niet direct duidelijk welke stukken content op de website bij elkaar horen. De enige manier om dit te achterhalen was aan de hand van headingcontent (h1, h2 etc.). Als webmaster wil je echter dat zoekmachines snappen welke content bij elkaar hoort. Daarvoor is HTML5 geïntroduceerd.

 

Content Models en DOM outline

Om een DNN-skin semantisch te maken, is het van belang om te weten wanneer welke contentvorm wordt gebruikt. Het W3C maakt onderscheid in 7 contentvormen:

Content vorm Elementen
Metdata content Elementen zoals meta, script, style, title.
Flow content Bijna alle elementen in de body.
Sectioning content Content dat een sectie aantoont: article, aside, nav & section.
Heading content De header van een sectie: h1, h2, etc.
Phrasing content Tekst van het document, zoals mark, small, span, strong.
Embedded content Content uit externe bronnen, zoals: iframe.
Interactive content Content speciaal voor interactie: video, button, input etc.

Voor de outline van het DOM zijn met name sectioning- en headingcontent van belang. Sectioningcontent geeft de functie van een bepaald element aan. Headingcontent kent waarde toe aan de sectioningcontent. Bij het opbouwen van een webpagina zal je bewust moeten zijn onder welke contentvorm een bepaald element valt.

 

DOM outline manipuleren

Het kan voorkomen dat je sectioningcontentelementen gebruikt waarbij niet direct een h1 of h2 aan kan worden toegekend. Een voorbeeld daarvan is de primaire navigatiebalk op een pagina. Om een navigatie semantsich te maken, schrijft het W3C voor om een <nav> te gebruiken met daaromheen een <header>. Echter dient sectioningcontent altijd gepaard te gaan met headingcontent. In dit geval levert dat een probleem op; je wilt namelijk geen titel in je navigatie. 

Zodra sectioningcontent niet gepaard gaat met headingcontent levert dit een "Untitled Section" op. Om de "Untitled Section" te vervangen voor een logische term, zal je een <h1>, <h2> of een andere heading moeten gebruiken. Ofwel, als je een <header>, <section> of <nav> plaatst, moet dit gepaard gaan met een <h1>, <h2> of een andere heading.

DOM Outline van Idas.nl

Niet altijd kan of wil je een <h1> of <h2> gebruiken op een pagina. De pagina wordt overvol of het past simpelweg niet in het design. Om toch de regels van het W3C na te leven, wordt in CSS vaak gekozen om headingelementen binnen sectioningcontent 1px bij 1px te maken:


.dnn {   

    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;

}

 

Dit is tevens een veelgebruikte manier om de <header> van een pagina headingcontent toe te kennen:

NS:

Screenshot DOM van ns.nl

BOL.com:

Screenshot DOM van bol.com

DotNetNuke.nl:

Screenshot DOM van DotNetNuke.nl

Op deze manier blijft de header gecombineerd gaan met headingcontent. Beginnen met een h1 in een HTML-document is dus onzin (!). De h1 wordt toegekend aan de belangrijkste titel van de pagina, niet altijd als eerste. Een h1 kan zelfs vaker voorkomen als je gebruik maakt van <article> en <section>.

DOM outline testen

Om de outline van het DOM te bekijken, kan je de plugin HTML5 outliner gebruiken. Door deze te installeren in Chrome, kan je direct de outline van het HTML document zien:

Screenshot outline van DotNetNuke.nl

Zo kan je direct testen wat de consequenties zijn van het toevoegen van HTML5-elementen om uiteindelijk het gewenste doel te bereiken.

Enthousiast geworden? Mis niets met de maandelijkse DNN nieuwsbrief!

Delen

Printen

Laat een reactie achter

Naam:
Email:
Reactie:
CAPTCHA Afbeelding
Vul de bovenstaande code hieronder in
Reactie toevoegen
Firelux
Websites
Firelux

Firelux is een zeer schone brandstof voor verplaatsbare petroleumkachels. Deze brandstof is opgebouwd uit extreem zuivere, doorgeraffineerde aardoliedestillaten.

Bekijk project
Bekijk alle showcases
Vindjeruimte
Maatwerk
Vindjeruimte.nl

Vindjeruimte is een online platform dat vraag en aanbod van het maatschappelijk vastgoed bij elkaar brengt. Op de website kun je eenvoudig een ruimte of accommodatie vinden en boeken. Het complete platform wordt door diverse gemeenten en organisaties gebruikt als reserveringssysteem.

Bekijk project
Bekijk alle showcases
Olympos
Websites
Sportcentrum Olympos

Sportcentrum Olympos is een ruime en veelzijdige sportaccommodatie. Met de meertalige webshop die Idas voor Olympos heeft gerealiseerd, kunnen gebruikers online lessen boeken en betalen. Gevolg van de webshop is een forse besparing, gezien de boekingen niet meer handmatig hoeven te worden aangenomen en verwerkt.

Bekijk project
Bekijk alle showcases
Discovered
Websites
Discovered

Discovered staat voor een breed assortiment van exotische groenten en fruit. Op deze website worden recepten en producten door middel van een catalogus getoond. Gebruikers kunnen o.a. filteren op thema, ingrediënt, aantal personen en moeilijkheidsgraad. Tevens worden er gerelateerde recepten getoond.

Bekijk project
Bekijk alle showcases
Solutions
Websites
Solutions Center

SolutionS is een private verslavingszorginstelling en biedt een integrale behandeling voor doserings- en verslavingsproblemen. De behandeling is gebaseerd op het 12 Stappen Minnesota Model in combinatie met zowel inzichtgevende en lichaamsgerichte therapie als cognitieve groepstherapie.

Bekijk project
Bekijk alle showcases
Gently
Websites
Gently

Gently produceert reinigings- en onderhoudsproducten voor caravans, campers en boten. De website is in 2 talen beschikbaar en is een showcase van de verschillende lijnen die dit merk vertegenwoordigt.

Bekijk project
Bekijk alle showcases
KMU
Websites
Koninklijke Metaalunie

Koninklijke Metaalunie is met meer dan 13.000 leden de grootste ondernemersorganisatie voor het midden- en kleinbedrijf (mkb) in de metaal. Idas heeft de nieuwe site ontworpen en gebouwd.

Bekijk project
Bekijk alle showcases
FishMasters
Websites
FishMasters

Speciaal voor de internationale markt biedt Fishmasters een deelassortiment aan met het Pure Fish Label. Producten met dit label bevatten geen e-nummers, geen kleurstoffen, geen conserveringsmiddelen, noch smaakstoffen. De website is opgeleverd in 6 talen.

Bekijk project
Bekijk alle showcases
Sallandsche
Websites
Sallandsche Golfclub 'De Hoek'

In opdracht van Sallandsche Golfclub 'De Hoek' heeft Idas deze website ontworpen en gebouwd. De baanconditie op de homepage is tevens gekoppeld aan de (tevens door Idas geproduceerde) iPhone App.

Bekijk project
Bekijk alle showcases
GVG
Websites
GVG Oliehandel

GVG Oliehandel: internationaal actief in alles wat met benzine, olie en reiniging te maken heeft. Idas heeft deze responsive website gerealiseerd in meerdere talen. Doel is het etaleren van de 6 merken die GVG vertegenwoordigt.

Bekijk project
Bekijk alle showcases