Home
SEO

Fix All Image errors From Blogger For Accelerated Mobile Pages

How to fix Image errors from Blogger template, in order to have them prominently served to desktop and mobile users?
blogger template image error

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_url which 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!!!

33 comments

  1. Thank you very much for your article, following the steps that you point out, I managed to fix some errors and the truth is that was a great help to me. Now I have 2 new errors. I am using a custom template. :(
    author: lack and is required
    name: lack and is required
    Could you help me?
    • Hi alma..for solving author missing error please follow the tutorial from below URL

      http://www.bloggerspice.com/2015/12/trick-to-fix-missing-author-error-from-Blogger-template.html
  2. Excuse me, the errors of "image" was solved on individual entries, but errors still appear in the blog's home page. (Author and Name)
    If possible I would appreciate help me, please.
    • I have understood your problem. This is happening for not wrapping up custom Blogger template's thumbnail generator script. To solve this issue please find code like below-

      <b:if cond='data:post.firstImageUrl'>

      and wrap up whole code by script from step 4. You will find <b:if cond='data:post.firstImageUrl'> 2 or 3 times in a Blogger template. So wrap up all.

      For example I have fixed the issue in my template

      <div itemprop='image' itemscope='' itemtype='https://schema.org/ImageObject'>
      <meta content='700' itemprop='width'/>
      <meta content='400' itemprop='height'/>
      <b:if cond='data:post.thumbnailUrl'>
      <a class='thumbimgx' expr:href='data:post.url' expr:title='data:post.title' itemprop='image'><img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='160' itemprop='url image' width='180'/></a>
      <b:else/>
      <b:if cond='data:post.firstImageUrl'>
      <a class='thumbimgx' expr:href='data:post.url' expr:title='data:post.title' itemprop='image'><img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' height='160' itemprop='url image' width='180'/></a>
      <b:else/>
      <a class='thumbimgx' expr:href='data:post.url' expr:title='data:post.title' itemprop='image'><img class='post-thumbnail' expr:alt='data:post.title' height='160' itemprop='url image' src='http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif' width='180'/></a>
      </b:if></b:if>
      </div>

      I hope now your problem will be solve. Thank You. :D
  3. Thanks Bro You Always Solve Our Problems.
    • Welcome and thanks for your Compliment. |o|
  4. meta content='https://4.bp.blogspot.com/-7BjdE__jYdg/VyyZBRZgD6I/AAAAAAAACD8/iozB1ITpWmwLZ0jiBjWZPcFufAhj1yTjQCLcB/s400/figure%2B11-1.jpg' itemprop='image_url'
    am getting an error in this image and other ones please why only on some of my post how can i solve this help me out
    thanks
    http://android4allpeople.blogspot.com/
    • Hi Cyril.. You have to follow the above guidelines for solving the error. But according to your script 'image_url' is not readable by schema.org. just replace it by 'image' you won't see error after changes.:t
  5. https://amprandom.blogspot.in/
    Why doesn't thumbnail image appear?
    • Hi Naresh, It seems to me that your template has broken. Edit your older posts and upload new image there and after that publish the post. If it works then ok. But if doesn't work then there may have coding error in template. ^_^
  6. firstimageurl & thumbnail url are not working why?
    amprandom.blogspot.com
  7. Could you give us some sample AMP Blogspot blog
    • Hi Ganga Naresh,
      Unfortunately Google Blogger not supporting AMP. But Other platform like WordPress support AMP. I hope near future Google Blogger platform will support it. ^_^
  8. Good afternoon and thank you to you have helped a lot in this specific I can not solve two errors (1) image
    https://3.bp.blogspot.com/-7oAG5YB7MPw/U-4V1yDUahI/AAAAAAAAIpQ/mtOYAM5FPds/s1600/original7.jpg (The price image.itemtype attribute is invalid.) and (2) headline
    A value for the headline field.
  9. https://igglesis.blogspot.gr/
  10. Good afternoon and thank you to you have helped a lot in this specific I can not solve two errors (1) image
    https://3.bp.blogspot.com/-7oAG5YB7MPw/U-4V1yDUahI/AAAAAAAAIpQ/mtOYAM5FPds/s1600/original7.jpg (The price image.itemtype attribute is invalid.) and (2) headline
    A value for the headline field

    https://igglesis.blogspot.gr/
    • Hi Tromero,
      "Step 4" is very important. You have to tweak your blogger template on "step 4". Your current "Auto ReadMore" script have to modify with code from "step 4". But it requires advance coding knowledge. Be careful about it. before making any changes always take a backup of your template.

      ^_^

      "Βήμα 4" είναι πολύ σημαντικό. Θα πρέπει να τσίμπημα το πρότυπο Blogger σας στο "βήμα 4". τρέχουσα σας σενάριο "Auto readmore" πρέπει να τροποποιήσετε με κωδικό από το "βήμα 4". Αλλά αυτό απαιτεί εκ των προτέρων γνώση κωδικοποίησης. Να είστε προσεκτικοί σχετικά με αυτό. πριν κάνετε οποιεσδήποτε αλλαγές έχουν πάντα ένα αντίγραφο ασφαλείας του προτύπου σας.

  11. Thank you very mohammad try it but the problem is not to solve eise well bro if there is any other solution'm waiting reply thanks
  12. Hi Mohammad Fazle.. will removing the attribute image_url will cause issue with Google+ share and some other search engine bots that use this? There seems to be inconsistencies when google plus app can not extract automatically the post images when shared.

    We test it out here at http://blogr-amp.blogspot.com and not sure either the amp-social-share plugin or the attributes was missing which causes this.

    But we resorted to use back the image_url meta just to make sure it that the post image can be extracted when shared...

    Anyway thxs for the share..
    • Hi Irash,
      Still AMP is not suitable and compatible with Blogger. But we can make our Blog according to Google's Structured Data Testing Tools". For removing image error you must replace all "image_url" to "image" only.

      some social media can't detect image because of missing Open Graph Meta tags. Please follow the tutorial from below URLs. I hope it will work now.

      http://www.bloggerspice.com/2015/01/how-to-add-facebook-open-graph-meta-tags-in-blogger-template.html

      http://www.bloggerspice.com/2015/11/what-is-facebook-open-graph-protocol-and-why-you-need-it.html

      Thank you. :up
  13. Thanks alott!!
    This article helped me!
  14. I am looking for removing the error such type "A value for the url field is required" for url option. What can I do?
    • Hi Elliyas Ahmed, Actually i can't understand your query. can you write me in details. thank you.
      :(
  15. Thank you very much
    • Welcome buddy.. I'm stumble to see you here. :)
  16. Thanks for this piece....
    • Hi Obileye Abolaji :)
      Welcome to BloggerSpice..and thansk for your comment. :up
  17. I'm facing the Blogid, postid, datepublished, headline, publisher error's.
    could you please more explicit to me?
    http://dream11-kabaddi.blogspot.com/
Go Up