i Google AMP About the Tutorial Accelerated Mobile Pages (AMP) is Google's open source project specially designed to make the web pages mobile friendly by making it render contents faster, smoother and more responsive in any browser. This tutorial gives you a comprehensive coverage of concepts of Google AMP and makes you comfortable to use it in your software development projects. Audience This tutorial is designed for software programmers who want to learn the basics of Google AMP and its programming concepts in simple and easy ways. This tutorial will give you enough understanding on various functionalities of Google AMP with suitable examples. Prerequisites This tutorial is written assuming that the learner has a prior understanding of HTML, CSS, and Javascript. In case you are new to any of these technologies, we suggest you to pick a tutorial based on these first, before beginning your learning with Google AMP. Copyright & Disclaimer @Copyright 2019 by Tutorials Point (I) Pvt. Ltd. All the content and graphics published in this e-book are the property of Tutorials Point (I) Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republish any contents or a part of contents of this e-book in any manner without written consent of the publisher. We strive to update the contents of our website and tutorials as timely and as precisely as possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt. Ltd. provides no guarantee regarding the accuracy, timeliness or completeness of our website or its contents including this tutorial. If you discover any errors on our website or in this tutorial, please notify us at [email protected] ii Google AMP Table of Contents About the Tutorial ................................................................................................................................... ii Audience ................................................................................................................................................. ii Prerequisites ........................................................................................................................................... ii Copyright & Disclaimer ............................................................................................................................ ii Table of Contents ................................................................................................................................... iii 1. GOOGLE AMP – OVERVIEW ................................................................................................. 1 What is AMP?.......................................................................................................................................... 1 WHY AMP? .............................................................................................................................................. 1 Why to Choose AMP? .............................................................................................................................. 2 How AMP works? .................................................................................................................................... 4 How does Google Identify AMP and non-AMP page? .............................................................................. 5 Features of Google AMP.......................................................................................................................... 6 Advantages of AMP ................................................................................................................................. 8 Disadvantages of AMP ............................................................................................................................ 9 2. GOOGLE AMP – INTRODUCTION ....................................................................................... 10 Sample Amp Page ................................................................................................................................. 12 Do’s and Don’ts in an AMP Page ........................................................................................................... 13 Google Mobile Emulator ....................................................................................................................... 20 3. GOOGLE AMP – IMAGES .................................................................................................... 23 Why to use amp-img instead of img? .................................................................................................... 23 4. GOOGLE AMP – FORM ...................................................................................................... 26 5. GOOGLE AMP – IFRAMES .................................................................................................. 34 Conditions to be Followed for iFrames .................................................................................................. 34 6. GOOGLE AMP – VIDEO ...................................................................................................... 43 iii Google AMP Format of amp-video tag ....................................................................................................................... 43 Attributes Available for amp-video ....................................................................................................... 46 Autoplay AMP Video ............................................................................................................................. 46 7. GOOGLE AMP – BUTTON ................................................................................................... 50 Sample Code for Lightbox ..................................................................................................................... 50 8. GOOGLE AMP – TIMEAGO ................................................................................................. 54 9. GOOGLE AMP – MATHML ................................................................................................. 61 MathML AMP tag .................................................................................................................................. 61 Example ................................................................................................................................................ 61 10. GOOGLE AMP – FIT TEXT ................................................................................................... 63 Amp Fit-Text Tag ................................................................................................................................... 63 11. GOOGLE AMP – DATE COUNTDOWN ................................................................................ 67 Amp-date-countdown Tag..................................................................................................................... 67 Attributes for amp-date-countdown ..................................................................................................... 68 Format .................................................................................................................................................. 68 List of Locales Supported ....................................................................................................................... 73 12. GOOGLE AMP – DATE PICKER ............................................................................................ 77 Amp-date-picker Tag ............................................................................................................................. 77 Supported Attributes ............................................................................................................................ 77 AMP Static date picker .......................................................................................................................... 78 How to get the date selected from amp-date-picker? ........................................................................... 81 AMP Overlay Date Picker ...................................................................................................................... 86 AMP Lightbox Date Picker ..................................................................................................................... 90 13. GOOGLE AMP – STORY ...................................................................................................... 96 14. GOOGLE AMP – SELECTOR .............................................................................................. 106 iv Google AMP Format of amp-selector ....................................................................................................................... 106 Amp Selector Single Select .................................................................................................................. 107 Amp Selector Multiple Select .............................................................................................................. 110 15. GOOGLE AMP – LINK ....................................................................................................... 116 AMP Page Discovery ........................................................................................................................... 116 Fonts Using Link .................................................................................................................................. 117 16. GOOGLE AMP – FONT ....................................................................................................