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?

26
data:blog.title
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!!!
Fix All Image errors From Blogger For Accelerated Mobile Pages
4 Stars stars - "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 ...

Post a Comment

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?

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.

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

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

I followed his instructions step by step, but I still have 28 errors in the blog's home page. In individual entries zero errors, which I think is fantastic, but I procupa 28 errors (image). I would like you to review the template, but do not know if you have time or want to. Could you help me?.

Thank you very much for your attention to my problem. I'm really grateful.

Hi Alma you are using Mas Sugeng's template and his most of the template release with encrypted code. If your template's auto readmore script has written with encrypted then it is not possible to apply the trick. but if I found plain script then I can fix it. Send me your template backup. I will fix it when I get free time. Thank you.

Thanks Bro You Always Solve Our Problems.

Welcome and thanks for your Compliment. |o|

Thank you. I had not wanted to write because I think it must be very busy, but I'm really desperate to solve my problem. I've been looking for a solution in Google and can not find help.
I send a copy of the template, I trust you and I'm sure will find the mistake and give solution.
Very grateful in advance, best regards. alore67

Hi Alma, I have created this site for solving problems and helping new Blogger. Please don't hesitate to write me. And you can send me your template. But I will work on it when I am free. Recently I am working on couple of paid template designing. So little bit busy on it. You can send me email on admin@bloggerspice.com

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

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. ^_^

firstimageurl & thumbnail url are not working why?
amprandom.blogspot.com

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. ^_^

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/

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". Αλλά αυτό απαιτεί εκ των προτέρων γνώση κωδικοποίησης. Να είστε προσεκτικοί σχετικά με αυτό. πριν κάνετε οποιεσδήποτε αλλαγές έχουν πάντα ένα αντίγραφο ασφαλείας του προτύπου σας.

Hey Thanks! I used your help to create an AMP blogspot - https://amprandom.blogspot.com.
Here is how I did this - https://amprandom.blogspot.in/2016/08/amp-blog-with-accelerated-mobile-pages.html

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

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

Thanks alott!!
This article helped me!

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *