HOW TO SETUP ACCELERATED MOBILE PAGES(AMP) FOR BLOGSPOT

SHARE:

Twitter Facebook Google Pinterest
0 0 Sunday, 19 March 2017 2017-03-19T16:51:00+05:45 Edit this post
AMP is a way to build mobile pages for static content that render fast. The AMP JS library ensures the fast rendering of AMP web pages. Google introduced AMP with the vision that publishers can create mobile optimised content once and have it load instantly everywhere. setup guide is here.
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.

SHARE:

Twitter Facebook Google Pinterest

COMMENTS

BLOGGER
Post a Comment
Loaded All Posts Not found any posts VIEW ALL Read More Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content