Not taking advantage of ever increasing mobile traffic is not very smart. Is it possible to create an AMP Blogspot blog? The st...
Not taking advantage of ever increasing mobile traffic is not very
smart. Is it possible to create an AMP Blogspot blog? The steps are
Simple and easy. Change your Blog into an AMP one and stay in top of
Google Results. Follow the Step by Step instructions. Finish fast and
load fast.
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
Replace <html> code with the following code:
Check for the for the charset and viewport meta tags. If not present, copy and paste the following code after <head>.
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.
Step 4:
Replace </head> code with the following code:
Step 5:
Change the image tags into amp-image tags like the following example:
Method 2:
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.AMP Blogger - Why no?
That's for Google to answer.
We understand that Accelerated Mobile Pages Project
was rolled out by Google to counter Facebook Instant Articles and Apple
News. While the technology used by Facebook & Apple to display
feeds faster is specific to only to their platform, Google uses an
open-source framework to be used by content publishers to serve content
built using AMP HTML.
This is a big news for content publishers and platforms like Twitter,
Pinterest etc. Blogger is one of the earliest dedicated blog-publishing
tools that is credited for popularising the format. It provides dynamic
mobile views for the blogging compatibility with mobile devices and
smart phones that enhances the readability accuracy on these smart
devices.
We did expect Blogger to have this accelerated mobile loading capability
with the launch of AMP. But No! Not yet atleast. AMP is now a most
expected feature in Google's Blogger.
AMP Blogspot - Why not
So Is it not possible to create an AMP Blogspot? My answer is - Why not? Now blogspot is an Accelerated Mobile Page.
Here is the step-by-step approach. This method can be used to create a
fresh Blogspot AMP blog. A little coding knowledge is enoug.
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 image tags into amp-image 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.
