HOW TO SETUP ACCELERATED MOBILE PAGES(AMP) FOR BLOGSPOT

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

Post a Comment
Name

3rd_sem,3,5G,3,accident,2,American idol,3,android Tricks,43,article,25,Bike price In Nepal,7,blogging,136,celebrity gossip,14,Corona,24,crickter,1,DishHome,1,domain register,7,economic,2,Educational,15,Email,2,Eucation,6,facebook free wifi Near You,3,Food,1,Futsal,1,Game,4,Hanta_Virus,1,health,7,History,2,HSEB,2,Iphone,8,ipl2018,2,JMC,5,King,1,Literature,7,M.A,1,Media-democratic_process Unit 1st,2,Mobile,9,Mobile price in nepal,2,Money Talk,6,Movie review,59,myarticle,29,Ncell Tricks,12,Nepal Idol,5,Nepalnews,5,New Movie,27,News,17,Ntc,2,ntc tricks,21,oppo Phone price in Nepal,3,pc trick,27,politics,19,sandip Lamichhane,3,sex tips,1,Social Viral,17,Sports,13,sports shop,4,techonology,47,Thearticle,9,Umang,1,Valentine's,2,visit nepal,12,Vivo price,1,wifi,4,Youtube Tricks,11,
ltr
item
K.D'S CaFe for learning and sharing because share is care.: HOW TO SETUP ACCELERATED MOBILE PAGES(AMP) FOR BLOGSPOT
HOW TO SETUP ACCELERATED MOBILE PAGES(AMP) FOR BLOGSPOT
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.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqwP1YT-Xzrtkw85iDoxTTZdPr5FH1zo0TPnmVOdm0EeVcP4BCJ5VueGSNHCkiJ9R-1YEmA-u9H2KuqcfNpqEEW4y7MSLsXK8PFbB653h80j3XmCM9pOcqfp-8K6pgfy1_XZftGVvcGuEX/s400/google+amp.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqwP1YT-Xzrtkw85iDoxTTZdPr5FH1zo0TPnmVOdm0EeVcP4BCJ5VueGSNHCkiJ9R-1YEmA-u9H2KuqcfNpqEEW4y7MSLsXK8PFbB653h80j3XmCM9pOcqfp-8K6pgfy1_XZftGVvcGuEX/s72-c/google+amp.png
K.D'S CaFe for learning and sharing because share is care.
https://www.kamaldhital.com.np/2017/03/setup-google-amp-ACCELERATED-mobile-pages.html
https://www.kamaldhital.com.np/
https://www.kamaldhital.com.np/
https://www.kamaldhital.com.np/2017/03/setup-google-amp-ACCELERATED-mobile-pages.html
true
1574993792369647848
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore 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