How to configure blogspot for Rich Snippet schema

How to configure blogspot for Rich Snippet schema

All the instructions is done on blog theme.

1. login to blogger dashboard

2. Scroll down and click on Theme.

3. Select or click Edit HTML (ensure you backup your template).

4. Click Ctrl + F to bring out search button.

5. Add or replace codes below.



For MainEntityOfPage

Add Schema entity

find in search

<b:includable id='post' var='post'><br />  <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <br />  
 add or replace

 <b:includable id='post' var='post'><br /> <!-- Commented code<br />    <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <br /> -- End Commented code --><br />     <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <br />       <meta itemscope='itemscope' itemprop='mainEntityOfPage'  itemType='https://schema.org/WebPage' expr:itemid='data:post.link' content= 'data:post.link : data:post.url'/><br />      
Findin the theme

<b:includable id='mobile-post' var='post'><br />     <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <br />    
Add or replace

<b:includable id='mobile-post' var='post'><br /> <!-- Commented code<br />    <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <br /> End Commented code --><br />    <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <br />      <meta expr:itemid='data:post.link' content= 'data:post.link : data:post.url' itemType='https://schema.org/WebPage' itemprop='mainEntityOfPage' itemscope='itemscope'/><br />    
Or add this below 2 code
Search your template for schema.org/WebPage.
Insert the New code within the schema.org/BlogPosting and schema.org/WebPage code blocks.

    <div itemprop='publisher' itemscope='itemscope' itemtype='https://schema.org/Organization'> <br />       <div itemprop='logo' itemscope='itemscope' itemtype='https://schema.org/ImageObject'> <br />         <!-- Schema Mods: THE FOLLOWING URL WILL FAIL - CHANGE IT --><br />         <meta itemprop='url' content='http://www.myOrganization.com/OrgImage.png'/> <br />         <meta itemprop='width' content='600'/> <!-- Logos should be no wider than 600px. --><br />         <meta itemprop='height' content='60'/> <!-- and no taller than 60px.--><br />       </div> <br />       <meta itemprop='name' expr:content='data:blog.title'/><br />     </div> <br />
   


Logo should be no wider than 600px, and no taller than 60px


For Blogger: blogId and postId structured data errors

 Original code:

<br />      <meta expr:content='data:blog.blogId' itemprop='blogId'/><br />      <meta expr:content='data:post.id' itemprop='postId'/><br />
Updated code:

   <!-- Commented section<br />      <meta expr:content='data:blog.blogId' itemprop='blogId'/><br />      <meta expr:content='data:post.id' itemprop='postId'/><br />     End Commented section --><br />  
    <meta expr:content='data:blog.blogId'/><br />     <meta expr:content='data:post.id'/><br />

For Blogger: dateModified (and datePublished) structured data error look like ????????????????????
    <meta expr:content='data:post.timestamp' itemprop='datePublished'/>
    <meta expr:content='data:post.lastUpdatedISO8601' itemprop='dateModified'/>
   
For Blogger: headline structured data error
 Original code:

    <h3 class='post-title entry-title' itemprop='name'> <br />
Finished code: add or replace

<!-- Commented code:<br />     <h3 class='post-title entry-title' itemprop='name'> <br /> End Commented code:--><br />

<h3 class='post-title entry-title' itemprop='headline'>


For Blogger: image structured data error
Images should be at least 696 pixels wide
   
     Original code:

    <b:if cond='data:post.firstImageUrl'><br />       <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/><br />     </b:if><br />
Finished code: add or replace

<!-- Commented code<br />     <b:if cond='data:post.firstImageUrl'><br />       <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/><br />     </b:if><br /> End Commented code --><br />
    <div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'> <br />       <b:if cond='data:post.firstImageUrl'><br />         <img style='display:none;' expr:src='data:post.firstImageUrl' alt='Textual description of firstImageUrl'/><br />         <meta itemprop='url' expr:content='data:post.firstImageUrl'/> <br />       </b:if><br />       <meta itemprop='width' content='800'/> <!--Images should be at least 696 pixels wide.--><br />       <meta itemprop='height' content='800'/><br />     </div> <br />

For Blogger: image_url structured data errors
 Original code:

          <b:if cond='data:post.thumbnailUrl'>
            <meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/>
          </b:if>

Finished code:

          <b:if cond='data:post.thumbnailUrl'><br />             <meta expr:content='data:post.thumbnailUrl' itemprop='url'/><br />           </b:if><br /> <br />



Check the following blog methods

Browse unlimited with MTN 1GB for 200

How to add textarea in blog or wordpress

How to add background colour or blog or WP.

How to add footer widget or gadget advert in blogger.

Get 10 Top Technology gadgets Tips.

How to use image as background blogger post.