Microdata / Rich Snippets
Het betreft hier een producten catalogus.
Mijn html structuur komt er ongeveer zo uit te zien:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<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. € 12,50</div>
<div class="stock"><link itemprop="availability" href="http://schema.org/InStock">OP VOORRAAD</div>
</div>
</div>
<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. € 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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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. € 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>
<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. € 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?
Gewijzigd op 07/05/2014 16:07:40 door Martijn Wieringa
Nee: http://www.google.com/webmasters/tools/richsnippets?q=uploaded:8004f90e1f5f3b2e6d95819d3b934c9b
>> 2. Mag/kan ik voor de priceCurrency en availability deze ook nesten, of mag dit niet.
Ik weet niet precies wat je hier mee bedoelt, maar gelukking kun je dat zelf uittesten met het tooltje dat ik hierboven linkte :)
>> 3. weet iemand wat deze oplossing is?
Meta elementen hebben als het goed is `display:block;` en moeten daardoor helemaal geen problemen opleveren.