• gepubliceerd
  • leestijd
    ± 16 minuten

4 voordelen van een gestructureerde website

Structuur aanbrengen op je website kan op veel verschillende manieren. Fleur legt uit welke voordelen dat op kan leveren.

Een pleidooi voor structuur binnen HTML en het labelen van webpagina’s. In dit blog beschrijft Fleur welke 4 voordelen een gestructureerde website kunnen hebben zowel voor zoekmachines maar ook om het jezelf makke­lijker te maken op het gebied van HTML structuur.

Logo wat HTML code teken uitbeeld

Waarom je structuur moet aanbrengen op je website

Structuur aanbrengen op je website kan op veel verschillende manieren. SEO-technisch gezien is een heldere sitestructuur met duide­lijke content optimaal. Deze structuur kan je toevoegen op allerlei niveaus: in je lay-out, in de manier waarop je een artikel opbouwt/schrijft, in je code en op een hoger niveau: de manier waarop je al deze dingen categoriseert. Bijvoorbeeld met Structured Data.

Wat is Structured Data?

Het initiatief schema.org heeft een methodologie opgezet waarmee je op verschillende manieren extra informatie kan meegeven aan je pagina’s en HTML-elementen. Structured data zorgt ervoor dat je informatie over je webpagina’s kan standaardiseren en classificeren. Dit kan je doen met bijvoorbeeld een script in JSON-LD (deze methode heeft Google’s voorkeur). Ook is het moge­lijk om kleine delen van je HTML te classificeren, zoals een locatie met straatnaam en postcode.

Je kan de term structured data ook heel breed nemen. Voor een deel zal ik dit in dit artikel ook doen.

4 voordelen van structuur op je website

  1. Google kan je website beter crawlen en indexeren.
    De google bots lezen datatypes en elementen uit. Op basis daarvan kunnen ze met hun knowledge graph betere zoekresultaten vertonen. Er is een zoekresultaat positie 0, hier plaatst Google samenvattingen voor informatie-queries van Google gebruikers. Als je hier terecht komt stijgt je zichtbaarheid en autoriteit.
  2. Door microdata en structured data toe te voegen help je ook gebruikers die assisterende technologie nodig hebben bij het browsen.
    Als je de HTML-elementen correct en semantisch logisch labelt lezen screenreaders en andere apparaten jouw webpagina’s veel gemakke­lijker. De pagina structuur, zoals bijvoorbeeld de stappen in een ‘tutorial’ worden hiermee uitgelicht. Ook maak je hiermee je website beter voor voice-search (verbale zoekopdrachten met een Google assistent).
  3. Structureren dwingt je na te denken over de functie en het onderwerp van de pagina.
    Dit betekent dat je meer vanuit de gebruiker gaat denken: wat wil je dat de gebruiker doet op deze pagina? Welke informatie heeft de gebruiker nodig om dit te doen? Omdat je de data moet categoriseren wordt het lastiger om onderwerpen en functies te mengen. Dit zorgt voor een algeheel helderdere structuur op je website. Dit ondersteunt ook je contentspecialisten. Zij kunnen inhoud schrijven en deze binnen de structuur plaatsen, in plaats van ad hoc online publiceren.
  4. Door de functies en taken van de pagina’s helder te formuleren geef je ook een kader voor je marketing en datateams.
    Analisten kunnen op basis van de gestructureerde pagina’s makke­lijk achterhalen welke metingen voor welke pagina’s belangrijk zijn. Zo kunnen pagina’s gemarkeerd als FAQ en pagina’s gemarkeerd als vacature beide ingedeeld worden in hun respectieve­lijke groepen/segmenten binnen de analytics software. Daarna is het een kwestie van metingen per segment instellen en benchmarks per segment opstellen. Door types en onderwerpen toe te voegen aan de code van de pagina kan deze ook eenvoudiger met een tag manager opgehaald worden; hiermee maak je ook stappen naar verdere automatisering van je data-analyses.

Hoe gaat Google om met Structured Data?

Google crawlt je website en bepaalt op basis van jouw content, de structuur van de pagina en de datatypes wat er getoond wordt. Google gebruikt een aantal variabelen om content te scoren als ‘nuttig’ antwoord op de zoekopdracht. Ze doen dit op basis van gestructureerde data (JSON-LD scripts en andere Structured Data ) en ongestructureerde data (stukken tekst die gecrawled worden op de pagina). Op basis hiervan krijgen gebruikers resultaten voorgesteld. Deze zogenaamde ‘samenvattingen’ zijn het resultaat van een analyse op het gebied van feiten (categorisering) en proza (de uitleg).

Om dit voor elkaar te krijgen werkt Google al jaren aan iets dat Google Knowledge Graph heet. Je kan dit zien als een kennisbank waarbinnen relaties worden gelegd tussen entiteiten en entiteiten geclassificeerd worden. Zo worden bijvoorbeeld films aan acteurs en regisseurs gelinkt, die op hun beurt weer aan hun geboortejaar worden gekoppeld et cetera. De films vallen onder categorie “Media:Film”, de acteurs en regisseurs onder categorie “Person:Actor/Director” en het jaar onder “Date:Year<jaartal>” enzovoorts. Op deze manier wordt het voor de zoekmachine makke­lijk om antwoorden te koppelen aan vragen. Wanneer websites dit soort feiten van tevoren meegeven aan hun pagina’s, worden hun pagina’s binnen dit systeem geplaatst. Door Structured Data toe te passen laten we ons in zekere zin leiden door Google.

Google indexeert en crawlt de laatste jaren steeds meer om Google Knowledge Graph aan te vullen. Door het linken van gegevens kunnen de zoekresultaten steeds natuur­lijker gegenereerd worden zonder dat je een hele specifieke zoekterm nodig hebt. Hierdoor kan je zoeken op “Grote blauwe vogel in kinderserie” en als resultaat Pino uit Sesamstraat krijgen.

Voorbeeld Pino-query:

Deze query kan je ophakken in een aantal onderdelen:

  • “Grote blauwe vogel”;
  • “in kinderserie”;
  • “vogel in kinderserie”

Hier kan je de volgende datatypes aan hangen:

– grote blauwe vogel

  • Dier
  • Kleur = Blauw
  • Afmeting = Groot

– In kinderserie

  • Voorafgaande komt voor in/valt binnen (duidt op een relatie tussen onderwerpen)
  • Media
  • Doelgroep = kinderen

– Vogel in kinderserie

  • Fictief personage
  • Type personage = Dier

– Vertaling: grote (blauwe) vogel = big (blue) bird => big bird = karakter in Engelse Sesamstraat

Hoe wordt Structured Data gebruikt door Google in de zoekresultaten?

Google doet meer dan alleen zoekresultaten weergeven. Je kan betalen voor advertenties. Maar als je bezoekers informatie wilt bieden, bijvoorbeeld over het aanvragen van een parkeervergunning of een toeslag is het moge­lijk om gebruik te maken van “rich search results”. Deze verrijkte resultaten komen in een aantal vormen voor. Google verrijkt het resultaat voor jouw websites met een aantal elementen. Sommige zijn klein zoals de ‘breadcrumb trail’ (broodkruimelpad), dat toont waar de pagina in de hiërarchie van de website terug te vinden is. Andere verrijkte zoekresultaten zijn ‘Veelgestelde vragen’ (FAQ’s): vragen die beantwoord worden op de website en getagged zijn. Ook ‘How-to-blokken’ vallen hieronder. Google neemt correct gestructureerde content mee in haar zoekresultaten. Met zogenaamde rich search results wordt dan meer content getoond van de website dan alleen de paginatitel, url en meta-beschrijving van de pagina.

Op welke manier dit wordt weergegeven hangt van het soort zoekopdracht af. We onderscheiden hierin drie verschillende zoekintenties van Google-gebruikers. Elke soort zoekopdracht heeft een andere set rich search results. Hieronder licht ik ze uit.

1. informatie zoeken

  • De resultaten die je hierbij tegenkomt vallen veelal in deze categorieën van featured snippets:
  • Definitieblok (geen link naar pagina, wordt beschouwd als publiek domein)
  • Samenvatting, ook wel featured snippet; antwoord op een vraag in de vorm van een paragraaf met een link naar de website (wanneer je op de link klikt navigeer je meteen naar het antwoord”)
  • Variatie op een samenvatting: Lijst/opsomming
  • Variatie op een samenvatting: Tabel
  • “Mensen zochten ook naar…” met een aantal andere soortge­lijke zoekopdrachten (dit blok verschijnt als aanvulling op hierboven genoemde resultaten, verschijnt meestal bij een zoekopdracht die als vraag geformuleerd is)

2. navigeren naar een bekende entiteit
Zoeken naar een specifiek bedrijf, recept of how-to resulteert in rich snippets zoals:

  • Bedrijfspanel (link naar bedrijf, locatie bedrijf, gerelateerde entiteiten)
  • Verschillende recepten voor een bepaald type gerecht (weergegeven door middel van een carrousel)
  • Nieuws artikelen of blogs
  • Video of afbeelding carrousel

3. transactionele zoekintentie
Zoeken naar een specifiek product of betaalde dienst resulteert in rich snippets zoals:

  • Carrousel van Google Shopping
  • Carrousel met gerelateerde afbeeldingen
  • Bedrijfspanel (een link naar een bedrijf, de locatie van het bedrijf met gerelateerde entiteiten)

Samenvattingen of Featured Snippets

Samenvattingen zijn korte stukken content geciteerd van de bronwebsite. Hierbij wordt eerst de samenvatting getoond en dan de URL naar de website. Een belangrijke feature van de samenvattingen is dat ze ook opgelezen kunnen worden door Google Assistent. Dit maakt het heel handig voor mensen die gesproken zoekopdrachten gebruiken. Samenvattingen worden altijd bovenaan de zoekresultaten getoond op positie 0.

Aan dit soort ‘featured snippets’ is een beleid verbonden. Google weert ongewenste inhoud (bijvoorbeeld gewelddadige inhoud of content die maatschappe­lijk betwist wordt). Op basis van bruikbaarheid wordt een stuk content op je website aangemerkt als samenvatting of niet. Je kan hier beperkte invloed op uit oefenen door je content gestructureerd op te bouwen en integer te werk te gaan (lees: je bij de feiten te houden).

Concurrentie voor samenvattingen kan erg hoog zijn. Vooral van ‘de grote jongens’ zoals Wikipedia. Voor Wikipedia geldt dat zij hun content op een bepaalde manier hebben opgemaakt. De termen die goed scoren zijn vaak het hoofdonderwerp van de pagina. Daarbij is het hoofdonderwerp een H1 en is het opgenomen als paginatitel. Dit onderwerp wordt uitgelegd met een beknopte definitie in het eerste gedeelte van het content-gedeelte van de website. Daarbij wordt het onderwerp in de eerste zin met <b> gemarkeerd, dit is een element dat je kan gebruiken om nadruk te geven aan belangrijke woorden. Dit zijn allemaal signalen voor Google om hun pagina’s een goede score te geven.

De HTML-elementen die je gebruikt op je webpagina worden opgepikt door de crawlers. Als jij een H2 of H3 kop gebruikt voor de vragen op je website en ge­lijk in de paragraaf eronder een (beknopt) antwoord geeft zorgt dit voor hiërarchie op de pagina. Het aanbrengen van hiërarchie in de vorm vraag-antwoord , is ook een vorm van classificatie.

Zo zie je dat Google op meerdere vlakken en niveaus deze structuur uit de pagina probeert te extraheren. Als dit goed lukt en de structuur is helder en goed te crawlen dan krijg je een hogere score toegekend voor bepaalde zoekqueries. Hetzelfde geldt voor lijsten en tabellen. Ten eerste is het belangrijk derge­lijke elementen helder en semantisch logisch op te maken zodat pagina’s goed tonen met élk device. Deze heldere opmaak draagt ook bij aan de classificatie.

“Mensen zoeken ook naar…”

Als de zoekopdracht op een vraag lijkt formuleert Google met behulp van de knowledge graph een serie nieuwe ge­lijkende vragen. Wanneer je dit blok open klikt krijg je hier ook antwoord op, met een link naar de websites waar je de antwoorden kan vinden. Zo zie je dat je ook vertoond kan worden als je het antwoord hebt op een ge­lijkende query waar je misschien niet positie 0 krijgt toegekend.

Rich snippets

Rich snippets zijn zoekresultaten waarbij extra informatie toont. Deze informatie kan bestaan uit locaties, afbeeldingen, extra vragen en antwoorden (dit is een FAQ, niet te verwarren met de “mensen zoeken naar” panelen), carrousels met media zoals recepten, kleding, films, boeken, video’s (Youtube), reviews, noem maar op. Waarschijn­lijk ben je deze al vaker tegengekomen. De weergave verandert enigszins afhanke­lijk van het datatype. Een film heeft bijvoorbeeld een ander ‘kennispaneel’ dan een boek of een bedrijf.

Welke score je precies krijgt is niet te achterhalen, daarvoor zijn de algoritmes van Google niet transparant genoeg. Wat we wel weten (op basis van onderzoek van verschillende websites ), is dat het toevoegen van structuur in je schrijven, in je code en in de classificatie van je pagina’s over het algemeen, sterk bijdraagt in je positionering van je pagina’s in de zoekresultaten.

Op weg naar een gestructureerde website

Ten eerste: Is hetgeen waarmee je gevonden wilt worden iets wat gezocht wordt door internetgebruikers en staat datgene wat gezocht wordt op jouw website? Samenvattingen worden over het algemeen getoond bij zoekopdrachten waarbij gebruikers opzoek zijn naar informatie over een onderwerp. Dit kunnen vragen zijn, maar ook combinaties van woorden (long-tail-keywords)

Ten tweede: Zorg dat je content toeganke­lijk is. Hiermee bedoelen we een logische hiërarchische opbouw van koppen. Eerst H1, dan H2, enzovoorts. Sla geen koppenniveaus over en gebruik de juiste HTML-elementen binnen de pagina (een link is een <a>, een afbeelding is een <img>, een tabel is opgebouwd uit een <table> element en rij en kolomkoppen). Dat laatste is erg belangrijk, veel ontwerpers verzinnen trucjes om een website visueel aantrekke­lijk te maken. Maar dit zorgt vaak voor een onlogische presentatie van de informatie aan de achterkant en dat is het gedeelte dat Google crawlers gebruiken.
In punt twee stipte ik het al een beetje aan: gebruik de HTML-elementen die bij het ‘data-type’ van de content passen. Koppen markeer je met de <H> tags, stukken tekst met de <p> tag, afbeeldingen met <img> et cetera. Dus geen tekst of tabellen als afbeelding toevoegen, of een paragraaf in een <H> element zetten. Dit is een goede stap naar een gestructureerde HTML-pagina en daarnaast win je hiermee ook aan toeganke­lijkheid.

Ten derde: Je kan nog verder gaan door het type content aan te merken: bevat je pagina bijvoorbeeld een routebeschrijving of worden op je pagina de meeste gestelde vragen beantwoord? Hier komt het eerder genoemde JSON script om de hoek kijken. Door dit script op te bouwen met de juiste datatypes om zo je pagina te classificeren heb je de kans om opgenomen te worden in de Rich Snippets van Google.

Hoe breng ik structuur aan in mijn pagina’s?

Hiërarchie, structuur en logica op je webpagina’s: waarom ze belangrijk zijn voor SEO Gebruikerspaden, technische elementen en de juiste vragen beantwoorden.

Wat gaan de bezoekers doen op deze pagina?

Ze kunnen navigeren, formulieren invullen, informatie opzoeken, contact opnemen. Wat gaan ze doen? Zorg dat het doel duide­lijk is. Voor de bezoeker, maar ook zeker voor de verantwoorde­lijken binnen jouw organisatie. Op basis van dit doel maak je een pagina-indeling. Je bepaalt welk gebruikers pad bezoekers moeten volgen. Zorg hierbij dat je geen functies mengt. Dit is verwarrend voor bezoekers, ze weten name­lijk niet meer waar ze naartoe moeten. Functie-types met behulp van een duide­lijke structuur levert ook voordelen op voor data-gedreven werken. Informatie pagina’s hebben bijvoorbeeld hele andere succesfactoren dan navigatie- of transactiepagina’s. Wanneer deze types helder toegekend zijn geef je expliciet richting aan je contentspecialisten en -analisten. Zo krijgen zij de ruimte om te doen waar zij goed in zijn.

Wat staat er op de pagina?

Stel grenzen aan het aantal onderwerpen dat je op de pagina bespreekt. Hoe meer je een onderwerp begrensd, des te beter. Hierdoor krijg je ook de moge­lijkheid om diepgang te bieden aan je content. Beantwoord de vragen binnen het kader van het onderwerp. De vragen van bezoekers mogen best letter­lijk terugkomen in de paragrafen met korte en directe antwoorden. Heb je een onderwerp dat overlapt? Maak hier een aparte pagina voor en link ernaar (en als je toch bezig bent, zet dat linkje dan niet helemaal bovenaan, maar ergens semantisch logisch in de tekst met een beschrijvende ankertekst).

Hoe bouw je de pagina op?

Net als een goed verhaal is het belangrijk dat je de HTML-code van je pagina logisch opbouwt. De koppen volgen elkaar logisch op zonder een niveau over te slaan. Dus eerst een H1, dan een H2, dan een H3. Tabellen, paragrafen, afbeeldingen en links worden als dusdanig aangemerkt en niet verstopt binnen andere elementen. Een button is een <button> en níet een aanklikbare afbeelding met hardcoded tekst erin.
De HTML-tagging die je toevoegt bepaalt niet alleen de lay-out, het zijn ook labels voor de datatypes van jouw content aan systemen die alleen maar de code kunnen lezen. Dit geldt trouwens niet alleen voor webcrawlers van zoekmachines. Spraak gestuurde assistenten (Google assistent, Alexa, Siri) en screenreaders maken ook dankbaar gebruik van een heldere structuur. Zo kunnen bijvoorbeeld mensen met een visuele beperking de pagina’s van jouw site beter lezen met ondersteunende technologieën.

Is structured data wel interessant voor mij als overheidsorganisatie of zorg­instelling?

Deze vraag kan ik alleen met een volmondig “JA” beantwoorden. Organisaties zoals de overheid en de zorg hebben geen diensten of producten om te verkopen. Ze bieden zich aan als ondersteuning van hun burgers dan wel patiënten. Dit doen ze door informatie te geven over de regels, uitleg te bieden over behandelingen, afspraken te plannen via digitale formulieren of aanvragen voor voorzieningen te verwerken. Om bezoekers zo goed moge­lijk te helpen is het belangrijk deze taken makke­lijk te maken om uit te voeren. Of je bezoeker nu een spraak gestuurde zoekopdracht gebruikt, behoefte heeft aan eenvoudiger Nederlands of alle voorwaarden voor een verzekering wil lezen.

Terug refererend naar de zoekintenties en de verrijkte zoekresultaten zijn er interessante moge­lijkheden te bedenken voor toepassingen van structuur. Bijvoorbeeld de tabel met openingstijden voor de organisatie: is die wel goed opgebouwd? De stappen die een patiënt moet doorlopen ter voorbereiding op een behandeling, kan dat als een ‘how-to’-pagina vormgegeven worden?

Een voorbeeld van het gebruik van samenvattingen in concurrentie met betaalde advertenties zie je hieronder. Door te zoeken naar “hoe urgentie­verklaring huurwoning aanvragen” (let wel, zonder gemeentenaam) krijg je de volgende resultaten. Als eerste een reclame van een twijfelachtige bedrijf. (Dit bedrijf komt ook voor in de #BOOS afleveringen 1 en 2 uit seizoen 5) Het volgende resultaat is een samenvatting van de website van de Rijksoverheid op positie 0. Op positie 1 zien we “Urgentie­verklaring aanvragen” van Gemeente Amsterdam verschijnen. Kijkend naar de manier waarop de verschillende resultaten zijn opgebouwd vallen de volgende dingen op.

  • Commercieel bedrijf maakt gebruik van betaalde campagne, dit levert meer schermoppervlak op. Daarnaast hebben ze de moge­lijkheid om meer tekst toe te voegen. Deze teksten zijn allemaal activerend. Je kan meteen klikken op de call-to-action ‘Urgentie aanvragen’.
  • Samenvatting Belastingdienst: Hierin wordt uitgelegd wat een urgentie­verklaring is en dat deze aan te vragen is bij de gemeente. Dit wordt op gemeente­lijke niveau geregeld, dus logisch is het wel. Maar de Google-gebruiker krijgt weinig extra toelichting.
  • Gemeente Amsterdam heeft een duide­lijke meta-beschrijving die aangeeft dat je op hun pagina kan lezen hoe je de urgentie aanvraagt. Ze staan wel ‘bovenaan’ in de zoekresultaten, maar hebben hele straffe competitie van betaalde en rich search results.

Wanneer er gezocht wordt mét de gemeente Amsterdam in het zoekresultaat erbij krijgen we het volgende resultaat. Hier worden wel stappen genoemd die je moet ondernemen om de aanvraag te doen. Voor een aantal andere grote gemeenten tonen er ook betrouwbare samenvattingen. Maar het lijkt er toch op dat het aanvragen van een urgentie voor een woning erg lastig is. Een activerend en duide­lijk stappenplan in de vorm van een verrijkt zoekresultaat zou prettig zijn

Bronnen