AMP for Blogger Step-by-Step Implementation Guide

Now, you may implement AMP (Accelerated Mobile Pages) to your blogger blog with simple change in your HTML template. It’s very easy and there is no need for any expert. You can do it yourself.

How to implement AMP for Blogger Blog

First of all go to the template editor. Theme Edit HTML and then follow these step-by-step implementation guide. If you implement AMP for your blog, your blog will run faster than ever.

Step-1 (Change HTML):


To make your blog AMP friendly, find and replace <html> code with the following code:

<html amp='amp'>

Step-2 (Change Charset and Viewport):

Check for the for the charset and viewport meta tags in your blog template editor. If not present, copy and paste the following code after <head>.

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

Step-3 (Canonical link):

Make your blog discoverable using canonical tag. Now, Google uses AMP version of webpage as a signal for SEO ranking. Check for the for the canonical link tags. If not present, add the canonical link like the following which will simply point to itself.

<link rel="canonical" href="" />

Copy and paste the following code after the viewport tag as updated above in step-2 for blogger amp.
<link expr:href='data:blog.url' rel='canonical'/>

Step-4 (Change HEAD):

Thereafter, find and replace </head> code with the following code and make your blog mobile friendly by AMP:

amp-boilerplate='amp-boilerplate'>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal
both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes
<script async='async' src=''></script>

Step-5 (Change Image Tag):

Normally, we use <img> tag for image but in AMP you have to use amp-img instead of only img. Therefore, change the img tags into amp-img tags like the following example:

<amp-img src="AmpImage.jpg" alt="amp-img" height="500" width="500"></amp-img>

How to check AMP pages validity?

Open your AMP page in Chrome browser, for example –

Append “#development=1” to the URL, for example –

Right click and open the Chrome DevTools console and check for validation errors.

Open the web interface at

Enter the url value to the URL field, for example –

Any changes to the html source made in this interactive editor result in interactive revalidation.

Tags : Blogger BlogBlogger Templates

Leave a Reply

6 Comment threads
1 Thread replies
Most reacted comment
Hottest comment thread
7 Comment authors
newest oldest most voted
Notify of

Great Posting…
Keep doing it…

Eminent Digital Academy

This is very useful & helps Blogr users add AMP HTML for their blog. Even with the new improved responsive themes recently released by Blogger team — AMP features is what users are waiting for.

Your topic selection is very unique and informative for readers but one thing is sure, the article is well written and quality too. Thanks for sharing with us your experience.

This really great tutorial, I have been looking for a way to make my blog amp but I have a question to ask will Google Adsense be showing up on amp version of my blog if l convert it?

will these steps work for self-hosted WordPress blog? I hope it will. Is there any plugin to do this for my WordPress blog

Thanks for the guidance on how to install amp pages, it is really helpful and necessary to rank higher.