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

Get Free SEO Tips

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

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 897 Articles
My Name is 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

  1. ITy Unit May 13, 2017
    • Mathias Amodu May 13, 2017
  2. Wisdom Michael May 15, 2017

Leave a Reply

*