What is AMP?
AMP stands for Accelerated Mobile Pages, an open source initiative backed by Google aiming to improve the performance of the mobile web. AMP allows publishers to create fast, interactive, optimized web pages that load instantly on all devices. All existing publishers support AMP pages because they drastically increases the web traffic and exposure.
How will AMP be used?
Google will be using AMP to quickly serve web pages on mobile devices without users having to click through a specific website to view the content. You can view a demo of AMP within Google’s search results on your mobile. Just Google any topic or news you will see a carousel of AMP articles from so many publishers.
How Does AMP Work?
AMP uses existing web technologies. It allows only a subset of the HTML, JS(Javascript) language. All the CSS has to be inline. It basically prevents the developer from using code which takes a long time to load and render. It optimizes the pages by caching the HTML, images and JS using CDN (Content Delivery Network).
AMP consists of three basic parts:
- AMP HTML: A subset of HTML, this markup language has some custom tags and properties and many restrictions. But if you are familiar with regular HTML, you should not have difficulty adapting existing pages to AMP HTML.
- AMP JS: A JavaScript framework for mobile pages. For the most part, it manages resource handling and asynchronous loading. It should be noted that third-party JavaScript is not permitted with AMP.
- Google AMP Cache: It is a proxy-based content delivery network for delivering all valid AMP documents., it will take your AMP-enabled pages, cache them and automatically make some performance optimization.
Create Your First AMP Page
Step 1: Create Your AMP HTML Page
The following markup is a decent starting point or boilerplate. Copy this and save it to a file with a .html extension.
<!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>Step 2: Include an Image
Most HTML tags can be used directly in AMP HTML, but certain tags, such as the <img> tag, are replaced with equivalent or slightly enhanced custom AMP HTML tags, here’s the code required to embed an image into the page:
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
Step 3: 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 amp-custom>
/* any custom style goes here */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>On a normal HTML page, you almost exclusively use CSS to lay out elements. But for performance reasons, AMP requires all elements to have an explicit size set from the get-go.
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 pre-processing required. Either:
- Open it directly in the browser from the file system
- Use a local web server like Apache 2 or Nginx.
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/example.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. In that case
Add the following to the non-AMP page:
<link rel="amphtml" href="https://www.example.com/url/to/amp/example.amp.html">
And this to the AMP page:
<link rel=”canonical” href=”https://www.example.com/url/to/full/example.amp.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/full/example.amp.html”>
Congrats! You’ve tested your page locally and fixed all validation errors, which means your first AMP page is ready to ship.
Components / Tags:
The AMP HTML library provides components/tags that are:
– Built-in: such as amp-img, amp-video, and amp-pixel.
– Extended: (e.g., <script async custom-element=”amp-audio” …).
– Experimental: Components that are released but are not yet ready for wide use.
Reference link:
https://www.ampproject.org/docs/reference/components
Useful links:
https://ampbyexample.com/
https://github.com/ampproject/amphtml
