Semantic HTML5 for Products in eCommerce
Posted by Pete Schuster on
About to kickoff a big eCommerce build at work so I decided to do a bit of research on my own into semantic markup, etc for products. Doesn’t seem to be too much info out there about it, or maybe I was just looking in the wrong place. I decided to use schema.org for microdata, and I’d probably be sure do include some OpenGraph data as well for Facebook. Below is what I came up with for a standard “product” in an eCommerce store.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | <article itemscope itemtype="http://schema.org/Product"> <a href="#" title="#" itemprop="url"><img src="#image" alt="#title" width="#" height="#" itemprop="image" /></a> <h1 itemprop="name">Companion Cube</h1> <div class="description" itemprop="description"> <p>The Companion Cube is your best friend and it loves you very much.</p> </div><!--/end .description--> <div class="rating" itemscope itemtype="http://schema.org/AggregateRating"> <p>Rating: <span itemprop="ratingValue">10</span> out of <span itemprop="bestRating">10</span> by <span itemprop="reviewCount">256</span> customers</p> </div><!--/end .rating--> <div class="offer" itemscope itemtype="http://schema.org/Offer"> <span class="price" itemprop="price">$100.00</span> <span class="availability" itemprop="availability">In stock!</span> </div><!--/end .offer--> <a href="#" title="Add to Cart"><span>Add to Cart</span></a> <ol class="review_list"> <li> <article itemscoop itemtype="http://schema.org/Review"> <h1 itemprop="name">LOVED IT!!!</h1> <p>Posted by: <cite itemprop="author">Gladis</cite> at <time datetime="" pubdate itemprop="datePublished">Sept. 1</time></p> <div class="review_content" itemprop="description"> <p>Loved it!</p> </div><!--/end .review_content--> </article> </li> <li> <article itemscoop itemtype="http://schema.org/Review"> <h1 itemprop="name">LOVED IT!!!</h1> <p>Posted by: <cite itemprop="author">Gladis</cite> at <time datetime="" pubdate itemprop="datePublished">Sept. 1</time></p> <div class="review_content" itemprop="description"> <p>Loved it!</p> </div><!--/end .review_content--> </article> </li> <li> <article itemscoop itemtype="http://schema.org/Review"> <h1 itemprop="name">LOVED IT!!!</h1> <p>Posted by: <cite itemprop="author">Gladis</cite> at <time datetime="" pubdate itemprop="datePublished">Sept. 1</time></p> <div class="review_content" itemprop="description"> <p>Loved it!</p> </div><!--/end .review_content--> </article> </li> </ol> </article> |
Obviously you don’t need to use all of the elements I added, but its easier to strip them out, than add them back in. Let me know what you think! Do you have any good examples of semantic HTML5 eCommerce stores?
Diego Isaac
Just great content. In your opinion this is the best template for any kind of products? Is there any updates on this schema?
Pete Schuster
I think this is the best way to markup a product, yes. I don’t think there has been any updates to schema either.
Rizwan
Hey, this looks great. Since, its been a year you wrote this, has much changed in your opinion. I did go over http://schema.org/Product and things look more or less the same…
Pete Schuster
Hi Rizwan,
It should still hold up pretty well. The only thing I would remove is the
>cite<in the comment for the author. You can replace it with a>b<element, any everything else can stay the same.Jim Ord
Great guideline – thank you ,,,
… just one small suggestion – perhaps you might swap out href=”#” for href=”javascript:void(o);” so that if it is clicked on the user is not taken to top of page?
Pete Schuster
Hey Jim,
Thanks for the suggestion but the href=”#” is just a placeholder for whatever the add to cart URL would be. I agree though href=”#” can be troublesome sometimes, but I prefer not to use inline JS at all, so adding the preventDefault method to the click event handler would do the same thing.