How to create AMP pages

Create your AMP HTML page

the following markup is a respectable start line or boilerplate. reproduction this and save it to a file with a .html extension.

[code language=”html”]
<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <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">
    <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>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>
[/code]

The content material in the bodythus far, is quite trustworthyhowever there’s a whole lot of additional code inside thehead of the web page that might not be straight away obviouspermit’s deconstruct the desired mark-up.

Include an image

most HTML tags can be used directly in AMP HTML, but certain tags, inclusive of the  tag, are replaced with equivalent or slightly more desirable custom AMP HTML tags (and some difficult tags are outright banned, see HTML Tags in thespecification).

to demonstrate what additional markup may want to look likeright here’s the code required to embed an photo into the page:

<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

Modify presentation and layout

Modify the presentation

AMP pages are net pages; any styling to the page and its factors is done using not unusual CSS homesstyle factors the usage of class or detail selectors in an inline stylesheet in the , referred to as

[code]
<style amp-custom>
  /* any custom style goes here */
  body {
    background-color: white;
  }
  amp-img {
    background-color: gray;
    border: 1px solid black;
  }
</style>
[/code]

Every AMP page can only have a single embedded stylesheet, and there are certain selectors you’re not allowed to use.

Control the layout

AMP follows stricter policies when laying out elements on the page. On a ordinary HTML page, you nearly solely use CSS to lay out elementshowever for performance reasons, AMP requires all factors to have an specific length set from the get-move.

Preview and validate

Preview

Preview the AMP page just as you will preview another static HTML web page. There’s no construct step or preprocessing required. you may pick to:

  • Open the web page immediately inside the browser from the document gadget (certain factors might not work because ofXMLHttpRequests failing).
  • subsequentensure that your AMP web page is actually legitimate AMP, or it won’t get discovered and dispensed by thirdbirthday celebration systems like Google seek. To validate:
    • Open your web page to your browser.
    • upload “#development=1″ to the URL, as an example http://localhost:8000/released.amp.html#development=1.
    • Open the Chrome DevTools console and take a look at for validation mistakes.

Prepare your page for discovery and distribution

Manage the spinned words as you want..

In some casesyou may want to have each a non-AMP and an AMP version of the same pageas an example, a informationarticle. remember this: If Google search finds the non-AMP version of that web page, how does it realize there’s a “paired” AMP model of it?

Linking pages with <link>

set up that a non-AMP web page and an AMP web page ought to be treated as being “paired” collectively, we add data about the AMP web page to the non-AMP page and vice versa, within the form of tags inside the .

Add the following to the non-AMP page:

[code]
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
[/code]

And this to the AMP page:

[code]
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
[/code]

What if I only have one page?

if you only have one page, and that web page is an AMP web page, you must still upload the canonical hyperlink to it, with a view to then in reality factor to itself:

[code]
<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
[/code]

Final steps before publishing

Congrats! You’ve tested your page locally and fixed all validation errors, which means your first AMP page is ready to ship.

Thank you we hope you like this post.

Please follow and like us:



Leave a Comment

Your email address will not be published. Required fields are marked *