How to Add Schema.Org Recipe Markup in Blogger Template

How to Add Schema.Org Recipe Markup in Blogger Template to Display Review Number and Star Rating in Google Search

Hello friends, today in this article we are going to show how to add review rating by schema markup recipes. In the previous tutorial we have already talked about adding Schema.org review rating markup to blogger template.

You can markup your articles/content with schema structured data by enabling rich snippets for recipes, you can display review ratings by adding schema Recipe markup.

How to Add Schema.Org Recipe Markup to Blogger Template

Although schema recipe markup has some more features like, you can display reviewer rating, cooking time, preparation time, ingredient information, nutritional information.

Google uses this information to display your content/article in a useful way Example: displaying rich snippets for your recipe results, enabling your webpage to have recipe specific search tools page.

But we've modified to add to the Blogger template, though you can still use that if you want to share cooking recipe markup.

After adding Schema.org recipe markup to your Blogspot website, Google will display the article's image in front of the article title and star rating after the review counter you've added, by default we've added 5 values for reviews that you can modify. There can be many n numbers.

How to Add Schema.Org Recipe Markup to Blogger Template

To install Schema.org recipe markup in your blogger template you need to follow below steps. Copy Below code and paste it above / below <data :post.body/> tag.

<div class='bsdrating' typeof='Recipe' vocab='http://schema.org/'>
  <b:if cond='data:post.thumbnailUrl'>
    <img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' property='image'/>
    <b:else/>
    <img expr:alt='data:post.title' itemprop='image' src='https://1.bp.blogspot.com/-C37nhicX6ds/YHMMXS18j1I/AAAAAAAAE08/6H3yqmI7ZbcWQIMrEBMgwrzqX6J1F0rAACLcBGAsYHQ/s16000/Saroj%2BBela.png'/>
  </b:if>
  <span property='name'>
    <data:post.title/>
  </span>By:
  <span property='author' typeof='Person'>
    <span property='name'>
      <data:post.author/>
    </span>
  </span>
  <time expr:datetime='data:post.timestampISO8601' property='datePublished'>
    <data:post.timestampISO8601/>
  </time>
  <span property='aggregateRating' typeof='http://schema.org/AggregateRating'>
    <span property='ratingValue'>
      5.0
    </span>
    stars based on
    <span property='reviewCount'>
     5
    </span>
    Reviews
  </span>
  <span property='description'>
    <data:post.snippet/>
  </span>
</div>

Install Schema.org Recipe Review Rating Markup in Blogger Template

  1. Log in to your Blogger account and go to your Blogger Dashboard.
  2. Click on/go to--> Theme --> Customize->  Edit HTML
  3. Now search for <data:post.body/> tag and paste it above / below <data :post.body/> tag.

Image Example to Add Schema.Org Recipe Markup to Blogger

Image Example to Add Schema.Org Recipe Markup to Blogger

Now Save Your Template

To verify that you have added the correct Schema.org Recipe Markup review rating, go to https://search.google.com/test/rich-results and get your URL and view your posts page there where You can see the review schema.org Recipe Markup Review Rating in the Google Rich Result Testing Tool.

Post a Comment

Thanks for any suggestions or questions! We will reply to your message soon.

Previous Post Next Post