Fix All Image errors From Blogger For Accelerated Mobile Pages

Image is most important part of any Blog readers and search engine. However if you add images on your Blog then your Blog readers can see that. But for search engine it is not possible to detect image. Simple we can say search robot is a machine which hasn’t capability to detect image.

But almost all major search engines developed a common language for search machine to understand the all property of your Website. For example if you add post title then you must denote it by adding an attribute that this is your content’s post tile. Similarly in case of image you must declare to search engine that this is an image. And after declaration search engine will get additional information from your Blog about image object.  So in this article I will show you how to solve the image error from your Blogger template to have them prominently served to desktop and mobile users.

First you should aware about image error on your site. For diagnosing the error you must use any structured data testing tool, I always use Google structured data testing tool for finding any kinds of error on my Blogger template.  Just visit the below URL and by click on Fetch URL test your Blog site.

• https://developers.google.com/structured-data/testing-tool/

In case of image error you will see 2 types of error. Image is missing and required error and second is image error under Accelerated Mobile Pages (AMP). I will show you to solve the both error from your Blogger template.

How to solve image: Missing and Required Error from Blogger Template?

This is general error this is happen due to wrong indication of Blog post image. Formerly in almost all Blogger template used image_url attribute for declaring image for search engine. But after introducing the schema.org markup image_url attribute become invalid. Now if you test your website then you would see image: missing and required error. Because blog page contains property image_urlwhich is not part of the schema.org. but we can solve this very easily. Just follow the below steps-

Step 1 Go to https://www.blogger.com and Sign in to your account

Step 2 From Blogger Dashboard click on ->Template ->Edit HTML 

Step 3 And locate all image_url by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 4 Simply replace all image_url with image.

Step 5 Finally click Save template button.

Now you would see all image: missing and required error has gone. But still images are showing with red alert. What’s the reason behind this?

This is happening for AMP article’s error. And for solving this error we have to add extra piece of script. I will discuss it below.

How to solve image Error from AMP article?

AMP used to serve mobile users outstanding way. Under AMP you must indicate and give details information about image and its dimension. Don’t worry I will show you how to do it?

Step 1 Visit https://www.blogger.com and Sign in to your account

Step 2 From Blogger Dashboard click on ->Template ->Edit HTML 

Step 3 And locate script like below from your Blogger template

<article class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

You will find this markup below of <b:includable id='post' var='post'> line.

Step 4 Now copy the below schema markup code and paste it below of <article class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>code.

<b:if cond='data:post.firstImageUrl'>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
  <meta expr:content='data:post.firstImageUrl' itemprop='url'/>
  <meta content='700' itemprop='width'/>
  <meta content='400' itemprop='height'/>
  </div>
    </b:if>

Customization

• Please change the 700 and 400 with any image dimension. Google recommend is 800px X 800px. In case of my template all first image dimension is 700px width and 400px height.As a result this will give additional information to search robot that my entire blog’s first image dimension is 700px X 400px.

Step 5 Now click on Save template button from top right corner of the screen.

Now check your Blogger template by visiting https://developers.google.com/structured-data/testing-tool/URL. Now see all image error has gone from your template.

I hope this problem solving article will help you to make your template error free. If you face any trouble to apply this markup then please write in comment section. And if you have any alternative ideas then please share with me. Thank you. Happy Blogging!!!