Do you want to Add / setup Google AMP in Blogger / Blogspot site? Accelerated mobile pages blogger or AMP for blogger is a way to make your Blogger site load faster on mobile devices. Fast loading websites offer better user experience and can improve your traffic. In this article, we will show you how to set up Google AMP in Blogger site.
Must Read – How to Add Google Adsense Ads in WordPress.
AMP Will Enhance your site speed.
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.
Very Important Tip: Please change your web hosting guys. This has a major role in your SEO. I highly recommend you to Try the A2 Web hosting and install your blogger blog on that. This company offers money back guarantee so it means if you are not satisfied, you will get the full money back.
Click the below banner and use the coupon code – “ZIP51” to avail the 51% dicount.
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.
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 any 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.
Now is worked?
I’m from the future, does this work?
Does this tutorial worth it now?