Great News! Try our new tool to convert img to amp-img. Try Now!

Thursday, March 21, 2019

Change AMP Blogger Parameter URL from m=1 to amp=1

Step by Step: How to Change AMP Blogger Parameter URL from m=1 to amp=1. and All benefits you gets from amp=1

Change Blogger AMP Parameter URL from m=1 to amp=1

The template that I use on this blog is called Alinux AMP, where there are some visitors who are "aware" that the URL for my AMP page is valid using the parameter 'amp = 1, isn't it? M = 1 . 

Then there are some blogger friends who send messages via Facebook, asking how to change the URL parameters for the Blogger AMP page to be ?amp=1I try to explain in this article. 

I have tried changing it using conditional data 'data:blog.url + "?amp=1&quot'but it seems to be ineffective and encounters some errors. Until finally I found out a more effective way. I got this method from one of my blogger acquaintances.

Benefits of AMP Pages in parameters amp=1


Before I explain, I will mention some of the advantages that will be obtained when implementing AMP HTML in the Blogger parameter amp= 1
  • Can apply AdSense Anchor Ad on the mobile page by using AdSense Auto Ads.
  • Can add JavaScript in mobile mode template.
  • AMP pages (amp = 1) will only be accessed if visitors come from AMP viewer such as Google or Twitter. 

Here are the steps to change the custom parameters AMP Blogspot pages, from m=1 to amp=1

Change the AMP special page from m=1 to amp=1

This method can be done by using the Blogger Operator URL data tag with the syntax params 
Go to the menu Edit HTML on Themes. Then follow the steps below

Find this:
<HTML expr:dir='data:blog.languageDirection' lang='id'>

<b:attr cond='data:blog.isMobileRequest == &quot;true&quot;' name='amp' value='amp'/>


or the code below, for those of you who haven't changed the special parameter amp to m=1

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


And then replace with below code :
<HTML expr:dir='data:blog.languageDirection' lang='id'>

<b:attr cond='data:view.url == data:view.url params { amp: &quot;1&quot; }' name='amp' value='amp'/>
Pay attention to the yellow code, it is the use Blogger Operator URL to make the new parameter to be amp=1.

Next, we will set the canonical for the main page and the special page for AMP HTML.

Find below code:
<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>

Or if it's not found, just look for the canonical section like this:

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

Delete the code, and replace it with what I made below:

<b:if cond='data:view.url != data:view.url params { amp: &quot;1&quot; }'>
<link expr:href='data:blog.canonicalUrl' rel='canonical'/>
<link expr:href='data:blog.canonicalUrl + &quot;?amp=1&quot;' rel='amphtml'/>
  </b:if>
<b:if cond='data:view.url == data:view.url params { amp: &quot;1&quot; }'>
<link expr:href='data:blog.canonicalUrl' rel='canonical'/>
  </b:if>

Up here, the actual process is complete. But if you previously used the parameter m=1 for special pages of AMP HTML, you must follow the steps below because usually there will be a slight error.

Final Process

Look for all blogger tag code for mobile m=1 as below:

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
Change with below data tag:
<b:if cond='data:view.url == data:view.url params { amp: &quot;1&quot; }'>

Find this:
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>

and change with:
<b:if cond='data:view.url != data:view.url params { amp: &quot;1&quot; }'>

Showing Element on AMP Pages only

To display all elements or widgets only on the AMP HTML page, then you only need to wrap them with the new AMP  tag conditional. Example:
<b:if cond='data:view.url == data:view.url params { amp: &quot;1&quot; }'>

   <!-- Contents -->

</b:if>
If you want to display elements in other than AMP pages, use this conditional tag:

<b:if cond='data:view.url != data:view.url params { amp: &quot;1&quot; }'>

   <!-- Contents -->

</b:if>

That's the article about the trick for Changing Blogger AMP Parameters from m=1 to amp=1. You still have to achieve the performance of your special AMP page in the Search Console.

May be useful :)