How to add Google Accelerated Mobile Pages (AMP) in Blooger

on

How to add Google Accelerated Mobile Pages (AMP) in Blooger

 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.

Comments

Post a Comment