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

Share... ☂

Share on Facebook
Share on Twitter
Share on Google+
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
Share :

zealmatblog

3 comments:

  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

    ReplyDelete
    Replies
    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.

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

    ReplyDelete



Parse Your Adsense HTML code Here





We love to hear from you!

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