Getting Started with Accelerated Mobile Pages (AMP) HTML

Getting Started with Accelerated Mobile Pages (AMP) HTML - AMP is the technology from google developer for optimizing a web mobile. For the overview of AMP, you can read this post Optimize Website Using Accelerated Mobile Pages (AMP) HTML

Create First Code AMP HTML

Open your text edit. You can use a Notepad or sublime

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello World with AMP</title>
    <link rel="canonical" href="http://www.paperforshare.tk/article-with-amp.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "My first Website with AMP HTML",
        "datePublished": "2016-04-10T10:02:41Z",
        "image": [
          "logo-amp.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>Paper 4Share</h1>

    <p>Welcome to article with AMP HTML</p>
  </body>
</html>

Copy than paste to you text editor the code at above. After it save as html document. Our doccument are saved with article-with-amp.html

Testing and Validation

In this section, Paper 4Share using local webserver (localhost). Open your document using your Chrome browser. After it open inspect element tool (Ctrl+Shift+i). And than look in the console box. Look at pictures below.

Getting Started with Accelerated Mobile Pages (AMP) HTML

Look at to the red box on above pictures. If the results is looks like Powered by AMP ⚡ HTML – Version 1459447315826 so your document is success loaded with technology Accelerated Mobile Pages (AMP) HTML.

Okay, now you must checking the doccument. Is it valid doccument or not? How to check it for valid AMP Doccument?? Please follow this article.

Still on the your browser, give the parameter on your URL address in address bar of AMP Doccument. For example, our URL is http://localhost/test/article-with-amp.html, add paramaters #development=1 at the last our URL, so you URL looks like this http://localhost/test/article-with-amp.html#development=1. Look at below.

Notes:

First greenbox is the parameter that given.
Second green box is the result of validation

I hope, your first doccument working properly and successful for validation. Keep on this article, on the next article, we can explain how to load image on AMP html doccuments. Thanks for your visit.

Paper 4Share - Getting Started with Accelerated Mobile Pages (AMP) HTML