Introduction To Accelerated Mobile Pages (AMP)

Introduction

Before getting into the details of this article, please go through my earlier article on Accelerated Mobile Pages (AMP):

Introduction To Accelerated Mobile Pages (AMP) - Part One

AMP Markup

In my earlier article on this series, I explained why AMP is making a difference for the mobile web experience. Now let's look at the very basic markup for AMP page,

Every AMP document should start with <!DOCTYPE html>
HTML tag should contain 'amp' as <html ?> or it can be <html amp>
<head> and <link> are our standard HTML tags
<style> tag is in line as per AMP restrictions. Whatever styles we need, all need to be inline under <head> tag. To add a custom style the following tag can be used,
1. <style amp-custom>
2. amp-img
3. {
4. border: 2px solid grey;
5. }
6. </style>
<script> tag is showing 'async' meaning external JS file needed for AMP custom attributes need to be loaded asynchronously. This is the key requirement for AMP pages for non-blocking loading of page e.g.
1. <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>

Now let's explore some of the key AMP tags with some real examples,

Suppose you want to show a banner Image on a page then it can be referred with tag <amp-img>,
1. <amp-img src="banner.jpg" alt="Banner" height="400" width="800"></amp-img>
Let's assume we are playing some video and along with video, we also need to display ads on a page. Video can be just displayed using <amp-video> and Ad can be displayed using <amp-ad> tag,

Refer the following code snippet and screenshot for the same from mobile,
1. <!doctype html>
2. <html amp lang="en">
4. <head>
5. <meta charset="utf-8">
6. <title>My First AMP</title>
7. <link rel="canonical" href="first-amp.html" />
8. <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
9. <style>
10. body
11. {
12. opacity: 0
13. }
14. </style><noscript><style>body{opacity:1}</style></noscript>
15. <script async src="https://cdn.ampproject.org/v0.js"></script>
16. </head>
18. <body>
19. <h1>
20. Welcome to my first AMP!</h1>
21. </br>
22. <h2>
23. AMP Ad with AdSense</h2>
24. <amp-ad width="300" height="200" type="adsense" data-ad-client="ca-pub-8125901705757971" data-ad-slot="7783467241">
25. </amp-ad>
26. <h2>
27. AMP Video</h2>
28. <amp-video width="15" height="10" src="OSP204.mp4" layout="responsive" controls>
29. </amp-video>
30. </body>
32. </html>
Output of the above code snippet can be seen as below,
Twitter: Let's now think of displaying Twitter information in a Twitter like interface,

Important: First of all add the following script tag under our head tag for Twitter display,
1. <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
Entire code snippet can be seen as below,
1. <!doctype html>
2. <html amp lang="en">
4. <head>
5. <meta charset="utf-8">
6. <title>My First AMP</title>
7. <link rel="canonical" href="first-amp.html" />
8. <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
9. <style>
10. body
11. {
12. opacity: 0
13. }
14. </style><noscript><style>body{opacity:1}</style></noscript>
15. <script async src="https://cdn.ampproject.org/v0.js"></script>
16. <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
17. </head>
19. <body>
20. <h1>
21. Welcome to my first AMP!</h1>
22. </br>
23. <h2>Twitter</h2>
24. <amp-twitter width=486 height=657 media="(min-width: 401px)" layout="responsive" data-tweetID="699784934026715137">
25. </amp-twitter>
26. </body>
28. </html>
The output of the above code snippet can be seen as below,
Just like Twitter, now I would like to pull Instagram feed as well as a part of my AMP page.

Just add reference to amp-instagram.js as below,
1. <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
And under <body> tag include below tag,
1. <h2>Instagram</h2>
2. <amp-instagram data-shortcode="_-CJrcwrKd" width="320" height="392" layout="responsive">
3. </amp-instagram>
Output for above code snippet will be,

Hope you now have a better understanding of some of the key tags from AMP.

In the next article, I would like to summarize the above tags and demonstrate from my mobile device with a faster mobile web experience.