How To Add Google AMP In Your Blogger Blog[2021]

What is AMP, How To Add Google AMP In Your Blogger Blog[2021], How to make my template Amp responsive, best Amp template 2021, add amp in blogger blog, create amp pages, amp validator?

AMP refers to Accelerated Mobile Pages which helps the page load faster in google. If your site speed in mobile is low. If your site speed is low and you're not using Google AMP then it can affect your SEO because the Bounce Rate will increase as the user will not stay on your site. Accelerated mobile pages are a very important factor to skyrocket your organic traffic from mobile devices.

Today, I have come back with a new article and with a solution to add Google AMP In Your Blogger Blog by using this you can easily create AMP pages in your blog.

So, in order to create or add an AMP page on Blogger’s mobile URL (i.e. m-1), you need to add some Google AMP snippets codes Blogger template

Just follow the simple steps and you will be done within no time and have a responsive AMP page for your Blogger blog.

Step 1. Log in to your Blogger dashboard and select the theme and click on Edit HTML.

Step 2. When you are in your HTML editor, you will see the below code at the beginning lines of your Blogger template code.

Step 3. After locating the above code, replace it with the below code and this will turn your Blogger template into a valid and responsive AMP template.

After finishing the above two steps, hit on the save button and save your settings and by saving you had created an AMP page on the mobile URL (m-1). But you need not make any changes to your previous layout because these AMP elements would work fine on every device like on a desktop, tablet or on any mobile devices as well But, you have to do little more coding, in order to optimize your AdSense ad codes into the AMP version.

Step 4. Search for the </head> tag and paste the below Ad code above the tag and this will optimize your AdSense Ads for mobile devices as well and made you Adsense ad AMP responsive.

<b:if cond='data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == "true" and not data:blog.searchQuery'> <script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/> </b:if> <b:if cond='data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == "false" and not data:blog.searchQuery'> <script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/> <script> //<![CDATA[ (adsbygoogle = window.adsbygoogle || []) .push({ google_ad_client: "ca-pub-0000000000", enable_page_level_ads: true }); //]]> </script> </b:if>

Kindly Note: Not forgot to Replace the AdSense publisher ID with your own AdSense publisher ID.

Step 5. Again search for the </head> tag and replace it with the below codes and adding this code will make your theme a valid AMP template.

Step 6. Now, in order to make your AMP page discoverable, you have to add the following code just below the <head> tag. Adding this code will allow Google to discover and index your AMP version of your current page.

>rel=amphtml is the standard version of rel=colonical.
<link expr:href='data:blog.homepageUrl + "?m=1"' rel='amphtml'/>

So, by using these simple and easy steps, you can create your responsive Blogger template into the AMP version and without making any effect in the design of your original one even touching your original.
If you find any error while implanted AMP in your blogger just leaves a comment in the comment box I will shot it out.