Google AMP - Introduction

Google Accelerated Mobile Pages (Google-AMP) is Google’s new open source project specially designed to build light-weight web pages using amp html. The main aim of this project is to make sure the AMP code works fine and loads fast on all possible devices such as smartphones and tablets.

AMP is just an extension to standard HTML. Few HTML tags have changed and AMP has added restriction on their usage. In this chapter, we will list out the html tags which are changed and the restrictions added onto them. The tags which deals with loading external resources, for example images, css, js, forms submission, video, audio etc., are changed.

Also there are lot of new features added to amp, for example amp-date-picker, amp-facebook, amp-ad, amp-analytics, amp-ad, amp-lightbox and much more which can be used directly in html pages. Rest others which are meant for display are used as it is.

With all these changes and new features, AMP promises to give faster loading, better performance for pages when used in live environment.

When you search anything in Google search on your mobile, the display that is seen in the google carousel at the top are mostly amp pages as shown below −

When you click the AMP page, the URL which you get in the address bar is as follows −

https://www.google.co.in/amp/s/m.timesofindia.com/sports/cricket/india-in-australia/to-hell-with-the-nets-boys-need-rest-ravi-shastri/amp_articleshow/67022458.cms

The URL is not coming from the publisher directly, but Google points it to its own copy on Google server which is a cached version and helps rendering the content faster in comparison to a non-amp page. This will happen only on devices or in Google emulator mode.

Sample Amp Page

An example for amp page is shown below −

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Amp Sample Page</title>
      <link rel = "canonical" href = "./regular-html-version.html">
      <meta name = "viewport" content = "width = device-width,
         minimum-scale = 1,initial-scale = 1">
      <style amp-custom>
         h1 {color: red}
      </style>
      <script type = application/json>{
         "vars": {
            "uid": "23870",
            "domain": "dummyurl.com",
            "sections": "us",
            "authors": "Hello World"
         }
      }
      </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>
      
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
   </head>
   <body>
      <h1>Amp Sample Page</h1>
      <p>   
         <amp-img src = "imgurl.jpg" width = "300" height = "300" 
            layout = "responsive"></amp-img>
      </p>
      <amp-ad width = "300" height = "250" type = "doubleclick"
         data-slot = "/4119129/no-ad">
         <div fallback>
            <p style = "color:green;font-size:25px;">No ads to Serve!</p>
         </div>
      </amp-ad>
   </body>
</html>

Do’s and Don’ts in an AMP Page

Let us understand some do’s and don’ts a programmer has to follow in an AMP page.

Mandatory Tags

There are some mandatory tags to be included in an amp page as given below −

We have to make sure that there is amp or ⚡ added to the html tag as shown below −

<html amp>
   OR
<html ⚡>

<head> and <body> tags should be added to the html page.
The following mandatory meta tags should be added in the head section of the page; otherwise it will fail for amp validation

<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, minimum-scale = 1, initial-scale = 1">

Link of rel = "canonical" to be added inside head tag

<link rel = "canonical" href = "./regular-html-version.html">

Style tag with amp-boilerplate −

<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 tag with amp-boilerplate −

<noscript>
   <style amp-boilerplate>
      body{
         -webkit-animation:none;
         -moz-animation:none;
         -ms-animation:none;
         animation:none
      }
   </style>
</noscript>

Very important the amp script tag with async added to it as shown below −

<script async src = "https://cdn.ampproject.org/v0.js"> </script>

In case you want to add custom CSS to the page, please make a note here we cannot call external style sheet in amp pages. To add custom CSS , all your CSS has to go here as shown −

<style amp-custom>
   //all your styles here
</style>

The style tag should have amp-custom attribute added to it.

Scripts for AMP components

Note that scripts with src and type = ”text/javascript” are strictly not allowed in a amp page. Only script tags which async and related to amp-components are allowed to be added in head section.

This section lists few scripts used for amp components as given below −

amp-ad

<script async custom-element = "amp-ad" 
   src = "https://cdn.ampproject.org/v0/amp-ad-0.1.js">
</script>

amp-iframe

<script async custom-element = "amp-iframe" 
   src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
</script>

Notice that the script has async and custom-element attribute with the name of the amp component to be loaded. Amp validates script tags based on async and custom-element property and does not allow any other script to be loaded. It does take type=application/json which we have added in the sample file as shown below

<type = application/json>
{
   "vars": {
      "uid": "23870",
      "domain": "dummyurl.com",
      "sections": "us",
      "authors": "Hello World"
   }
}
</script>

The above script can be used with other amp-components if required, for example for amp-analytics.

HTML Tags

So far we have seen the mandatory tags required in the amp page. Now we will discuss the HTML elements which are allowed/not allowed and restrictions imposed on them.

Here is the list of HTML tags that are allowed/not allowed −

Sr.No	HTML Tag & Description
1	img This tag is replaced with amp-img. Using of direct img tag is not allowed in an AMP page
2	video Replaced with amp-video
3	audio Replaced with amp-audio
4	iframe Replaced with amp-iframe
5	object Not allowed
6	embed Not allowed
7	form Can be used as <form>. We need to add the script to work with form in an AMP page. Example − <script async custom-element = "amp-form" src = "https://cdn.ampproject.org/v0/amp-form-0.1.js"> </script>
8	Input elements Allowed.<input[type = image]>, <input[type = button]>, <input[type = password]>, <input[type = file]> are not allowed
9	<fieldset> Allowed
10	<label> Allowed
11	P, div, header,footer,section Allowed
12	button Allowed
13	a <a> tag is allowed with following condition, the href should not begin with javascript. If present the target attribute value must be _blank.
14	svg Not allowed
15	meta Allowed
16	Link Allowed. But does not allow to load external stylesheet.
17	style Allowed. It needs to have amp-boilerplate or amp-custom attribute to it.
18	base Not allowed
19	noscript Allowedd

Comments

Conditional html comments are not allowed. For example −

<!--[if Chrome]>
   This browser is chrome (any version)
<![endif]-->

HTML Events

Events that we use in html pages like onclick, onmouseover are not allowed in an AMP page.

We can use events as follows −

on = "eventName:elementId[.methodName[(arg1 = value, arg2 = value)]]"

Here is a example of event used on input element −

<input id = "txtname" placeholder = "Type here" 
   on = "inputthrottled:
   AMP.setState({name: event.value})">

The event used is input-throlled.

Classes

You cannot have classes in your pages with prefix like -amp- or i-amp-. Besides, you can use class name as per your requirement.

Ids

You cannot have ids to your html elements prefixed with -amp or i-amp-. Besides, you can use ids to your html element as per your requirement.

Links

Having JavaScript to href is not allowed in amp pages.

Example

<a href = "javascript:callfunc();">click me</a>

Style Sheets

External stylesheets are not allowed in AMP page. It is possible to add the styles required for the page inside −

<style amp-custom>
   //all your styles here
</style>

The style tag should have amp-custom attribute added to it.

@-rules

The following @-rules are allowed in stylesheets −

@font-face, @keyframes, @media, @page, @supports.@import will not be allowed. The support for same will be added in future.
@keyframes are allowed to be used inside <style amp-custom>. If there too many of @keyframes, it will be good to create <style amp-keyframes> tag and call this tag at the end of the amp document.
Class names, ids, tag names and attributes should not be prefixed with -amp- and i-amp- as they internally used in amp code which can cause conflicts if defined on the page too at runtime.
!important property is not allowed inside styling as amp wants to control the element sizing whenever required.

Custom Fonts

Stylesheet for custom fonts are allowed in AMP pages.

Example

<link rel = "stylesheet"
   href = "https://fonts.googleapis.com/css?family=Tangerine">

Fonts are whitelisted from following origins which can be used inside AMP pages.

Fonts.com − https://fast.fonts.net
Google Fonts − https://fonts.googleapis.com
Font Awesome − https://maxcdn.bootstrapcdn.com
Typekit − https://use.typekit.net/kitId.css (replace kitId accordingly)

Note − @font-face custom fonts are allowed in amp pages.

Example

@font-face {
   font-family: myFirstFont;
   src: url(dummyfont.woff);
}

AMP Runtime

Amp runtime environment is decided once the amp core file is loaded −

<script async src = "https://cdn.ampproject.org/v0.js"></script>

The core file takes care of loading the external resources, decides the prioritization of when to load them and also helps in validation of amp document when #development=1 is added to the amp URL.

Example

http://localhost:8080/googleamp/amppage.html#development=1

The above URL when executed in the browser will list the errors if failed for amp validation or displays amp validation successful message, if no errors.

AMP Components

Amp has a lot of amp-components added. They are basically used to handle the loading of the resource in an efficient manner. It also contains components to take care of animation, display data, displaying of ads, social widgets etc.

There are 2 types of components in AMP.

Built-in
External

Note − <amp-img> is a built-in component and available if the core amp js file is added. External components like <amp-ad>, <amp-facebook>, <amp-video> and many more needs respective js file related to the component to be added.

Common Attributes

Attributes such as width, height, layout, placeholder and fallback will be available for almost all the AMP components available. These attributes are very important for any AMP component as it decides the display of the component in the AMP page.

All the above features listed for AMP are discussed in details in the later chapters of this tutorial.

Note that all the examples in this tutorial are tested for devices and use the Google Mobile Emulator mode. Let us learn about this in detail now.

Google Mobile Emulator

To use the Google mobile emulator, open Chrome browser, right click and open the developer console as shown below −

We can see the developer tool for Chrome as shown above. Hit the link which you want to test in the browser. Observe that the page is displayed in the Desktop mode.

To the get the above page to test for devices, click on Toggle device toolbar as shown below −

You can also use the shortcut key Ctrl+shift+M. This will change the desktop mode to device mode as shown below −

A list of devices can be seen as shown below −

You can choose the device you want to test the page. Please note all the pages in these tutorials are tested on the Google Mobile Emulator as shown above. The same feature is available for Firefox and recent Internet Explorer browsers too.