Structured Data (Microdata)

Microdata (sometimes referred to as structured data, rich snippets, or schema code markup) is the machine-readable data that is embedded in a web page. It provides specific information which is easily interpreted by search engines and other web services.

Microdata helps automated programs to understand the content of your web page better. Browsers, search engines as well as web crawlers analyse the information on the web pages and produces relevant results for users.

Microdata includes information types such as reviews, personal information or events. Each information type has its properties.

Why is Microdata Important?

Search engines crawl microdata and present it in an easy and user-friendly format. This offers more engaging and rich browsing experience for the customers.

Microdata enhance your search result listings with information like ratings, pricing, brand and stock levels, etc. These enhancements improve both click-through and conversion rates. This help to make listings stand out, which empowers the users to make confident, informed decisions and increase traffic organically on your website.

For example, you can include microdata in your productcatelog. Products listed in search engine result pages display details like price, availability, and review rating and present the product data in easy to read format, thus encouraging the users to make a purchase.

Microdata support in StoreHippo

StoreHippo supports microdata in all its themes. The microdata widget is included in themes that contain structured data definitions for different theme pages on your store. Microdata is automatically added in the HTML code of product pages. There is no need for additional action to enable the structured data. Microdata pulls the information present on the product page.

Microdata is included in the following pages on StoreHippo:

Product pages
Categories
Collections
Reviews
Blog Posts

StoreHippo automatically includes microdata, but also provide you with the liberty to edit it. You can also add the microdata code in the HTML if you are using a custom theme or an old theme which doesn't support the microdata. Given below is the microdata code for you to include in your theme. You can use this snippet in the header for your website.

Microdata Examples

Following are some of the example snippets that you can use in theme pages to add microdata.

Postal address

  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
            <span itemprop="streetAddress">{{ms.settings.physical_location.address}}</span>
            <span itemprop="addressLocality">{{ms.settings.physical_location.city}}</span>,
            <span itemprop="addressCountry">{{ms.settings.physical_location.country}}</span>
        </div>

Organization

<div itemscope itemtype="http://schema.org/Organization">
        <span itemprop="name">{{ms.settings.store_title}}</span>
        <span itemprop="url">{{ms.settings.online_url}}</span>
        <span itemprop="telephone">{{ms.settings.contact_phone}}</span>
        <span itemprop="image">{{ms.settings.logo|image:'480x480'}}"</span>
        <span itemprop="email">{{ms.settings.contact_email}}</span>
    </div>

Site Navigation

<div ms-widget="ms.navigation">
        <div data-ng-repeat='link in navigation.header.links'>
            <a itemscope itemtype="http://schema.org/SiteNavigationElement"   itemprop="url"  href="{{link.url}}">
                <span itemprop="name">{{link.title}}</span>
            </a>
            <a itemscope itemtype="http://schema.org/SiteNavigationElement"  itemprop="url"  data-ng-repeat='sublink in link.children' href="{{sublink.url}}" >
                <span itemprop="name">{{sublink.title}}</span>
            </a>
        </div>
    </div>

Product pages

  <div ng-if="ms.page.name=='product'">
        <div itemscope itemtype="http://schema.org/Product" >

            <span itemprop="productID">{{ms.product._id}}</span>

            <span itemprop="name">{{ms.product.name}}</span>
            <span itemprop="image">{{ms.filters.image(ms.product.images[0].image)}}</span>
            <span itemprop="description" ng-bind-html-unsafe="ms.product.description" >{{ms.product.description}}</span>
            <span itemprop="sku">{{ms.product.sku}}</span>
            <div itemprop="offers" itemtype="http://schema.org/Offer" itemscope>
                <span ng-if="ms.product.available" itemprop="availability" content="https://schema.org/InStock">in stock</span>
                <span ng-if="!ms.product.available"itemprop="availability" content="https://schema.org/InStock">out of stock</span>
                <span itemprop="priceCurrency">{{ms.user.currency.name}}</span>
                <span itemprop="price">{{ms.product.price}}</span>

            </div>
            <div itemprop="brand" itemtype="http://schema.org/Thing" itemscope>
                <span itemprop="name">{{ms.product.brand}}</span>
            </div>
            <div ng-if="ms.product.num_reviews" itemprop="aggregateRating" itemtype="http://schema.org/AggregateRating"
                 itemscope>
                <span itemprop="reviewCount">{{ms.product.num_reviews}}</span>
                <span itemprop="ratingValue">{{ms.product.avg_rating}}</span>
            </div>
            <div ng-if="!ms.product.num_reviews" itemprop="aggregateRating" itemtype="http://schema.org/AggregateRating"
                 itemscope>
                <span itemprop="reviewCount">1</span>
                <span itemprop="ratingValue">1</span>
            </div>
        </div>
    </div>

StoreHippo Help Center