.NET CMS DNN

Online marketing blog

Robert-Jan Kuyper
/ 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
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
NJO
Websites
Noordwijkse Jeugd Open

Op de website van de Noordwijkse Jeugd Open kunnen jongeren zich inschrijven voor dit golftoernooi. Hierdoor kan de organisatie van NJO de inschrijvingen in veel kortere tijd verwerken. Deze website is volledig responsive en daardoor geoptimaliseerd voor mobiel gebruik.

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
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
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
butter
Intranet & Extranet
Butter Group International Transport

Idas is al jaren software leverancier voor Butter Group. Butter is gespecialiseerd in het transport van agrarische producten in geïsoleerde onderlossers door heel Europa. De vernieuwde responsive website is in 6 talen beschikbaar en draagt bij aan de professionalisering van dit internationale bedrijf.

Bekijk project
Bekijk alle showcases
Aspen
Websites
Aspen Benelux

Het bedrijf Aspen werd in 1988 opgericht aan de kust van het Aspen meer ten noorden van Göteborg in Zweden. Aspen is in veel Europese landen en Canada vertegenwoordigd en is hiermee wereldmarktleider in alkylaatbenzine. Idas heeft deze meertalige website voor Aspen ontwikkeld.

Bekijk project
Bekijk alle showcases
VvOCM
Websites
VvOCM - de Oefentherapeut

De Vereniging van Oefentherapeuten Cesar en Mensendieck is de beroepsvereniging van oefentherapeuten. Idas heeft deze website ontworpen en gebouwd. Het besloten deel van de website telt honderden leden. Leden kunnen producten bestellen, zich inschrijven voor events, deelnemen aan forumdiscussies en elkaar opzoeken in een locatiezoeker.

Bekijk project
Bekijk alle showcases
Hovenschool
Websites
OBS de Hovenschool

De Hovenschool is een openbare basisschool, die deel uitmaakt van de stichting Openbaar Onderwijs Deventer. Dit betekent dat zij open staan voor alle kinderen uit de wijk, ongeacht hun achtergrond of levensovertuiging.

Bekijk project
Bekijk alle showcases