Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link

Table of Content

How To Enable AMP in Blogger Website

Hello friends today I am going to share with you on this occasion how to enable Amp for your blogger website.

How To Enable AMP in Blogger Website

Introduction 

 Hello friends today I am going to share with you on this occasion how to enable Amp for your blogger website.  Not only that but I hope this post will be very helpful for you on what are the benefits of adding Amp and why we are adding this OK Come on let's go into today's tutorial.

What is Amp?

Let's first see what is Amp Means (Accelerated Mobile Pages) This Amp is used to boost your website, maintain a good user experience, SEO Ranking, Maintain Your Website Bounce rate etc.

Why Amp should be added to our site?

  1. Amp can be said to be a way to speed up your website.
  2. Amp is often used to increase the speed of their website, increase SEO ranking and adjust their page bounce rate.
  3. Amp is often very good if you add news on the website to get a good user experience and it will also increase the speed of the website.

Amp Disadvantages 

Below are some of the drawbacks you may experience if you use Amp.
  1. If you use Amp it will affect your AdSense revenue
  2. You used Amp Your Blogger cannot use additional Javascript code.
  3. If you use Amp you will not be able to use the Comments system on your Blogger.
  4. You can not use this editor on your
    <b:skin> if you use Amp.
  5. If you use Amp, you can't use sidebar Widgets. 
  6. If you use Amp for your e-commerce website you will not be able to sell your products.
  7. What I mean is that the Add to Cart button on your website does not work
  8. If you use Amp you will need to embed all the videos and photos in your posts.

Amp Benefits 

  1. You can speed up your website by using Amp
  2. As you use Amp it will be easier to maintain the Bounce rate of your website.
  3. Your SEO Ranking will increase when you use Amp.
  4. If you use Amp your Website Page Views will be maintained.

How To Enable Amp in Blogger 

  1. copy all the css codes and paste them between <style amp-custom='amp-custom'>/*<![CDATA[*/ and /*]]>*/</style>
  2. copy these codes and paste them after <head> or &lt;head&gt;
  3. <meta content='IE=9; IE=8; IE=7; IE=EDGE; chrome=1' http-equiv='X-UA-Compatible'/>
      <script async='async' src='https://cdn.ampproject.org/v0.js'/>
      <script async='async' custom-element='amp-form' src='https://cdn.ampproject.org/v0/amp-form-0.1.js'/>
      <script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
      <script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>
      <style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
      <noscript><style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  4. Replace any <img to <amp-img
  5. Replace any <b:if cond='!data:view.isError'> with <b:if cond='!data:view.isError and data:view.url != data:view.url params { amp: &quot;1&quot; }'>
  6. Also add this in the css codes
  7. .article .post-image a amp-img{min-height:90px}
    .article .post-image a amp-img img{position:absolute;max-width:initial;width:auto;height:initial;max-height:100%;top:0;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, 0)}
  8. Replace your html code with this
  9. <html amp='amp' b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='indie.xml' b:templateVersion='1.3.0' 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'/>

    Conclusion 

    I hope you understand  How To Enable AMP in Blogger Website through this post.  If you have any doubts after reading this post please let us know your top comments in the comment box.
Student / Blogger / Content Writer

Post a Comment