Setup Google AMP in Blogger / Blogspot Site

What is AMP?

AMP or Google AMP is Accelerated Mobile Pages. As the name suggests, it helps to accelerate the site loading on slower internet devices. It is an open-source initiative supported by technology companies like Google and Twitter. Although it decreases the site user experience. It filters out the heavy scripts data which makes the site load faster. If you are OK to compromise user experience you can try Google AMP. You can easily add Google AMP in Blogger. This way you will be able to setup Google AMP in Blogger.

Stepwise guide to Add / Setup Google AMP in Blogger Site

Login To your Blogger Blog.
Navigate to Design and Click on Edit Template.
Modify the existing tags to sync with AMP formatted tags. Replace the Existing code with modified code.
Save the template.
Your AMP is configured in Blogger now. You can validate your website.

Modified Code to Add / Setup AMP in Blogger/Blogspot

Replace the below codes sample and you will be ready with AMP in Blogger. This is absolutely free. Note to backup your blog before you proceed.

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.

Validating Google AMP in Blogger

To Validate your Google AMP Pages in Blogger, you can visit the official website of Google AMP. IF there is an error, the validator will throw the error.

Here is the URL to validate Blogger / Google Blogspot AMP pages

https://validator.ampproject.org/

Enjoy, You will love your site performance now.