How to add Google Accelerated Mobile Pages (AMP) in Blooger
I am a Google Blogger user and it’s a really amazing place for a newbie
to start. Some f my blog are still on Blogspot. Everyone is buzzing
about AMP and its brilliant if you are talking in sense of mobile web
pages loading speed. It has taken page loading standard to a new level. I
have written a post about Accelerated Mobile Pages and many people
asked me and even search result is filled with keywords like “how to use
google amp on blogger” and “google amp wiki”. So I finally decided to
write an easy guide to setup Google AMP on Blogspot or Blogger.
What is Google AMP?
AMP stands for Accelerated Mobile Pages. It is a new project by
Google to build mobile web pages for static content that render fast.
AMP Pages use AMP HTML, AMP JS, and AMP CDN to process and deliver light
web pages at lightning speed.
Google introduced AMP with the vision that publishers can create
mobile optimized content once and have it load instantly everywhere.
How to Implement Google AMP on Blogger Blog?
Step 1: Create AMP HTML
Backup your Blogger Template to be safe from any kind of problem. Now
GoTo your Blogger Dashboard -> Template -> Edit Template.
Replace <html> code with the following code:
<html amp=’amp’>
Step 2: Add Charset and Viewport Meta Tags:
Search and Check for the charset and viewport meta tags. If it is not
present, copy and paste the following code after <head> tag:
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
Step 3: Add Canonical Tags:
Make your blog discoverable using canonical tag. Check for the
canonical link tags. If it is not present, add the canonical link like
this <link rel=”canonical” href=”http://example.blogspot.in/article-metadata.html” /> which will simply point to itself.
Copy and paste the following code after the viewport tag:
<link expr:href=’data:blog.url’ rel=’canonical’/>
Step 4: Setup AMP CDN:
Paste this code just above the </head> tag:
<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>
Step 5: Setup AMP Image:
Change the image tags into amp-image tags like the following example code:
<amp-img src=”AmpImage.jpg” alt=”amp-img” height=”500″ width=”500″></amp-img>
Now everything is done.
I hope it will help you. Accelerated Mobile Pages is a Google-backed
project and Blogspot is Google’s blogging platform but still Blogger
doesn’t currently support AMP. So we can’t wait for them and we even
don’t know when they will start supporting. So use our tricks and tweaks
to add AMP support in blogger site. If you are facing any problem then
comment below.