Create AMP Pages On Blogger 6 Simple Steps

Create AMP Pages On Blogger 6 Simple Steps 

Create AMP Pages  or the Accelerated mobile pages are an important issue to skyrocket your natural visitors from mobile units. It not solely lets you improve visitors to your Blogger blog but additionally makes your website load faster and that helps your visitors keep for a very long time.

So, you may know that once you improve your blog’s theme to AMP version and whereas upgrading, this may have an effect on your blog’s layout badly and typically you might need to reinstall another theme to your Blogger blog.

However at present, I've provide you with a solution that will not have an effect on your present Blogger theme or your weblog’s layout and can preserve your responsive design as it's.

So, with a purpose to create a separate AMP page on Blogger’s mobile URL (i.e. m-1), you have to have a valid AMP snippets codes added in your Blogger template and also you simply need to make minor changes for mobile devices URL (m-1)

Simply comply with the straightforward steps and you may be achieved inside no time and have a responsive AMP page to your Blogger blog.

Step 1– Login to your Blogger blog and choose Template and click on on Edit HTML.

Step 2– If you end up in your HTML editor, you'll provide you with the under code firstly of your Blogger template.

Codes box

<HTML expr:dir='data:blog.languageDirection' lang='id'>code-box


Step 3– After finding the above code, substitute it with the under code and it will make your Blogger template into a valid AMP template.

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

If you end the above two steps, save your settings and by saving you made an AMP page on the mobile URL (m-1). However you needn't make any adjustments to your earlier structure as a result of these AMP parts would work wonderful on each machine like on desktop, pill or on any cell units as properly.

Also Read:-Palki 2 Responsive and premium Blogger Template

However, you need to comply with the under steps, with a purpose to optimize your AdSense advert codes into AMP version. For this, you needn't need to make any adjustments to your default AdSense advert codes for desktop screens as a result of we have now made AMP pages just for cell variations. So,

Step 4– Seek for the  tag and paste the under Advert code and it will optimize your AdSense Advertisements for mobile units as properly.

Codes box
<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-xxxxxxxxxx", enable_page_level_ads: true }); //]]> </script> </b:if>.code-box

Kindly Notice: Substitute the AdSense writer ID that's daring (ca-pub-xxxxxxx) with your individual AdSense writer ID.

Also Read:-How to Resolve Duplicate Meta Description in Blogger

Step 5– Once more seek for the  tag and substitute it with the under codes and including this code will make your theme a valid AMP template.

Codes box
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/> &lt;/head&gt;&lt;!--<head/>--&gt;code box

Step 6- Now, with a purpose to make your AMP web page discoverable, you need to add the next code just under the  tag. Including this code will enable Google to find and index your AMP model of your present page. rel=amphtml is the usual model of rel=colonical.

Codes box
<link expr:href='data:blog.homepageUrl + &quot;?m=1&quot;' rel='amphtml'/>code box

So, with this easy and straightforward steps, you may create your responsive Blogger template into AMP version and that too with out even touching your unique blog design.

Also Read:-Full Information On Search Engine Optimization (SEO)

Take pleasure in! or you probably have discovered any drawback including the AMP codes or have any recommendations, you might depart a remark under and I'd be glad that will help you.

Read it Too

1 comment

Post a Comment

Do not type spam comments

get more nice stuff
in your inbox

instantly by Subscribing to us. So you will get email everytime we post something new here