Creating AMP On Blogger Only In Mobile URL m=1

Creating AMP On Blogger Only In Mobile URL m=1 – Creating an AMP page can be done in 2 ways: creating only 1 AMP version that appears on all devices in either desktop, tablet, or phone, and the second is creating an AMP page separate from the canonical page.

One example makes only 1 AMP version appear on all devices that are as we often encounter on the Blogger AMP templates or on the Blogger AMP templates we now use.

But on Blogger also we can create a separate AMP page from the canonical page by utilizing the mobile m=1URL in Blogger URL. In this way, the AMP will only appear on mobile devices only.

By creating AMP on Blogger by only displaying AMP only on m=1this mobile URL then the AMP validator icon in the browser extension on desktop and tablet display will be blue with link icon like in WordPress blogs that use AMP plugin.

The AMP validator icon in the browser extension on the blue desktop and tablet display with this link icon shows the page being viewed instead of the AMP page but the page shows that the AMP page for the page is available. By clicking on the blue icon, visitors will be redirected to the AMP page.

So if on Blogger we create an AMP page only on the mobile URL m=1then when visitors click the blue extension AMP validator icon on the desktop display, then the visitor will be redirected to the URLm=1as an AMP page.

To create an AMP page on Blogger only on m=1this mobile URL , we need a blog that must have been valid AMP. Then we will make some minor changes to make AMP only on mobile URL m=1.

1. First Step

Please find the following code or code similar to the following

<HTML amp=’amp’ expr:dir=’data:blog.languageDirection’ lang=’id’>

Then please replace with the code below

<HTML expr:dir=’data:blog.languageDirection’ lang=’id’>
<b:attr cond=’data:blog.isMobileRequest == &quot;true&quot;’ name=’amp’ value=’amp’/>

2. Second Step

Please find the following code or code similar to the following

<link expr:href=’data:blog.url’ rel=’canonical’/>

Then please replace with the code below

<b:if cond=’data:blog.isMobileRequest == &quot;false&quot;’>
<link expr:href=’data:blog.url’ rel=’canonical’/>
<link expr:href=’data:blog.url + &quot;?m=1&quot;’ rel=’amphtml’/>
</b:if>
<b:if cond=’data:blog.isMobileRequest == &quot;true&quot;’>
<link expr:href=’data:blog.url’ rel=’canonical’/>
</b:if>

After this please save changes to the template. With these two steps we’ve made the AMP page only appear on the mobile URL m=1only.

Here we do not need to make changes to the previous layout of the blog template because the AMP elements will still work on the desktop display even though it is not now an AMP page.

And for post issues, even though we have made changes but we still make posts with AMP format as before.

What we then need to do is optimize Adsense ads. We will create separate Adsense ads into desktop display ads and AMP / mobile display ads.

For desktop display ads then used is the usual Adsense ad code and for display AMP ads using amp-ad.

The first thing to do is to separate ad js, please find the following js code.

<script async=’async’ custom-element=’amp-ad’ src=’https://cdn.ampproject.org/v0/amp-ad-0.1.js’/>

Please remove the code then please keep the following code above code </head> or &lt;/head&gt;&lt;!–<head/>–&gt;

<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-1234567890“,
enable_page_level_ads: true
});
//]]>
</script>
</b:if>

Please adjust the code google_ad_client according to your account.

Then please change all ad slots to be as follows.

<b:if cond=’data:blog.isMobileRequest == &quot;false&quot; and not data:blog.searchQuery’>
<!– Ini iklan untuk tampilan desktop –>
<ins class=’adsbygoogle’ data-ad-client=’ca-pub-1234567890′ data-ad-format=’rectangle’ data-ad-slot=’1234567890′ style=’display:block’/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</b:if>
<b:if cond=’data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery’>
<!– Ini iklan untuk tampilan AMP/mobile –>
<amp-ad data-ad-client=’ca-pub-1234567890′ data-ad-slot=’1234567890′ data-auto-format=’rspv’ data-full-width=” height=’320′ media='(max-width: 736px)’ type=’adsense’ width=’100vw’>
<div overflow=”/>
</amp-ad>
</b:if>

Please adjust the code data-ad-client and data-ad-slot its according to your ad code.

And make sure robots.txt your blog does not block theĀ  m=1 URL. Done … good luck.

Read Also:

How to Easily Edit AMP Blog Post

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.