Blogger AMP

AMP for Blogger Step-by-Step Implementation Guide

AMP for Blogger: 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.

AMP (Accelerated Mobile Pages) is web pages that are compelling, smooth, and load near instantaneously to ensure your website is fast, user-first, and makes money online.

All website owners wants more and more organic traffics and mostly users search their queries using their smartphones. Thus, your blog must be mobile friendly.

Accordingly, you should use responsive blogger theme. Good news is that now blogger default themes are responsive. But, Google prefers AMP version of sites rather themes designed for mobile visitors.

How to implement AMP for Blogger Blog

AMP Validator: Before going to change your blogger HTML code to implement AMP for your blog, just check whether your blog has already supports AMP.

AMP Validator
AMP Validator

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.