Now-a-days, if anyone browse a website on mobile, everyone expect rich and HD graphics, smooth scrolling, fast animations, transitions to load quickly. Google introduces a new technique known as AMP. It’s a technique to build static content web pages that render fast. Its basic structure consists of three different layers:
- AMP HTML: HTML extended with custom AMP properties but with some restrictions for fast and reliable performance
- AMP JS Library: ensures the fast rendering of AMP HTML pages
- Google AMP Cache: used to serve cached Amp HTML pages
So AMP Project = AMP-HTML + AMP JS Library + Custom Styling + AMP Cache
Goals of AMP Project
- Make pages fast
- Easy to implement
- Enable monetization
- Embrace open web
Create first AMP Page:
Basic structure for AMP Page is below:
[java]
<!doctype html>
<html amp lang="en">
<head>
</head>
<body>
</body>
</html>
[/java]
Code inside head tag:
[java]
<head>
<meta charset="utf-8">
<title>First AMP Page</title>
<link rel="canonical" href="http://ampproject.org/article.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>
<style amp-custom>
amp-img.grey-placeholder {
background-color: grey;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
[/java]
Code inside body tag:
[java]
<body>
<h1>This is my First AMP Page</h1>
</body>
[/java]
Note:
<!doctype html> is required at the top.
<html amp> to tell browser that we are using amp.
<link rel=”canonical” href=”_canonical-url_” /> it points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists.
<script async src=”amp-js-library”></script> it includes AMP JS library.
Some extended HTML tags:
- amp-img: replacement of HTML img tag
- amp-ad: container to display ad and a script is required
- amp-pixel: used to count the page views by typical tracking pixel
- amp-embed: used to embed elements
- amp-video: replacement of HTML5 video tag
Styling/ Presentation
Styling is done by using common CSS, by using starting tag <style amp-custom>:
[java]
<style amp-custom>
body {
background: white;
}
amp-img {
border: 1px solid black;
}
</style>
[/java]
Make sure there should be only one amp-custom style tag for styling. And even AMP page can have a single embedded stylesheet.
Validate AMP Page:
AMP is providing a validator built in browser only. No need to validate your code from other online validators. Just open your document in any browser through local server: XAMP/WAMP.
Add #development=1 after the url in address bar.
e.g http://localhost:8000/first-amp-page.html#development=1
Open Dev tool console in chrome browser and check validation errors.
Congrats you have created first AMP Page and tested locally.
You can explore more about this.