Trending
Sunday, 19 March 2017

HOW TO SETUP ACCELERATED MOBILE PAGES(AMP) FOR BLOGSPOT

google amp

 

What is AMP ?

Amp means Accelerated Mobile Pages. It help to make faster mobile pages which help search ranking. Google introduced amp with aimed that publisher optimized their mobile webpage.

What is Google AMP Cache?

The Google AMP Cache is simply a proxy-based content delivery network that delivers all valid AMP documents. It fetches AMP HTML pages, caches them, and improves performance of the page automatically. The Google AMP Cache loads the document, all images and JS files from the same origin that is using HTTP 2.0 to provide maximum efficiency.



Why blogger not have amp?

AMP is google project and blogger is google blog service now google not not serve amp for blogger. So can you setup it? Follow BELOW STEP.

Benefits of ACCELERATED MOBILE PAGES(AMP)
  • Load amp page 80%  faster then non-amp pages. It help improve search ranking.
  • Decrease bounce rate.
  • Best user experience when internet is slow.
  • Best advertising experience.


Setup amp on blogspot blogger how ?

Step 1: 

Replace <html> code by this
<html amp=’amp’>

Step 2:

Set charset and view port meta tags. copy and paste following code after <head>

<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

Step 3:

Make your blog discoverable using canonical tag. Check for the for the canonical link tags. If not present, add the canonical link  
Copy and paste the following code after the viewport tag.
<link expr:href='data:blog.url' rel='canonical'/>

Step 4:
Paste this code before  </head> tag .

<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>
<script async=’async’ src=’https://cdn.ampproject.org/v0.js’></script>

 Step 5:
change image tag like following code
<amp-img src=”AmpImage.jpg” alt=”amp-img” height=”500″ width=”500″></amp-img>

 

After this  for check AMP pages validity go to this link

AMP PAGES CHECKER

 or
Open your AMP page in Chrome browser, for example - https://example.blogspot.com/p/amp-page.html.

HOW TO SETUP ACCELERATED MOBILE PAGES(AMP) FOR BLOGSPOT Reviewed by K.D on 16:51 Rating: 5 google amp   What is AMP ? Amp means Accelerated Mobile Pages. It help to make faster mobile pages which help search ranking. Goog...

No comments: