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!
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 == "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.
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/>-->
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.
![How to Create Separate AMP Pages On Blogger [AMP Plugin]](https://3.bp.blogspot.com/-7_Zi0gwDfBg/Wv_KUWb2x6I/AAAAAAAADSs/0g9v_s3NqIkQIBfiq9v8iYSpgvp4RebIACLcBGAs/s72-c/AMP-plugin-for-blogger.png "How to Create Separate AMP Pages On Blogger [AMP Plugin]")
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
ReplyDeleteAdding 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.
DeleteThanks for your important reply;
ReplyDeleteYou're welcome!
Delete
ReplyDeleteThanks, it really helped me a lot
I am glad that it helped you.
Delete