connect with us on
PROMOTE UR MUSIC IMG

Upload Your Music

Hurray you can now upload your music and video on Nijaweb .

UPLOAD NOW

Advertise Your Buissness

Advertise your Buissness Here on Nijaweb for good and qaulity Promotion.

Advertise Now
nijaweb-app

Nijaweb Mobile App

Download Nijaweb Mobile App For free to recieve latest updates quick/easy.

DOWNLOAD NOW

Sunday, March 26, 2017

Step By Step Procedure On How to Create a Google AMP Blogger For Newbies [2017]

Chibueze Ogbonna     9:12 PM     No comments

amp-blogspot.jpg
amp-blogspot

What is AMP? / What are Accelarated Mobile Pages?

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.

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.

For Example -
URL of this blog page hosted in Blogger Platform - amprandom.blogspot.in/p/amp-blogger.html - Loading Time - 627ms
URL of this blog page hosted in Google AMP Cache - www.google.co.in/amp/amprandom.blogspot.in/p/amp-blogger.html - Loading Time - 406ms

Why no AMP Blogger?

Though Accelerated Mobile Pages is a Google-backed project and Blogspot is Google's blogging platform, "Blogger doesn't currently support AMP HTML." So that's for Google to answer. But we can't let it be that way, Can we? So follow these steps and create your brand new AMP Blog.

How to implement AMP Blogger Blog?

Step 1:
Replace <html> code with the following code:
<html amp='amp'>
Step 2:
Check for the for the charset and viewport meta tags. If not present, copy and paste the 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 like <link rel="canonical" href="http://example.blogspot.in/article-metadata.html" /> which will simply point to itself. Copy and paste the following code after the viewport tag.
<link expr:href='data:blog.url' rel='canonical'/>

Step 4:
Replace </head> code with the following code:
<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>
</head>
Step 5:
Change the img tags into amp-img tags like the following example:
<amp-img src="AmpImage.jpg" alt="amp-img" height="500" width="500"></amp-img>

How to check AMP pages validity?

Method 1:
  • Open your AMP page in Chrome browser, for example - https://example.blogspot.in/p/amp-page.html.
  • Append "#development=1" to the URL, for example - https://example.blogspot.in/p/amp-page.html#development=1.
  • Right click and open the Chrome DevTools console and check for validation errors.

Method 2:
  • Open the web interface at validator.ampproject.org.
  • Enter the url value to the URL field, for example - https://example.blogspot.in/p/amp-page.html.
  • Any changes to the html source made in this interactive editor result in interactive revalidation.


Thanks For Visiting Nijaweb.com Dont Forget To Drop your Comments And Share Using The Share Button Below


Author:

Is a Proffesional Nigerian Blogger, A Webdeveloper, Who Loves To Blog And Also Writting Codes

0 comments :

RECENT POST

Put your ad code here

dmca

DMCA.com Protection Status NIJAWEB.COM do not claim ownership of any of the Songs that we upload and any copyright infringement complaints will be executed immediately! It is our policy to honor all take-down requests!
If You Feel Your Rights Are Being Infringed Upon, Contact Us Not Our Host By Send a Email Through Our Contact Form

MEET NIJAWEB CEO

Total Pageviews

Blogroll

Subscribe to our Newsletter

We'll never share your Email address.
© 2016 - NIJAWEB | NAIJA NO1 INFORMATION AND TECHNOLOGY BLOG. All Rights Reserved - Crafted by Stephenice . Blogger.