How to Make the Web with AMP HTML Non Blogger

Agung Winarno
Agung Winarno
22.49
How to Create a Basic AMP HTML Page-how I do create a standard Page with AMP HTML. The basic markup for creating web/page with the AMP HTML is like this: 
 <!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
    <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>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

The required markup


Mandatory AMP HTML contains some of the markup below:

  • Starting with the <!doctype html>
  • Include <html ⚡> atau <html amp>.
  • Include <link rel="canonical" href="$SOME_URL" />, the tag on the head to know AMP HTML version.
  • Include <meta charset="utf-8">.
  • Include <meta name="viewport" content="width=device-width,minimum-scale=1"> on tag head.
  • Include <script async src="https://cdn.ampproject.org/v0.js"></script> on tag head.
  • Include <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> on tag head.
Note: the Markup I get from Github, but there is a validation error in the viewport meta tag. The solution is to add user-scalable=no,minimal-ui as I demonstrated in the Markup above.

    Add A Picture


    <!doctype html>
    <html amp lang="en">
      <head>
        <meta charset="utf-8">
        <title>Hello, AMPs</title>
        <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=no,minimal-ui">
        <script type="application/ld+json">
          {
            "@context": "http://schema.org",
            "@type": "NewsArticle",
            "headline": "Open-source framework for publishing content everywhere",
            "datePublished": "2015-10-07T12:02:41Z",
            "image": [
              "logo.jpg"
            ]
          }
        </script>
        <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
        <script async src="https://cdn.ampproject.org/v0.js"></script>
      </head>
      <body>
        <h1>Welcome to the mobile web</h1>
        <amp-img src="welcome.jpg" alt="Welcome" height="2000" width="800"></amp-img> 
      </body>
    </html>

    Add CSS


     <!doctype html>
    <html amp lang="en">
      <head>
        <meta charset="utf-8">
        <title>Hello, AMPs</title>
        <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=no,minimal-ui">
        <script type="application/ld+json">
          {
            "@context": "http://schema.org",
            "@type": "NewsArticle",
            "headline": "Open-source framework for publishing content everywhere",
            "datePublished": "2015-10-07T12:02:41Z",
            "image": [
              "logo.jpg"
            ]
          }
        </script>
        <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
        <style amp-custom>
          /* custom CSS disini; tapi ingat, body margin tidak bisa diubah */
          body {
            background-color: white;
          }
          amp-img {
            background-color: gray;
          }
        </style>
        <script async src="https://cdn.ampproject.org/v0.js"></script>
      </head>
      <body>
        <h1>Welcome to the mobile web</h1>
        <amp-img src="welcome.jpg" alt="Welcome" height="2000" width="800"></amp-img>
      </body>
    </html>


    Page Layout


    External content such as pictures, video etc., must use the height and width attributes to mendeklarasikannya. This is to cope with the load, so that the resource is not damning.
    May not use the tag style in HTML. The bottom line may not use inline CSS. Allowed to use the tag <style> only one times for CSS. Allowed CSS enhancements using < style amps-custom >.

    To test is valid or not, must use Chrome or Firefox for Development Tool Developer. Then at the end of the URL, add "#depelopment = 1" without the quotes, then Inspect Element and see the Web Console.

    If there is still an Error, then there will be a notice of how many errors

    An example of an already valid HTML AMP