The amp blogspot template that we often find only has 1 Amp version, namely the AMP blogspot page appears on all devices, both desktops, tablets, and mobile phones.
Now we can create AMP pages separately from canonical pages by making use of the mobile URL amp=1 in the Blogger URL. In this way, the blog page becomes 2 versions, namely the AMP version which will only appear on mobile devices and when the blog is accessed using a desktop, the page is no longer AMP.
Advantages of creating AMP pages only on URL parameter amp=1
The first step.
Log in to your Blogger account, select Menu - Themes then click Edit HTML.
If so, please look for the code below.
if you have found it, replace the code above with the code below.
The second step.
Look for the code like below.
Then replace it with this code.
If there is a conditional tag like this your blog template
replace with
Save Theme
Please check the blog page with amp validation testing.
If you want to display something/widget that is not for AMP pages or that you want to appear only on AMP pages, use the following conditional tag
Conditional tags for AMP
Conditional tags for NON AMP
Example of installing widgets ONLY on post pages and in AMP views
Even though we have made the AMP page only appear on the amp=1 URL, we don't need to make changes to the previous layout on the blog template because the AMP elements will still work on the desktop display even though they are no longer AMP pages.
And to make posts, even though we have made the changes earlier, we still have to make posts in the AMP format as before.
- Can insert script on non amp page (Desktop View) by adding amp conditional tag.
- Can insert in-article adsense script on non amp pages.
- The page display with the parameter m=1 remains the same as the desktop page, so script code that runs on the desktop page can still appear on the mobile page m=1
The first step.
Log in to your Blogger account, select Menu - Themes then click Edit HTML.
If so, please look for the code below.
<HTML amp='amp' expr:dir='data:blog.languageDirection' lang='en'>
if you have found it, replace the code above with the code below.
<HTML expr:dir='data:blog.languageDirection' lang='en'>
<b:attr cond='data:view.url == data:view.url params { amp: "1" }' name='amp' value='amp'/>
The second step.
Look for the code like below.
<link expr:href='data:blog.url' rel='amphtml'/> <link expr:href='data:blog.url' rel='canonical'/>
Then replace it with this code.
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<link expr:href='data:blog.canonicalUrl + "?m=1"' rel='alternate'/>
<link expr:href='data:blog.canonicalUrl + "?amp=1"' rel='amphtml'/>
</b:if>
<b:if cond='data:view.url == data:view.url params { amp: "1" }'>
<link expr:href='data:blog.canonicalUrl' rel='canonical'/>
</b:if>
If there is a conditional tag like this your blog template
<b:if cond='data:blog.isMobileRequest == "true"'>
replace with
<b:if cond='data:view.url == data:view.url params { amp: "1" }'>
Save Theme
Please check the blog page with amp validation testing.
If you want to display something/widget that is not for AMP pages or that you want to appear only on AMP pages, use the following conditional tag
Conditional tags for AMP
<b:if cond='data:view.url == data:view.url params { amp: "1" }'>
Conditional tags for NON AMP
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
Example of installing widgets ONLY on post pages and in AMP views
<b:widget id='HTML1' locked='false' title='' type='HTML' version='1'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:view.url == data:view.url params { amp: "1" }'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if></b:if>
</b:includable>
</b:widgets>
Even though we have made the AMP page only appear on the amp=1 URL, we don't need to make changes to the previous layout on the blog template because the AMP elements will still work on the desktop display even though they are no longer AMP pages.
And to make posts, even though we have made the changes earlier, we still have to make posts in the AMP format as before.
Tags:
Blogger tricks