Schema.org metadata/tags for Blogger – Advanced Practices

Today we will discuss how you can use better schema.org metadata/ tags for Blogger. If you are thinking what is Schema.org meta tags? Then answer is, it is an alternative to Open Graph metadata. Schema.org is now using by Google for Blogger blogs by default. If you have not updated your blog theme recently then you are missing Schema.org meta tags, which is now available with every new Blogger theme. It is also known as Schema.org microdata. Every one is nowadays talking about Open graph meta tags, nobody has taken the initiative to discuss Schema.org metadata. So we are here to tell you in detail about this.

A new Blogger theme has only the two Schema.org tags, these two are “name” and “description”. The Schema.org has many meta tags properties for a blog, you can find these on this link – http://schema.org/Blog. We have created a Schema.org metadata or tags setup for three-page types of Blogger – Home Page, Item Page, and Static Page. It will automatically generate all necessary Schema.org metadata information as output. You need not do anything manually. Just create posts as you always do.

Schema.org Microdata for Blogger

How to put Schema.org metadata in your old Blogger theme

1. Just find this code –

<body>

If not found please try this –

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

2. Now copy the following code and paste it just Below searched <body> code –

<div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<meta expr:content='data:blog.pageName' itemprop='name'/>
<meta expr:content='data:blog.canonicalUrl' itemprop='url'/>
<b:else/>
<meta expr:content='data:blog.title' itemprop='name'/>
<meta expr:content='data:blog.homepageUrl' itemprop='url'/>
</b:if>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image'/>
<b:else/>
<meta content='//blog-logo-url-square-size-is-good' itemprop='image'/>
</b:if>
</div>

If you are using New Blogger template

Then search for the following code by using keyword “http://schema.org/Blog” –

<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
      <meta expr:content='data:blog.title' itemprop='name'/>
      <b:if cond='data:blog.metaDescription'>
        <meta expr:content='data:blog.metaDescription' itemprop='description'/>
      </b:if>
    </div>
  </b:if>

and replace “entire” code with the following code –

<div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<meta expr:content='data:blog.pageName' itemprop='name'/>
<meta expr:content='data:blog.canonicalUrl' itemprop='url'/>
<b:else/>
<meta expr:content='data:blog.title' itemprop='name'/>
<meta expr:content='data:blog.homepageUrl' itemprop='url'/>
</b:if>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image'/>
<b:else/>
<meta content='//blog-logo-url-square-size-is-good' itemprop='image'/>
</b:if>
</div>

In any case, must not forget to change the value “//blog-logo-url-square-size-is-good” with your blog’s logo URL. A square blog logo is much appreciated.

GitHub gist – https://gist.github.com/vinayprajapati/5881629

I believe you will like our blog post and find this very useful for your blog. If have any doubt and question on please leave a comment below for us.

7 thoughts on “Schema.org metadata/tags for Blogger – Advanced Practices”

  1. Hi,

    I kept marquee of images in the body section and the G+ share button is taking images from that marquee section…when I try to G+/Share the post.
    when I go on click next image in the G+ it is showing all the images from the marquee.

    I installed your above schema code as said by you.
    after this G+ is taking the thumbnails from the main post first (which is good) later when I click on the next image it is again showing all the images from marquee…

    Hope I’m clear enough… Can you help me to fix this?

  2. Avatar photo
    Marco Antônio do Nascimento Andrade

    this code will show rating star for my website on search page results ?

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top