AMP (Accelerated Mobile Pages) Example Pages

AMP (Accelerated Mobile Pages) is a Google open source project to speed up page load in mobile devices.

AMP consist of three main parts

  • AMP HTML is HTML with custom AMP tags, properties and some restrictions like only subset of css and html are not allowed that slow down page loading. Only valid AMP HTML files will be shown in Google Search.
  • AMP JS library manage resource loading, provide custom tags, load external resources asynchronously so external resources should not block page rendering, pre-calculate layout of every element before any resources are loaded and it also disable slow CSS selectors.
  • Google AMP CACHE is a content delivery network. It fetches valid AMP HTML pages and cache them to improve page performance.

Sample AMP 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>

Required markup for AMP HTML document

  • Start your document with the doctype <!doctype html>.
  • Below doctype <html > tag (<html amp> is accepted as well).
  • Require <head> and <body> tags
  • First tag after <head> is <meta charset=\”utf-8\”>
  • Include a <script async src=\”https://cdn.ampproject.org/v0.js\”></script> tag as the second child of their <head> tag (this includes and loads the AMP JS library).
  • <link rel=\”canonical\” href=\”$SOME_URL\” /> 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.
  • Add a <meta name=\”viewport\” content=\”width=device-width,minimum-scale=1\”> tag inside their <head> tag. It\’s also recommended to include initial-scale=1.
  • Add the following in <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>

Optional meta-data

A schema.org definition in above sample code is optional. However you can use it, if you want to distribute your content in some places like google search news top stories, rich cards, critic review cards according to your content type.

Validation

As we learn about required syntax need to follow , when you create AMP web page make sure that is valid AMP. It should display correctly to mobile devices to users. You can validate your AMP pages at https://search.google.com/search-console/amp.

Link AMP and non AMP pages

To make sure that search engines read (index) your we pages correctly. You need to add canonical link.

On normal web page –

<link rel=\"amphtml\" href=\"amp-page-url\" />

On AMP web page –

<link rel=\"canonical\" href=\"none-amp-page-url\" />

Demo

Non Amp page: https://sisnolabs.com/demo-non-amp.html
Amp Page: https://sisnolabs.com/demo-amp.html

Improved loading performance

\"\"

Page load time, http request, page size all almost improved by more than 50%.
\"\"

Note: In our next post we will going to write about AMP built-in and custom tags.

Related Posts