How to Add Google AMP To Blogger Website Full Setup

Hello and Welcome to GetWebInfo. Here on this post you will learn about that How to Add Google AMP To Blogger Website Full Setup  to your Blogger Blog. Google AMP (Accelerated Mobile Page) is a light speed technique that developers have to made to speed up a website by avoiding some code in Java and CSS to make your website support fast. I am sure you have heard about this. Blogger Blogspot websites have been waiting to implement AMP until now AMP is now fully available to blogger websites.




What Is Google AMP 

The Full meaning of AMP is Accelerated Mobile Pages. These pages are viewed in the mobile phone view that speed up your website page loading speed by skipping some render blocking Java and CSS files and is viewed under Google. It is a new project by Google to build mobile web pages for static content that rendder fast AMP pages use AMP HTML, AMP JS and AMP CDN to precess and deliver light web pages at lighting speed.

How to Add Google AMP to Blogger Websites

The HTML AMP Setup involves changing the HTML code on your template to the AMP code to Enable AMP HTML Code.

Step 01: First Of All Login to your Blogger Account and Reached out to your Blogger Dashbaord

Step 02: Reach out to the left commands by navigating to them to the Template command

Step 03: Click on the Template Command and then locate the Edit HTML Next to Customize

Step 04: Click anywhere in your code and then click on CTRL+F in windows or CMD+F from your Mac System

Step 05: Search for This <html>

Step 06: After finding the above code just replace it with this below code

<html amp=’amp’>

Add Charset and View-port Meta Tags

In this section of the AMP setup you have to look at your template code to figure out if it has the charset and viewport meta tags present before adding the code provided below. If they are not present, then you will paste the below code just under the <head> tag:

 <meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>

If you want to know if the Charset and Viewport code are present search any of the two names and you will only find it  in the head section of your Blogger Template.

Blogger AMP Setup for CDN

The AMP CDN Code is a code that instracts the phone brosers to use the AMP version by adding the script in the head section.

This code just add above code at the ending of this tag </head>

 <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>
That's All with adding the AMP CDN, save your template theme and lets go to the other step.

Step 04: Image AMP Setup for Blogger

The Image used in the desktop responsive version is not the same resolution and dimensions that is used in AMP versions. In that case we add the image AMP code to feature the image of your website post to show in AMP Pages. Now here you can change the Image Code with this code

<amp-img src=”AmpImage.jpg” alt=”amp-img” height=”500″ width=”500″></amp-img>
The Amplmag JPG is an example of your image url as indicated in the code after uploading. You will have to delete the image src to amp image src  code above but make sure you copy the image URL first before changing and then replace to the Amplmag JPG and thats all set.

Step 05: AM Conanical Link 

It's paramount to see that you are discoverable with the canonical tag used in your blogger template. The AMP version also uses canonical. Add this below code to your blogger template below the charpset..

<link expr:href='data:blog.url' rel='canonical'/>
<link rel="canonical" href="https://www.getwebinfo.com" />

By adding Cornanical tags, you set them to poing to the homepage and your website posts. 

Note: Please Change This URL "https://www.getwebinfo.com" with your own blog or website URL


How to Check the Blogger AMP Validation 

To Know whether your blogger blog is now an AMP page, then you can check out some of the AMP validation check websites that are around the world and help users to know about their website that can be eligible for AMP pages or not.


  • https://www.ampproject.org/

    This website will help you with all the problems you may need to solve for your blogger AMP versions by using the below Idea. 

I hope this article is really help full for you if you have any problem so please comment on this post and i am reply you as soon as possible. Thanks for reading this article.....