Menu

How to Create Separate AMP Pages On Blogger [AMP Plugin]

How to Create Separate AMP Pages On Blogger [AMP Plugin]

How to Create Separate AMP Pages On Blogger [AMP Plugin]


Today, I am going to share an awesome technique by which you can install AMP version on your responsive blogger template. By doing this, your responsive theme will not get disturbed because with this method, you can add AMP snippets to the mobile version (m=1) instead of upgrading your whole template to AMP. So let get started!

Create Separate AMPPages  For Blogger
How to create separate AMP pages for blogger

As we know, people are upgrading their responsive themes to AMP themes and this method has badly impacted their blog layout. But in this article, we will be learning to create a separate AMP page in a native manner that will keep your responsive design up. So creating a separate AMP page on Blogger's mobile URL m=1, we need to have valid AMP snippets in our Blogger template. Then we will make some minor changes to make AMP on mobile URL m=1.

Check out:
Graphic Design Course Video Lectures in Urdu


Steps to Add AMP Pages On Blogger Mobile Redirect URL


Creating a separate AMP page in Blogger is not a difficult task as you think. In today's article, I am going to show you how to create two in one Blogger theme (AMP and Non-AMP) without disturbing your blog design and other useful elements like JavaScripts, CSS, jQuery and other resources. In general, your Blogger theme will have the two different snippets (AMP as well as Non-AMP) like WordPress AMP plugin.

Read Also:
Killer Image Optimization Tips for Blogger Blogs

Step 1. First of all, go to your blogger theme editor and search for the following codes. These codes can be found at the beginning of your blogger template.
<HTML expr:dir='data:blog.languageDirection' lang='id'>


Step 2. After you find the above-mentioned snippets, replace it with the given codes. This code will make your theme a valid AMP template.
<HTML expr:dir='data:blog.languageDirection' lang='id'> <b:attr cond='data:blog.isMobileRequest == "true"' name='amp' value='amp'/>

After finishing the first two steps, save the changes. With these two steps, we've made the AMP page only on the mobile URL that's m=1. We do not need to make changes to the previous layout on our blog because these AMP elements will work fine on every device like desktop, tablet, iPad, and mobile as well.

Pay Attention:
DigiSkills All Batch Solved Exercises

Now we need to optimize the AdSense ad code for AMP version. We have to create separate Adsense ads for mobile devices. We do not need to change the usual AdSense Ad codes for desktop screens because we have made AMP pages only on the mobile version.

Step 3. Search for the </head> attribute and add the given Ad code as shown below. This step will let you create amp AdSense Ads for your blog.
<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-xxxxxxxxxx", enable_page_level_ads: true }); //]]> </script> </b:if>


Note: Replace ca-pub-xxxxxxxxxx with your AdSense publisher ID and also replace the data-ad-slot according to your ad slot numbers.


Step 4. Now again, find the </head> tag in your template and replace it with the following codes. This will make your theme a valid AMP template.
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/> </head><!--<head/>-->


Recommended:
Download PPSC Lecturer/Subject Specialist Latest Books


Step 5.To make your AMP page discoverable, add the following code just below the <head> tag. The code allows Google to discover and index the AMP version of the current page. rel=amphtml is the standard version of rel=canonical.
<link expr:href='data:blog.homepageUrl + "?m=1"' rel='amphtml'/>

So, this is the ultimate and easy method to create an AMP page in BlogSpot without touching your blog design. As I earlier mentioned, you need a valid AMP theme for installing this AMP plugin. You must replace the <body> tag with </body>--></body> and </html> tag with capitalized </HTML> tag.

Accelerated mobile pages are very good for boosting your organic traffic on mobile devices. AMP pages not only help in increasing the traffic but due to it's fast loading time it will also keep the visitors stay long time on our blogs. I hope you enjoyed the post.

Ads middle content1

Ads middle content2