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_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!!!