What is AMP? / What are Accelarated Mobile Pages?
AMP is a way to build mobile pages for static content that render fast. The AMP JS library ensures the fast rendering of AMP web pages. Google introduced AMP with the vision that publishers can create mobile optimised content once and have it load instantly everywhere.What is Google AMP Cache?
The Google AMP Cache is simply a proxy-based content delivery network that delivers all valid AMP documents. It fetches AMP HTML pages, caches them, and improves performance of the page automatically. The Google AMP Cache loads the document, all images and JS files from the same origin that is using HTTP 2.0 to provide maximum efficiency.For Example -
URL of this blog page hosted in Blogger Platform - amprandom.blogspot.in/p/amp-blogger.html - Loading Time - 627ms
URL of this blog page hosted in Google AMP Cache - www.google.co.in/amp/amprandom.blogspot.in/p/amp-blogger.html - Loading Time - 406ms
Why no AMP Blogger?
Though Accelerated Mobile Pages is a Google-backed project and Blogspot is Google's blogging platform, "Blogger doesn't currently support AMP HTML." So that's for Google to answer. But we can't let it be that way, Can we? So follow these steps and create your brand new AMP Blog.How to implement AMP Blogger Blog?
Step 1:
Replace <html> code with the following code:
<html amp='amp'>Step 2:
Check for the 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 3:
Make your blog discoverable using 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" /> 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:
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>
Change the img tags into amp-img tags like the following example:
<amp-img src="AmpImage.jpg" alt="amp-img" height="500" width="500"></amp-img>
How to check AMP pages validity?
Method 1:- Open your AMP page in Chrome browser, for example - https://example.blogspot.in/p/amp-page.html.
- Append "#development=1" to the URL, for example - https://example.blogspot.in/p/amp-page.html#development=1.
- Right click and open the Chrome DevTools console and check for validation errors.
Method 2:
- Open the web interface at validator.ampproject.org.
- Enter the url value to the URL field, for example - https://example.blogspot.in/p/amp-page.html.
- Any changes to the html source made in this interactive editor result in interactive revalidation.
DisqusComments