How to Add Google Rich Snippets in Blogger - PC Week | Weekend Tech Network
Logo Designing - Video Editing - SEO and Adsense Optimisation

How to Add Google Rich Snippets in Blogger

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: I don't like to annoy my readers with false hope and information. So first check the proof and follow this tutorial 

What are rich snippets?

The snippet is simply what Google shows to a user when someone searches in 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 colour and URL in green colour. 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 favoured in the google search results, therefore, we have to focus on optimising 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 optimised to provide only the relevant information and to optimise 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

Optimised Standalone Code for Blogger without any third party widget.

<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>


Note: Keep a backup of your theme and proceed to protect your data.

Paste this code above the <div class='label-head'> and Save the theme.

And Recheck your Post URL in Google Structured data testing tool and check whether it's showing any error. (This code only works with the posts)

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

If you want to add rating in all page and homepage you have to paste it, above the <b:if cond='data:blog.pageType == &quot;item&quot;'>. But it is not recommended to do this we only need the rating in our post, not in all our pages so just follow the above procedure.

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. Copy the below code and paste between <head> and </head> tags .
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://plus.google.com/u/0/104965556781877515559&quot;
},
&quot;url&quot;: &quot;<data:blog.canonicalUrl/>&quot;,
&quot;datePublished&quot;:&quot;2018-12-13T20:00&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 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.

Check out this - How to change Blogger URL | Remove Date

6 comments:

  1. hi guys, you have great article, i will try it, its need a long time to see what i've done.

    ReplyDelete
    Replies
    1. No bro just apply the code and goto your Search console and fetch your URL ones more it would recrawl your website but it will take time to update the search result but you can see your updated link by just typing site:www.example.com in google

      Hope you understand thanks for your feedback

      Delete
    2. Hi Muhammed Fasil K! I didn't find label-head class in my theme.

      Delete
    3. Hi, You can use the second method it is perfect for every theme.

      [Post Updated with Google recommended JSON-LD format]

      Delete
    4. ☛ Updated On 01/09/2019

      - Schema code with Google recommended JSON-LD format

      Delete

Powered by Blogger.