Blogging Tips



Saturday, 26 September 2020

How to Add images in AMP Website Posts ?

 Created an AMP website but getting the Issue of AMP error on Images and unable to add thumbnails in Posts because of  AMP error.

Here is the Solution for AMP issues regarding images, thumbnail and the Post pictures. So do not go Panic and let's check for its solution.

how to add images in amp template

As we Know AMP Pages or website do not allows the Directly added image in a website which causes an error in the AMP section of the Website's from Google Search Console and your website is not treated as a AMP website in Search result.

So here are the Methods by which you can add images in your website and eventually you will also not get any kind of AMP error.

What is AMP ? 

AMP stands for Accelerated mobile Pages which are able to open with speed in any sized devices. These allows website to even load in low and less Network And internet connection.

AMP website is the Best and recommended template by Google which can be accessible via any device and is opened even in low internet connection.

Google Also recommends the site to be an AMP website as the Most of the Users in the World are by Mobiles which should be also able to get the Same value as the Desktop User are taking.

So in the Upcoming time almost all the Website will be AMP and will be Providing content in keeping mind the Generation of Mobile users.

Why do we get AMP error on Images in website ?

When one adds images in An AMP website, then he might be facing the issue of AMP because the Images are directly added into the Posts which are not accepted by the AMP Rules.

AMP Allows the Images which can be resized into perfect ratio as the Device screen changes from desktop to Mobile or any other device.

In an AMP template, Images are resizable fully adjustable in any kind of devices and is fully designed for Mobile Users which is also be opened in Windows and laptop size.

If we directly add images in a post of AMP template, then we may get the Error in AMP template via the Google Search  Console by which your site will not be treated as an AMP template in Google Search.

How to Add Images in AMP Website ?

But there are methods by which you can add images in post in an AMP template, by which you will also not get any kind of error in search console. adding images in the Post gives an adorable look in the Website post.

So you have to do is to just not to add the Images Directly into your post which is not the Perfect way for posting images in website, instead of this you have to edit the HTML of your Post and add that image.

When we normally add the Images in the Post it creates the HTML code - 
<img src='Images URL' alt='image alt'/>

as this is the Image it takes the Perfect and full size of the Image and is not adopted by the AMP template.

How to Add images in AMP Template ? 

to add the Images in AMP template, just edit the Image HTML code instead of a normal image HTML code.

AMP Template Image :- 

<amp-img src='Image URL' alt='Image alt' Height='image height' width='image width'></amp-img>

Note :- Until you do not add height and width in the Code your AMP image will not be visible. So Add Height and Width value of the Image.

If any kind of issue please let me know.

No comments:

Post a comment

Comment Here for Suggestions And Complaints.