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

Get Free SEO Tips

amplogo
Follow me

Mathias Amodu

Founder at Zealmat Limited
Mathias Amodu, a passionate blogger with full interest in making the world a better place for upcoming webmasters in the society at large
Follow me
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.
Image

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.

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

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=”http://example.blogspot.in/article-metadata.html” />

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=’https://cdn.ampproject.org/v0.js’></script>
</head>

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

About Mathias Amodu 912 Articles
Mathias Amodu, a passionate blogger with full interest in making the world a better place for upcoming webmasters in the society at large

4 Comments

    • 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.

Leave a Reply

Your email address will not be published.


*


[mc4wp_form id="3153"]