How to Make AMP On Blogger Only in Mobile URL m=1
How to Make 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 is 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 canonical page by exploiting mobile URL m=1 in Blogger URL. In this way the AMP will only appear on mobile devices only.
By creating AMP on Blogger by displaying AMP only on m=1 mobile URL then the AMP icon validator in 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=1 then when visitors click the blue extension AMP validator icon on the desktop view, then the visitor will be diverted to m=1 as the AMP page.
To create an AMP page on Blogger only on this m=1 mobile URL, we need a blog that must be valid AMP. Then we will make some minor changes to make AMP only on mobile URL m=1.
To Make AMP On Blogger Only In Mobile URL m = 1, we can directly follow some steps below:
1. First Step
Please find the following code or code similar to the following
Then please replace with the following code
2. Second Step
Please find the following code or code similar to the following
Then please replace with the code below
After this please save changes to the template. With these 2 steps we have made the AMP page only appear on mobile URL m=1 only.
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 are regular Adsense ad code and for AMP display ads using amp-ad.
The first thing to do is to separate ad js, please find the following js code.
Please remove the code then please save the following code above the code </ head> or </head><!--<head/>-->
In google_ads_client code please replace with your Adsense code.
Then please change all ad slots to be as follows.
Please adjust the data-ad-client and data-ad-slot code according to your ad code.
And make sure your blog robots.txt does not block the m=1 URL. How, very easy is not, Hopefully with what I have to say this, can be useful for all of us, and good luck.
One example makes only 1 AMP version appear on all devices that is 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 canonical page by exploiting mobile URL m=1 in Blogger URL. In this way the AMP will only appear on mobile devices only.
By creating AMP on Blogger by displaying AMP only on m=1 mobile URL then the AMP icon validator in 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=1 then when visitors click the blue extension AMP validator icon on the desktop view, then the visitor will be diverted to m=1 as the AMP page.
To create an AMP page on Blogger only on this m=1 mobile URL, we need a blog that must be valid AMP. Then we will make some minor changes to make AMP only on mobile URL m=1.
To Make AMP On Blogger Only In Mobile URL m = 1, we can directly follow some steps below:
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 following code
<HTML expr:dir='data:blog.languageDirection' lang='id'>
<b:attr cond='data:blog.isMobileRequest == "true"' 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 == "false"'>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.url + "?m=1"' rel='amphtml'/>
</b:if>
<b:if cond='data:blog.isMobileRequest == "true"'>
<link expr:href='data:blog.url' rel='canonical'/>
</b:if>
After this please save changes to the template. With these 2 steps we have made the AMP page only appear on mobile URL m=1 only.
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 are regular Adsense ad code and for AMP display 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 save the following code above the code </ head> or </head><!--<head/>-->
<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: "google_ads_client",
enable_page_level_ads: true
});
//]]>
</script>
</b:if>
In google_ads_client code please replace with your Adsense code.
Then please change all ad slots to be as follows.
<b:if cond='data:blog.isMobileRequest == "false" and not data:blog.searchQuery'>
<!-- This is an ad for desktop view -->
<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 == "true" and not data:blog.searchQuery'>
<!-- This is an ad for AMP / mobile view -->
<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 data-ad-client and data-ad-slot code according to your ad code.
And make sure your blog robots.txt does not block the m=1 URL. How, very easy is not, Hopefully with what I have to say this, can be useful for all of us, and good luck.
Post a Comment for "How to Make AMP On Blogger Only in Mobile URL m=1"
Provide comments relevant to the posted articles and provide critiques and suggestions for the progress of the blog