Creating AMP(Accelerated Mobile pages) for better User experience and better Google search results-SEO practice

So, what is AMP?
AMP is basically Accelerated Mobile Pages, that provides a great user experience across many platforms. AMP project was started by Google to make mobile web pages very light so that it can load at lesser time. I consider AMP more of a SEO best practice in order to gain visibility by Google search crawler. AMP is basically more for a static page, if your page is too much dynamic then I would advise you not to consider it as it could harm your business logic. Take a tour, open mobile web browser of your phone and navigate to “Google news”, you could see google provided separate visibility for AMP pages, you could see AMP written on the sections with flash sign which signifies AMP pages.

AMP pages are built with 3 core components.

  1. AMP HTML :- AMP HTML is HTML with some restrictions for reliable performance.
    AMP HTML is basically HTML extended with custom AMP properties. Though most tags in an AMP HTML page are regular HTML tags, some HTML tags are replaced with AMP-specific tags. These custom elements, called AMP HTML components, make common patterns easy to implement in a performant way. For example, the amp-img tag provides full srcset support even in browsers that don’t support it yet. AMP pages are discovered by search engines and other platforms through the HTML tag. You can choose to have a non-AMP version and an AMP version of your page, or just an AMP version. The simplest AMP HTML file looks like this:
    2. <!doctype html>
<html amp>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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>Hello World!</body>
</html>
  2. AMP JS :- The AMP JS library ensures the fast rendering of AMP HTML pages. The AMP JS library implements all of AMP’s best performance practices, manages resource loading and gives you the custom tags mentioned above, all to ensure a fast rendering of your page. Among the biggest optimizations is the fact that it makes everything that comes from external resources asynchronous, so nothing in the page can block anything from rendering. Other performance techniques include the sandboxing of all iframes, the pre-calculation of the layout of every element on page before resources are loaded and the disabling of slow CSS selectors.
  3. AMP Cache :- The Google AMP Cache can be used to serve cached AMP HTML pages. The Google AMP Cache is a proxy-based content delivery network for delivering all valid AMP documents. It fetches AMP HTML pages, caches them, and improves page performance automatically. When using the Google AMP Cache, the document, all JS files and all images load from the same origin that is using HTTP 2.0 for maximum efficiency.

In this post, we will learn how to convert your web page to AMP HTML page, how to stage it and validate that it’s AMP compliant, and finally how to get it ready for publication and distribution.

Step 1:- Following is the required mark-up which every AMP HTML documents MUST have.

  • Start with the doctype 
    <!doctype html>

    .

  • Contain a top-level tag 
    <html amp>

    .

  • Contain below meta tag as the first child of their head tag. 
    <meta charset="utf-8">
  • Contain below script tag as the second child of their head tag(this includes and loads the AMP JS library). 
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  • Contain below canonical tag inside their head tag that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists. 
    <link rel="canonical" href="$SOME_URL" />
  • Contain below meta tag inside their head tag. It’s also recommended to include initial-scale=1. 
    <meta name="viewport" content="width=device-width,minimum-scale=1">
  • Contain the following in their head tag: 
    <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>

Step 2:- Modify Presentation and Layout.
AMPs are web pages; any styling to the page and its elements is done using common CSS properties. Style elements using class or element selectors in an inline stylesheet in the head, called: 

<style amp-custom></style>

So, all your custom CSS needs to be inline using above code.

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

Every AMP page can only have a single embedded stylesheet, and there are certain selectors you’re not allowed to use. AMP pages can’t include external stylesheets, with the exception of custom fonts. You can embed custom fonts into your page in two ways:

    1) Through a tag (white-listed font providers only)

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">

    The following origins are whitelisted and allowed for font serving via link tags:-

    • Typography.com: https://cloud.typography.com
    • Fonts.com: https://fast.fonts.net
    • Google Fonts: https://fonts.googleapis.com
    • Font Awesome: https://maxcdn.bootstrapcdn.com

    2) Via @font-face (no restrictions, all fonts allowed)
    Alternatively, you can use @font-face within your AMP stylesheet:-

    <style amp-custom>
  @font-face {
    font-family: "Bitstream Vera Serif Bold";
    src: url("https://somedomain.org/VeraSeBd.ttf");
  }

  body {
    font-family: "Bitstream Vera Serif Bold", serif;
  }
</style>

Step 3:- Capturing analytics data from an AMP document. You can use the 

<amp-analytics>

element to measure activity on an AMP document. In this element, you specify a JSON configuration object that contains the details for what to measure and where to send the analytics data. You can send the tracking data to an analytics vendor and/or to a URL. There are many analytics vendors that are pre-configured for amp-analytics tag.
Required Script in the head tag.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

In the following example, we send analytics data to https://example.com/analytics when the AMP document is first loaded, and each time an anchor tag is clicked:-

<amp-analytics>
<script type="application/json">
{
  "requests": {
    "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
    "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
  },
  "vars": {
    "account": "ABC123"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    },
    "trackAnchorClicks": {
      "on": "click",
      "selector": "a",
      "request": "event",
      "vars": {
        "eventId": "42",
        "eventLabel": "clicked on a link"
      }
    }
  }
}
</script>
</amp-analytics>

See Analytics Vendors for a list of vendors that provide built-in support for amp-analytics.

Step 4:- Preview and Validate. Preview the AMP page just as you would preview any other static HTML site. There’s no build step or preprocessing required. Next, make sure that your AMP page is actually valid AMP, or it won’t get discovered and distributed by third-party platforms like Google Search. To validate:-

  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.

Step 5:- Prepare Your Page for Discovery and Distribution. In some cases, you might want to have both a non-AMP and an AMP version of the same page, for example, a news article. Consider this: If Google Search finds the non-AMP version of that page, how does it know there’s a “paired” AMP version of it?
In order to establish that a non-AMP page and an AMP page should be treated as being “paired” together, we add information about the AMP page to the non-AMP page and vice versa, in the form of link tags in the head tag.

Add the following to the non-AMP page:-

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

And this to the AMP page:-

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

If you only have one page, and that page is an AMP page, you must still add the canonical link to it, which will then simply point to itself:-

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

Congrats! You’ve tested your page locally and fixed all validation errors, which means your first AMP page is ready to ship. And, now wait for Google crawler to let crawl for page and then you can see the result in the google search result page. See below for how AMP pages are mentioned in the Google search result. You could see the AMP text for a particular AMP search result in the below Google news result.