How to setup Google AMP in Blogger

AMP stands for Accelerated Mobile Page which is a Google project. If you setup Google AMP in your blogger, your blog post will start loading so fast with images, videos and Ads.

It is a modern era where people wants everything in seconds or minutes so whenever they search something on Google and it takes some long to be open they don't wait for its opening they get back and visit other sites. Mobile phones specially smartphones have been most necessary and useful device for the people of the same era. Almost 70% internet users browse/surf internet in smartphones. Therefore Google launch this project for Smartphone users. It loads webpages so fast which attract visitors and encourage bloggers. Probably you know it is also one the Google Ranking Factors. Google ranks that site upper which loads fast.

What is Google AMP?

Google AMP is a standard project which is launched by Google and Twitter together. This project works on HTML and CSS. Google AMP compress JavaScript code into HTML that's why webpages load faster. It removes extra content and widgets from webpage. Google AMP project was launched in February 2016 and now it has become popular among bloggers.

Google AMP Setup steps in Blogger


There are many wordpress AMP plugins available for WordPress site by which site can be AMP enabled very easily but it's not common for blogger/blogspot site.

If you have decided to apply Google AMP in Blogger, So get ready to set it up manually. There is no any alternative option except manual. By the way, it's not so hard you can do it if you know some HTML coding. If you don't have coding skills I will elaborate everything here in the easy way.
Act on following steps for fast loading :-


#1  Download Google AMP Blogger Theme

Download Google AMP Blogger Theme and apply it to your Blogger site. Many sites offer free Google AMP theme, you can also use paid theme. Don't forget to take backup of your current theme.


#2  How to compose post in Google AMP

Now your site has been enabled on Google AMP. You will have to use AMP tag in all images, videos and Ads. Whenever you shall update a new post on your blogger you have to use HTML option instead of Compose but keep in mind that you need to clear all HTML tags already given, because it consists div tag which Google AMP considers page error. If you don't remove that prefix code it will show div tag related errors. That's why your webpages won't be indexed in Google. You'll have to insert images, videos and Ads in AMP. I will explain it down for your comfort.


#3  Modify old post in AMP

You need to insert AMP tag in all of your old blog posts otherwise you'll have to face errors in Search Console. Google shan't index all those old posts because they are non amp. If you want all posts to be open without any error so do modify/edit your old posts. You have to add AMP images, videos, Ads and remove div tag and style from the coding.


How to make AMP images

You'll have to use AMP tag to make AMP images. Which image we insert in the post remains non amp and its HTML code looks like this -

<img sec=.......</img>
You need to replace img to amp-img as showing this example
Before

<img src="infobyak.jpg" alt="infobyak" height="450" width="700"></img>

After

<amp-img src="infobyak.jpg" alt="infobyak" height="450" width="700"></amp-img>

You have to replace your image address in the above HTML code and this is all to make AMP image.

Make AMP video

Most of the Bloggers add their video from YouTube. To make your YouTube video in AMP just copy this code and make a change in this coding -

<amp-youtube
data-videoid="mGENRKrdoGY"
layout="responsive"
width="480" height="270"></amp-youtube>

In this coding you just need to replace your YouTube video ID and your video will become in AMP.


Create AdSenae AMP Ads

For creating AdSense AMP responsive Ad you just need to copy this code and make changes

<amp-ad
layout="fixed-height"
height=100
type="adsense"
data-ad-client="ca-pub-13563278374853"
data-ad-slot="0123456789">
</amp-ad>

Now just replace your publisher ID and also Ad Slot code. In this way your Ad will become in AMP.

This post ends here. Try it out on your Blogger site to make it faster to load and do share your experience with me in the comment box below.

Post a Comment

0 Comments