Microdata / Rich Snippets

Door Martijn Wieringa op 07-05-2014 16:06 gewijzigd op 07-05-2014 16:07

2.342 views

Ik ben bezig een website uit te breiden met Microdata, en ik loop ergens tegen aan waar jullie vast al een oplossing voor weten.

Het betreft hier een producten catalogus.

Mijn html structuur komt er ongeveer zo uit te zien:

<div class="mod-product" itemscope itemtype="http://schema.org/Product">
	<div class="description">
		<a itemprop="url" href="http://www.product-detail.nl"><img alt="Productnaam" border="0" itemprop="image" src="afbeelding.png"></a>
		<h2 itemprop="name">Productnaam</h2>
		<p itemprop="description">Productomschrijving..</p>
	</div>

	<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
		<div class="price" itemprop="price" content="12.50"><meta itemprop="priceCurrency" content="EUR">v.a. &euro; 12,50</div>
		<div class="stock"><link itemprop="availability" href="http://schema.org/InStock">OP VOORRAAD</div>
	</div>
</div>

Vraag 1:
De "link" van het product zit ge-wrapped om de "afbeelding" heen. Ik wil graag beide definieren als Microdata. Geeft dit problemen omdat deze genest zijn?
Zie: http://schema.org/Product

Vraag 2:
Mag/kan ik voor de priceCurrency en availability deze ook nesten, of mag dit niet.

Vraag 3:
Om de velden price en stock hoort volgens de specificatie de itemscope "Offer" te komen.
Deze tag verkl**it echter de positionering van deze elementen waardoor ik, om het werkende te krijgen, extra CSS code moet toevoegen. Dit lijkt mij tegen de fundamenten van microdata aan schoppen, dus daar heeft men vast al een oplossing voor bedacht; weet iemand wat deze oplossing is?

Ik zat eerst te denken aan de <meta> tag, maar deze is self-closing, dus dat lijkt mij niet mogelijk; zie voorbeeld:

<div class="mod-product" itemscope itemtype="http://schema.org/Product">
	<div class="description">
		<a itemprop="url" href="http://www.product-detail.nl"><img alt="Productnaam" border="0" itemprop="image" src="afbeelding.png"></a>
		<h2 itemprop="name">Productnaam</h2>
		<p itemprop="description">Productomschrijving..</p>
	</div>

	<div class="price">v.a. &euro; 12,50</div>
	<div class="stock">OP VOORRAAD</div>

	<meta itemprop="offers" itemscope itemtype="http://schema.org/Offer">
		<meta itemprop="price" content="12.50">
		<meta itemprop="priceCurrency" content="EUR">
		<link itemprop="availability" href="http://schema.org/InStock">
	</meta>
</div>

Iemand suggesties?