How to Add Google Rich Snippets in Blogger | PC Week

How to Add Google Rich Snippets in Blogger

Monday, April 22, 2019

How to Add Google Rich Snippets in Blogger

How to Add Google Rich Snippets in Blogger
Hi, Guys Welcome back to another tutorial on Blogger. In this tutorial, I will show you how to add google rich snippets in blogger. There are thousands of plugins in Wordpress but blogger lacks the support for most of the plugin.

There are some websites that provide the rating widget but in this tutorial, I will show you how to insert a Schema rating widget without any third party code or website, just by using official Schema rating script.

There are some other structured data elements that are not discussed here if you want an article on all structured data in blogger comment below or contact us.
Note: This tutorial cover all the aspects of schema rating widget but it depends on Google to accept the structured data or not.

How to Add Google Rich Snippets in Blogger?

The snippet is simply what Google shows to a user when someone searches on google. For example when we search for a question or a product we could see search result showing different snippets. The default snippet would be similar to this below.

How to Add Google Rich Snippets in Blogger

Google shows the title in blue color and URL in green color. Google Introduced rich snippets to enhance the browsing experience by providing extra information about the content to easily understand what the website has. A Google rich snippet result would look like this below.
How to Add Google Rich Snippets in Blogger

Importance of Structured data in SEO

Structured data has become very strict nowadays, websites with structured data are most favored in the google search results, therefore, we have to focus on optimizing our website with all necessary structured data.

Most of the Blogger theme has some structured data present in it but among theme, some doesn't contain any relevant Structured data and show many errors in Google console. To avoid this Pre-test your theme and make sure that it doesn't contain any errors in structured data and Just copy the demo page URL of your theme and paste the URL in the below tool


After that check how many structured data elements are present in it and after that choose the theme with most structured data elements.

How to add Structured data to Blogger

Now let us learn how to add structured data to blogger with simple code. I have worked with Google star rating code for the blogger to advance the blogging experience in blogger and I will show you the proof. There are some codes which show errors in Google structured data testing tool. So I planned to build a clean code with official schema aggregate snippet code from here. You can too check out other rating elements like product price, amount, etc from the official link

Google aggregate rating Code for Blogger 

Five-star widget code for a blogger is optimized to provide only the relevant information and to optimize code for blogger and not to overload the current theme. In my experience before choosing blogger template don't go for design thinks about the SEO elements like structured data in the theme.

How to Add a Star Rating widget to Blogger

# Method 1

Optimized Standalone Code for Blogger without any third party widget.
Note: Keep a backup of your theme and proceed to protect your data.
<div class='post-rating' itemscope='' itemtype='http://schema.org/Review'><span itemprop='itemReviewed' itemscope='' itemtype='http://schema.org/Thing'><a expr:href='data:post.url' itemprop='url' target='_blank'/></span><span itemprop='author' itemscope='' itemtype='http://schema.org/Person'><strong>Author :</strong> <span itemprop='name'><data:post.author/></span></span><span itemprop='reviewRating' itemscope='' itemtype='http://schema.org/Rating'><strong>Rating:</strong> <span itemprop='ratingValue'>5</span> out of <span itemprop='bestRating'>5</span></span><span itemprop='publisher' itemscope='' itemtype='http://schema.org/Organization'></span></div>
Find <div class='post-footer'> in your theme and you will find it twice in your theme. Paste the below code below the second one

And Recheck your Post URL in Google Structured data testing tool and check whether it's showing any error.

For that Goto, Google Tester and paste the post URL and Click Run Test and see whether it is having an error or not

My Blog isn't showing any error you can check it out here PC Week Test

Modifying the rating code 

You can change the Author to Review by or Product by replacing Author : in the below code

<span itemprop='author' itemscope='' itemtype='http://schema.org/Person'><strong>Author :</strong> <span itemprop='name'><data:post.author/></span></span>

# Method 2 (Recommended)

This method is recommended for the best experience and those facing problems using the first method. Google recommends using JSON-LD for structured data whenever possible. You can check out more details about all the schema formats supported by Google here.

  1. Find <div class='post-footer'> in your theme and you will find it twice in your theme. Paste the below code below the second one.
  2. Change the Author name, Google plus profile and time (Publishing time which would be the same for every post)
  3. That's all
<!-- Review Star Rating In Google Search Results -->
<script type='application/ld+json'>
{
&quot;@context&quot;:&quot;https://schema.org&quot;,
&quot;@type&quot;:&quot;Review&quot;,
&quot;author&quot;: {
&quot;@type&quot;:&quot;Person&quot;,
&quot;name&quot;:&quot;Muhammed Fasil K&quot;,
&quot;sameAs&quot;:&quot;https://www.blogger.com/profile/12071624565375682546&quot;
},
&quot;url&quot;: &quot;<data:blog.canonicalUrl/>&quot;,
&quot;datePublished&quot;:&quot;<data:post.dateHeader/>&quot;,
&quot;publisher&quot;: {
&quot;@type&quot;:&quot;Organization&quot;,
&quot;name&quot;:&quot;<data:blog.title/>&quot;,
&quot;sameAs&quot;:&quot;<data:blog.homepageUrl/>&quot;
},
&quot;description&quot;:&quot;<data:blog.metaDescription/>&quot;,
&quot;inLanguage&quot;:&quot;en&quot;,
&quot;itemReviewed&quot;: {
&quot;@type&quot;:&quot;Product&quot;,
&quot;name&quot;: &quot;<data:blog.pageName/>&quot;,
&quot;sameAs&quot;: &quot;<data:blog.canonicalUrl/>&quot;,
&quot;image&quot;: &quot;<data:blog.postImageThumbnailUrl/>&quot;,
&quot;aggregateRating&quot;: {
&quot;@type&quot;: &quot;AggregateRating&quot;,
&quot;ratingValue&quot;: &quot;4.5&quot;,
&quot;bestRating&quot;: &quot;5&quot;,
&quot;ratingCount&quot;: &quot;11&quot;
}
}
}
</script>
<!-- Review Star Rating In Google Search Results -->

Debugging the Errors

This is the shortest code that you can see for the rating element in blogger but if you encountered in any errors in structured data testing tool please comment below with your errors. I successfully tested this feature in flex mag and its working great.

This code doesn't guarantee that your search result would show ratings, it is up to Google whether to show or not, but this code works like a charm. Google checks on various criteria before showing your rating tag like website authority etc to enhance the credibility of what it offers to people.
Type site:www.pcweek.in and see whether my article on Google is showing rating or not

Conclusion 

I Hope that you liked this post on How to Add Google Rich Snippets in Blogger. You can freely comment on your doubts and queries below.

If you liked this article, then please share this with your friends. You can also find us on Twitter, Facebook, YouTube, and Instagram.
bm

I'm an Electronics Engineer with years of experience in Blogging and DIY Projects. I like to make new gadgets and write contents related to technology and Blogging.