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

By -

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!

AMP plugin 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.

How to Easily Add Hreflang Tag to Blogger

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.

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 == &quot;true&quot;' 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.

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 {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;true&quot; 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 {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;false&quot; 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'/> &lt;/head&gt;&lt;!--<head/>--&gt;

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 + &quot;?m=1&quot;' 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.

Comments

  1. Rashmi23 May 2018 at 11:31

    hi i never used amp template; but recntly i used amp template for my blog. pls help me how to add custom js or javascript code on amp template. i have no idea about amp

    ReplyDelete
    Replies
    1. Farooq Ahmad Bhat23 May 2018 at 23:54

      Adding custom JS to AMP pages is reverting valid AMP themes to invalid amp themes. AMP (accelerated mobile pages) have been developed for fast loading intentionally. And if you are going to make your amp pages load slow by adding the custom JS, then what lefts behind the purpose of creating Google AMP? There are limited JS codes that could be added to AMP templates. Visit ampproject.org for complete AMP documentation. And be sure to check out amp project on cdn rawgit (github) by ampproject.org to see the available and allowed JavaScripts.

      Delete
  2. Rashmi27 May 2018 at 21:29

    Thanks for your important reply;

    ReplyDelete
  3. Alex28 June 2018 at 20:10


    Thanks, it really helped me a lot

    ReplyDelete
  4. ngbaze15 July 2020 at 10:15

    i have search the first code but i didn't find it ?

    ReplyDelete

Post a Comment

Popular posts from this blog

List of Top 11 Social Bookmarking Sites for 2018

By -
Image
Today, I'm going to share with you the most popular and widely used social bookmarking sites for 2018. These sites will help you increase your content visibility on social media and search engines. The process begins with the content curation and content aggregation. But before you bag the list, you need to understand what social bookmarking is and why you should use them instead of browser bookmarks. What is Social Bookmarking? Social Bookmarking is the process of adding, storing, submitting and sharing your contents on those websites where people and search engines can see and access your work actively. It includes a webpage, an image object, a video or text-based links like services or products that you offer. When you share (bookmark) your contents on a social bookmarking site, it means your data has been whitelisted or stored for quick access in future if the original web page exists. Check out: Role of Social Media in Boosting Your Traffic Easily Why You Should Use...
Read more

6 Digital Marketing Strategies for Small Business

By -
Image
Revenue is the lifeblood of any business. To get enough sales, it is very important to market your business as well as the products and services which you are providing. Today, there are millions of potential consumers on the Internet. Therefore, digital marketing is highly necessary. This is an activity where the company's name, brand, products, and services are spread throughout the Internet so that online consumers can view them, make purchases and possibly make referrals. By boosting your company's brand awareness online, you can create an attractive, positive and profitable business. One of the most effective methods of achieving this is by using SEO methods and other useful techniques. Here is more on Search Engineering Optimization. What is Search Engine Optimization? (SEO) This is a specialized strategy where the online visibility of a website is grown in the organic search engine results. Involving a collection of technical and web-based strategies, SEO optimizatio...
Read more