Post
Ask Question

Introduction To Accelerated Mobile Pages (AMP) - Part Two

Introduction

 
Before getting into the details of this article, please go through my earlier article on Accelerated Mobile Pages (AMP):
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,
 
code
  • 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">  
    3.   
    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>  
    17.   
    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>  
    31.   
    32. </html>  
    Output of the above code snippet can be seen as below,
     
    output
     
  • 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">  
    3.   
    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>  
    18.   
    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>  
    27.   
    28. </html>  
    The output of the above code snippet can be seen as below,
     
    OUTPUT
     
     
  • 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,
     
    output
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.
 
Read more articles on HTML:


Similar Articles