Structured Data Tool de hands-on benadering 1

banner Structered Data Testing Tool hands-on URL en HTML

Een hands-on benadering van de structured data tool waarbij we kijken naar het testen van een URL en het testen van HTML code. HTML code is geweldig voor testing.

In mijn vorige artikel heb ik gekeken naar wat de structered data tool is en wat waarom Google deze tool aanbiedt. Ook hebben we gekeken waarom het belangrijk kan zijn voor een web site. Hier zal ik kijken naar een hands-on benadering en het testen van een URL en HTML. Hierbij zullen we kijken naar de schema van schema.org: De product schema van schema.org. Deze informatie wordt gebruikt om rijke snippets weer te geven maar ook om een web pagina beter te begrijpen. Buiten Google Search gebruiken andere platformen deze mark-ups ook, zoals Bing Yahoo en Yandex.

Structered Data Tool de URL

Laten we eerst kijken wat er gebeurd als we een URL invullen:

screenshot structered data tool product weergave

In de screenshot hierboven heb ik de mark-up omlijst met een kleur. Ik heb de breadcrumb omlijst met rood, de geaggregeerde beoordelingen omlijst met donkergroen, het totaal aantal beoordelingen met geel en de prijs met blauw. Als we naar beneden scrollen dan zien we dat de robot de data heeft gevonden op de web pagina voor een bepaalde mark-up:

data gevonden voor rijke snippets

In de afbeelding hierboven is de zelfde kleurcode gebruikt als voor de rijke snippet voorbeeld. We zien dat voor de breadcrumb in het rood omlijst RDFa mark-up wordt gebruikt, voor de geaggregeerde beoordelingen in het donker groen omlijst de schema.org/aggregaterating mark-up wordt gebruikt en dat het een onderdeel (item1) is van de schema.org/product, met geel omlijst is de totaal aantal beoordelingen en met blauw omlijst zien we dat schema.org/offer wordt gebruikt voor prijs en dat dit een onderdeel (item2) is van schema.org/product.

Kortom we zien dat de structered data tool bijna alle data gebruikt voor een rijke snippet. Echter dit hoeft niet altijd zo te zijn. De web pagina kan meer data gegeven die niet in de rijke snippet naar voren komt. In het voorbeeld hierboven zien we dat het product op voorraad is (in stock) maar dit wordt niet weergegeven in de rijke snippet. Echter deze informatie is wel belangrijk en Google kan deze informatie gebruiken in de backend. Dat wil zeggen, als deze waarde ontbreekt dan kan het voorkomen dat Google geen rijke snippets laat zien.

Structered Data Tool en HTML

Buiten de mogelijkheid om URL’s te testen kan er in deze web applicatie ook HTML-code worden getest. Dit is met name handig om te eerst een code te testen voordat het wordt geïmplementeerd op de “live” web site of URL. Laten we kijken naar een voorbeeld voor de schema.org en de product:

<div class="wrapper" itemscope itemtype="http://schema.org/WebPage">
<div itemprop="breadcrumb">
<a href="http://example.com/kleding/">Kleding</a> >
<a href="http://example.com/kleding/heren/">Heren</a> >
<a href="http://example.com/kleding/heren/shirts/">Shirts</a>
</div>

<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Rode shirt met lange mouwen</span>
<img itemprop="image" src="rode-shirt.jpg" alt="rode shirt met lange mouwen" />

<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
Gemiddelde beoordeling <span itemprop="ratingValue">3.5</span>/5 sterren van de <span itemprop="reviewCount">109</span> beoordelingen.
</div>

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<link itemprop="availability" href="http://schema.org/InStock" />Op voorraad
Prijs: <span itemprop="price">€ 49,95</span>
</div>

Product beschrijving:
<span itemprop="description">Een prachtige rode shirt met lange mouwen. Leuk voor de nieuwjaarsborrel, maar ook zeer trendy voor een doordeweekse dag.</span>
</div>
</div>

Als we deze HTML code in de tool testen dan zien we dat rood correspondeert met de breadcrumb schema, roze met de product schema, groen met geaggregeerde beoordelingen en blauw met de offer (aanbod) schema:

structered data testing tool screenshot voor html testing

 

Tot slot,

Kortom deze twee mogelijkheden, het testen van een URL of het testen van HTML code, is een geweldige manier om te kijken of alles goed is geïmplementeerd of om tre kijken hoe een rijke snippet eruit kan zien in de zoekmachine van Google. Omdat ik hier schema.org heb gebruikt is deze mark-up ook geldig voor andere zoekmachines zoals Bing of Yandex. Maar ook andere crawlers kunnen deze informatie gebruiken. Immers door gebruik te maken van de mark-up wordt er data door gegeven die gemakkelijk (of makkelijker) door computers kan worden gebruikt. Echter om een web van data te bereiken, het semantische web, is het nodig dat veel webmasters dit gebruiken.

Persoonlijk denk ik dat het uitbreiden van een web van informatie met een web van data uiteindelijk voor iedereen, de gebruikers en de webmasters, zeer waardevol is. Maar of dit werkelijkheid wordt blijft een vraag en het semantische web wordt al vele jaren voorspeld en aangemoedigd. Of dit werkelijkheid wordt of dat crawlers “natuurlijke taal” beter gaan begrijpen waardoor deze mark-up niet nodig is blijft ook een vraag. Waarschijnlijk worden beide uitgevoerd en voor bedrijven met veel vermogen en gebruikers is het mogelijk om “natuurlijke taal” beter te begrijpen. Uiteindelijk blijven deze vragen slechts speculatie en op dit moment ligt de echte waarde van de mark-up in de rijke snippets die zoekmachines kunnen weergeven.

2 reacties op “Structured Data Tool de hands-on benadering 1”

  1. Well we updated some software in the backend a couple of days ago. That may be way it was a little slow when you arrived. In general, we try to get the 1 second load mark. We try to do that with browser caching, etc…

Geef een reactie

Uw e-mail adres wordt niet gepubliceerd.

*
*

De volgende HTML tags en attributen kunnen worden gebruikt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>