Whenever we search for a ecommerce product in a search engine we see a list of links with well optimized titles. But this information(page title, description etc) is very basic and it really doesn’t give any product details or configuration and also it doesn’t give any reason to the user to visit the link. Therefore a new way of structuring information was invented. Its called as rich snippets.
Rich Snippets
Rich snippets are information(other than basic info like page title and description) provided to the search engine by a webpage so that search engine can display those informations(ratings, seller name, review, price etc). Rich snippets are provided to search engines via schemas(semantic markup and attributes).
An typical example of how rich snippets are displayed by Google
Schemas for E-Commerce Website
Here I will provide a list of important markups you should use in your ecommerce website.
Suppose this is our product details:
Product title: Building a E-Commerce Website From Scratch - Video Course
Product Image: <img src="ecommerce.jpg"/>
Description: The best course to teach how to build a ecommerce website
Category: Courses
Product #: 925872
Average rating: 4.4, based on 89 reviews
Regular price: $20.00
Sale: $10.00 (Sale ends 5 November!)
Available from: QScutter
Condition: All new videos
In stock! Order now!
Now the product page(category or other product listing page should’t contain schemas, only product page) will contain the following schema:
<img itemprop="image" src="ecommerce.jpg" />
<span itemprop="description">The best course to teach how to build a ecommerce website
</span>
Category: <span itemprop="category" content="Videos > Courses">Courses</span>
Product #: <span itemprop="identifier" content="mpn:925872">
925872</span>
<span itemprop="review" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
<span itemprop="rating">4.0</span> stars, based on <span itemprop="count">121
</span> reviews
</span>
<span itemprop="offerDetails" itemscope itemtype="http://data-vocabulary.org/Offer">
Regular price: $20.00
<meta itemprop="priceCurrency" content="USD" />
$<span itemprop="price">10.00</span>
(Sale ends <time itemprop="priceValidUntil" datetime="2014-08-05">
5 November!</time>)
Available from: <span itemprop="seller">QScutter</span>
Condition: <span itemprop="condition" content="used">All new videos</span>
<span itemprop="availability" content="in_stock">In stock! Order now!</span>
</span>
Here you can have different HTML markups according to website design but the attribute conveying information(or schema attributes) should be as it as. Google and other search engines read this attributes and their values(also inner tag values) and then display in search results.
Usage Guidelines
- If you are using schema then that doesn’t mean Google will have to display the information. Its upto to Google if they want to display these information or not. Mostly they validate popular sites.
- Don’t use these markup in listing pages.
- The product must be purchasable in that page webpage where you have the schema, you shouldn’t redirect the use to some other domain for purchasing i.e., affiliate marketing pages doesn’t support these markup.
More Schema
There are lot of other schemas available for different kinds of websites. You can find whole list at schema.org or at Google rich snippets documentation.
Data Highlighter
If you are not a web developer and using some kind of CMS or any other mean to run your ecommerce site then you might face problems integrating schemas in your website. Therefore Google introduced Data Highlighter, a tool among other webmaster tools.
Data highlighter provides a way to provide rich snippets to Google via Highlighting text in your product page.
Rich Snippets for other variety of Sites
Rich snippets are not limited to ecommerce websites but they can be used for blogs, music sites, etc. Make use of them whenever you can even if Google don’t display it they are internally used for ranking pages.
