How To Implement AMP(Accelerated Mobile Page) on Blogger Blog or Blogspot | Tech Blog in Africa for How TOs


How To Implement AMP(Accelerated Mobile Page) on Blogger Blog or Blogspot


Share... ☂

Share on Facebook
Share on Twitter
Google Plus
AMP(Accelerated Mobile Pages) is a new web language created by Google to make websites load faster on iPhones, Androids, and other smartphones. Originally aimed at news websites and blogs, AMP is a stripped down version of standard HTML and JavaScript that better optimizes websites by prioritizing content loading and prearranging photos.


I most people might be thinking this feature is only used or created for those on the WordPress platform but today we will show you how to add the AMP to your Blogger or blogspot blog just follow the steps below carefully.

Step 1
First you need to log into your blogger dashboard then select your preferred blog.

Step 2
Now scroll your mouse down to theme and click on it.

Step 3
Then click EDIT THEME.

Step 4
Now press CTRL + F and search for this code  <html> just replace the code with the following code below

<html amp='amp'>

Step 5
Carefully look for the charset and viewport meta tags. 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 6
For your blog discoverable make use of canonical tag. Check for the for the canonical link tags. If not present, add the canonical link like 

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

It will now point to itself just Copy and paste the following code after the viewport tag.

<link expr:href='data:blog.url' rel='canonical'/>

Step 7
Now Replace </head> code with the following code:

<style 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 -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async='async' src=''></script>

Step 8
Change your img tags into amp-img tags just like one below.

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

Hope you enjoyed it
Show zealmatblog love by Copying the Below link and Share on Social Media
Share :



  1. First question. Have you done it.
    Cos the few site that I have seen that did amp are not loading properly. added to lose of ads revenue

    1. Yes..... Try to use AMP AMP-compatible ad unit.

      So, if you're wondering about the effects of AMP AdSense, my experience is that you won't lose out, and in some cases it might be worth your while.

  2. I cant find the code in step 4 in my template, am stucked there.


Create your website from just N299/Month with DomainKing.NG.

P.S: Want me to help you personally? If yes, you can buy my helpful eBooks or Hire me now!

Do you need original SEO ready articles for your blog or website? If yes, hire Mathias Amodu on Fiverr. Expect simply the best from me.

Parse Your Adsense HTML code Here

We love to hear from you!

Sign in to comment "anonymously" without entering verification text.