How to implement AMP for Blogger Blog
First of all go to the template editor. Theme⇒ Edit HTML and then follow these step-by-step implementation guide. If you implement AMP for your blog, your blog will run faster than ever.
Step-1 (Change HTML):
To make your blog AMP friendly, find and replace <html> code with the following code:
<html amp='amp'>
Step-2 (Change Charset and Viewport):
Check for the for the charset and viewport meta tags in your blog template editor. 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-3 (Canonical link):
Make your blog discoverable using canonical tag. Now, Google uses AMP version of webpage as a signal for SEO ranking. Check for the for the canonical link tags. If not present, add the canonical link like the following which will simply point to itself.
<link rel="canonical" href="https://www.aubsp.com/article-metadata.html" />
Copy and paste the following code after the viewport tag as updated above in step-2 for blogger amp.
<link expr:href='data:blog.url' rel='canonical'/>
Step-4 (Change HEAD):
Thereafter, find and replace </head> code with the following code and make your blog mobile friendly by AMP:
<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-anim
ation:none;-ms-animation:none;animation:none}</style></noscript>
<script async='async' src='https://cdn.ampproject.org/v0.js'></script>
</head> </>