menu
Ad goes here

Sunday, 1 May 2016

What is Google AMP and how to implement this?

What is Google AMP and how to implement this?
Smartphone and tablets are today's most useful devices to access information and you know people consume tremendous amount of news using their phones. If web pages take too much time to load then publisher will loss the readers and loss earning opportunity through readers. AMP (Accelerated Mobile Pages) is a way which will improve performance of website on mobile devices and its 10 time faster and use 10 times less data.

How does AMP HTML work?
The AMP html works by including AMP JS library and adding few new tags in HTML pages. Please check a simple AMP HTML page.



<html amp lang="en">
  <head>
    
    <title>A Simple AMP HTML file</title>
    <link href="article-name.html" rel="canonical"></link>
    
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style 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> body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async="" src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>
Welcome to the 24xhtml AMP mobile world</h1>
</body>
</html>

Note:Contain a top-level  tag <html amp> (<html ⚡> is accepted as well).


Include an image using Google AMP:
Most HTML tags are same and can use directly in AMP HTML page however 'img' tag replaced 'amp-img'
<amp-img alt="24_x_html" height="63" src="24_x_html_logo.png" width="247"></amp-img>

Here is the complete list of Google AMP HTML tags. [Taken from official site - https://www.ampproject.org/]

Tag Status in AMP HTML
script Prohibited unless the type is application/ld+json. (Other non-executable values may be added as needed.) Exception is the mandatory script tag to load the AMP run-time and the script tags to load extended components.
base Prohibited
img Replaced with amp-img.
video Replaced with amp-video.
audio Replaced with amp-audio.
iframe Replaced with amp-iframe.
frame Prohibited.
frameset Prohibited.
object Prohibited.
param Prohibited.
applet Prohibited.
embed Prohibited.
form Prohibited. Support coming in the future.
input elements Prohibited. Includes input, textarea, select, option. Notably, the button element is allowed.
button Allowed.
style Required style tags for adjusting opacity. One additional style tag is allowed in head tag for the purpose of custom styling. This style tag must have the attribute amp-custom. :link:
link rel values registered on microformats.org are allowed. If a rel value is missing from our whitelist, please submit an issue. stylesheet and other values like preconnect, prerender and prefetch that have side effects in the browser are disallowed. There is a special case for fetching stylesheets from whitelisted font providers.
meta The http-equiv attribute is banned. Otherwise allowed.
a The href attribute value must not begin with javascript:. If set, the target attribute value must be _blank. Otherwise allowed. :link:
svg Most SVG elements are allowed.

How to style the pages using AMP
To style the pages you have to use inline CSS with 'amp-custom' custom tag for each page same as below before the header closing tag.
<style amp-custom="">
      /* any custom style goes here. */
      body {
        background-color: white;
      }
   amp-img {
        border: 1px solid black;
      }
    </style>
How to preview and validate AMP page?
Its same as other html pages, just open it in browsers and check. After that you have to make sure that your pages are AMP compatible or not.

To validate your pages please use following steps:
  1. Open your page in your browser.
  2. Add "#development=1" to the URL, for example, http://localhost:8000/released.amp.html#development=1.
  3. Open the Chrome DevTools console and check for validation errors.
If you wanted to pass any non-AMP page during debugging, please use following tags.
Add the following to the non-AMP page:
<link href="https://www.example.com/url/to/amp/document.html" rel="amphtml"></link>
And this to the AMP page
<link href="https://www.example.com/url/to/full/document.html" rel="canonical"></link>

That's it :)

The above explanation will help you to quick start of implementing the Google AMP. To know more please visit official site.

No comments:

Post a Comment

Books for you (Crafted with )