Thursday, March 17, 2016

Implementing Rich Snippets in WCS

Introduction
We can add Rich Snippets support to the site so that the extra information appears when the search engines like google displays the results, we need to mark up the text inside the JSP files which can be done through one of the following way-
1) Microdata specification
2) schema.org specification

The web pages in the Aurora starter store already use microdata format to mark up the content, additionally we can meta tags to represent the information in  a different format in search results, we will explore the steps required for expediting the microdata format

Markup
1) Product markup- Itemtype- http://data-vocabulary.org/Product
itemprop- name,description

2) Offer markup- Itemtype- http://data-vocabulary.org/Offer
itemprop- price

3) Ratings markup- Itemtype- http://data-vocabulary.org/Review-aggregat
itemprop- rating and count

For example
<div itemscope="itemscope" itemtype="http://data-vocabulary.org/Product">
    <span itemprop="name">Summer Shirts</span>
    <span itemprop="description">Best selling shirt in summer season</span>

    <span itemprop="offerDetails" itempscope itemtype="http://data-vocabulary.org/Offer">
        Price: $<span itemprop="price">179.99</span>
        <span itemprop="availability" content="in_stock">In stock</span>
    </span>

    <span itemprop="review" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
        <span itemprop="rating">3.4</span> stars, based on
        <span itemprop="count">11</span> reviews
    </span>
</div>

Testing
Once the page is updated with the intended mark-ups, we can test the site pages through the Google's Rich snippets testing tool to give us a flavor of the changes made-

https://developers.google.com/structured-data/testing-tool/

No comments:

Post a Comment