Top 10 Essential AMP Components for Mobile Optimization

Accelerated Mobile Pages or AMP is Google’s initiative to make the mobile web faster. To achieve this goal, the AMP standards restrict how you can use HTML, CSS, and JavaScript, and manages the loading of external resources, such as images, videos, and ads via its own runtime.

This entails that you cannot use either any custom (author-written or third-party) JavaScript or any resource-related HTML elements such as images and videos in your AMP documents.

To bridge the gap between users’ needs and best performance practices, AMP has specific Components you can use in place of these excluded elements.

AMP Components are specific HTML tags. They behave similar to regular HTML tags: they have opening and closing tags, attributes, and most of them can be styled with CSS. They can be easily recognized, as they always start with the amp- prefix.

There are two types of AMP Components: built-in and extended Components.

Built-In AMP Components

Built-ins are built in to AMP’s JavaScript runtime, so you don’t have to separately include them.

1. amp-img

<amp-img>replaces the <img> tag in AMP HTML documents. You need to add the src and alt attributes just like when you work with the regular <img> element.

<amp-img> also has two other required attributes: you always need to specify the width and height attributes in integer pixel values, as this allows the AMP runtime to calculate the layout in advance.

If you want to make the image responsive, add the layout="responsive" attribute. The layout attribute controls the layout in AMP documents, and it can be added to any AMP Components (learn more about this on the AMP Layout System).

<amp-img src="img.jpg" width="350" height="200"
    layout="responsive" alt="My Image">
</amp-img>

You can also use the srcset attribute on the <amp-img> tag to specify different images for different viewports and pixel densities. It works the same way as with non-AMP images.

2. amp-video

<amp-video> can be used to directly embed HTML videos in AMP HTML documents. It replaces the <video> in AMP files. The <amp-video> tag lazy loads videos in order to optimize performance.

The source of the video must be served via the HTTPS protocol. You’re required to add the width and height attributes, just like with the <amp-img> component.

The <amp-video> tag has many optional attributes, such as autoplay and poster which you can specify to fine-tune how your HTML5 video is displayed.

<amp-video> supports mp4, webm, ogg, and all the other formats supported by the HTML5 <video> tag.

If you want, you can also add fallback videos for users with browsers that don’t support HTML5 videos, using the fallback attribute and the <source> HTML tag.

<amp-video width="350" height="250"
  src="https://example.com/video.mp4" layout="responsive" autoplay>
  <div fallback>
    <p>Your browser doesn't support HTML5 videos.</p>
  </div>
  <source type="video/mp4" src="myvideo.mp4">
  <source type="video/webm" src="myvideo.webm">
</amp-video>

3. amp-ad and amp-embed

<amp-ad> provides you with iframe sandboxes in which you can display your ads. You must serve your ads via the HTTPS protocol.

You cannot run scripts supplied by your ad network by yourself. Instead, the AMP runtime executes the JavaScript of the given network inside the sandbox. You only need to specify which network you use, and add your data.

The <amp-ad> component requires you to add the dimensions of the ad using the width and height attributes.

You can define the ad network you use with the type attribute. See the list of supported ad networks.

Each ad network has its own data-* attributes you also need to add. To see which one you need, click on your ad network in the above list.

<amp-ad width="300" height="250"
    layout="responsive" type="adsense"
    data-ad-client="ca-pub-2005682797531342"
    data-ad-slot="7046626912">
</amp-ad>

<amp-embed> is the alias of <amp-ad>, the documentation doesn’t say much about it other than it can be used instead of <amp-ad> when it’s semantically more accurate. As Google promises to evolve ad-related AMP components over time, this may change in the future.

4. amp-pixel

With <amp-pixel>, you can add a tracking pixel to your AMP HTML documents to count page views. It has only one attribute, the required src attribute, in which you need to specify the URL belonging to the tracking pixel.

The <amp-pixel> tag allows standard URL substitutions, which means you can generate a random URL value to track each impression.

See AMP’s URL Substitution Guide if you want to use this component. Note that you cannot style the <amp-pixel> component.

<amp-pixel src="https://example.com/pixel?RANDOM"></amp-pixel>

Extended AMP Components

As extended AMP components aren’t part of the JavaScript runtime, you always need to import them in the <head> section of the AMP page on which you want to use them.

Note: component versions may change in the future, so don’t forget to check the current version in the documentation.

5. amp-audio

<amp-audio> replaces the <audio> HTML5 tag, and makes it possible to directly embed HTML5 audio files in AMP pages.

To use it, you’re required to specify the src, width and height attributes, and you can also add three optional attributes: autoplay, loop and muted.

It can also be a good idea to add fallback audio files for users with browsers that don’t support HTML5. You can do this by using the fallback attribute and the <source> tag, just like with the aforementioned <amp-video> component.

The <amp-audio> AMP component supports the same audio formats as the <audio> HTML5 tag.

<amp-audio width="200" height="100"
  src="https://example.com/audio.mp3">
  <div fallback>
    <p>Your browser doesn't support HTML5 audio.</p>
  </div>
  <source type="audio/mpeg" src="mysong.mp3">
  <source type="audio/ogg" src="mysong.ogg">
</amp-audio>

To use <amp-audio>, include the following script in the <head> section of your AMP document:

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

6. amp-iframe

<amp-iframe> displays an iframe in AMP documents. <amp-iframe> has been made to be more secure than regular HTML iframes. Therefore they are sandboxed by default.

There are some rules related to <amp-iframe> you must follow to pass validation.

Read Also:  How to Validate Accelerated Mobile Pages (AMP)

You must specify the width, height, and sandbox attributes. The sandbox attribute is empty by default, but you can give it different values in order to modify the behaviour of the iframe, for instancesandbox="allow-scripts"lets the iframe run JavaScript. You can use attributes of standard iframes as well.

<amp-iframe width="350" height="250"
     layout="responsive"
     sandbox="allow-scripts allow-same-origin"
     allowfullscreen
     src="https://example.com/iframe">
 </amp-iframe>

While the dimensions of <amp-iframe> are predefined by the width and height attributes, there’s a way to resize it in runtime. To use the <amp-iframe> component, add the following script to your AMP page:

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

7. amp-accordion

Accordions constitute a frequent UI pattern in mobile design, as they save space, but still displays the content in an accessible way. <amp-accordion> makes it possible to quickly add accordions to AMP pages.

Sections of the accordion must use the <section> HTML5 tag, and need to be the direct children of the <amp-accordion> tag.

Each section must have two direct children:

1. one for the heading
2. one for the content (the content can also be an image)

Use the expanded attribute on any section you want to expand by default.

<amp-accordion>
  <section expanded>
    <h3>Section 1</h3>
    <div>Content of Section 1</div>
  </section>
  <section>
    <h3>Section 2</h3>
    <p>Content of Section 2</p>
  </section>
  <section>
    <h3>Section 3</h3>
    <figure>
      <amp-img src="image.jpg" width="350" height="200"
          layout="responsive" alt="Image for Section 3">
      </amp-img>
      <figcaption>Image for Section 3</figcaption>
    </figure>
  </section>
</amp-accordion>

To use the <amp-accordion> component in your AMP document, include the following script:

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

8. amp-lightbox

<amp-lightbox> adds a lightbox to different elements (in most cases, images) on Accelerated Mobile Pages.

When the user interacts with the element, for example taps on it, the lightbox expands and fills the whole viewport. You need to add a button or another control which the user can tap on.

Note that amp-lightbox can only be used with the nodisplay layout.

<button on="tap:mylightbox" role="button" tabindex="0">
  Expand
</button>

<amp-lightbox id="mylightbox" layout="nodisplay">
  <div class="lightbox" on="tap:mylightbox.close"
      role="button" tabindex="0">
      <amp-img src="full-image.jpg" width="375" height="667"
      on="tap:my-lightbox.close">
  </div>
</amp-lightbox>

To use the <amp-lightbox> component, you need to import it with the following code:

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

9. amp-carousel

Carousels are frequently used in mobile design, as they allow to display numerous similar elements (most frequently images) along the horizontal axis. AMP results are also presented in a carousel format in Google Search.

The <amp-carousel> component enables you to add carousels to your site. The direct children of the <amp-carousel> component will be regarded as the items of the carousel. You must define the dimensions of the carousel with the width and height attributes.

You can use the optional type attribute to determine how to display the carousel items. If the type attribute takes the "carousel" value, the items will be shown as a continuous strip (this is the default), while the "slides" value will display the items in slides format.

The <amp-carousel> tag also has other optional attributes that can help you fine-tune the result.

In the example below, notice that both the carousel and all of its items use the same width and height values.

<amp-carousel width="300" height="400" layout="responsive"
  type="slides">
  <amp-img src="image1.jpg" width="300" height="400"></amp-img>
  <amp-img src="image2.jpg" width="300" height="400"></amp-img>
  <amp-img src="image3.jpg" width="300" height="400"></amp-img>
</amp-carousel>

The <amp-carousel> component requires the addition of the following script:

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

10. amp-analytics

<amp-analytics> can be used to collect analytics data on AMP pages. Currently, <amp-analytics> supports four types of tracking events, however this can change in the future:

1. Pageview
2. Anchor Clicks
3. Timer
4. Scrolling

To use <amp-analytics>, you need to add a JSON configuration object inside a <script> tag, in which you can configure what you want to track.

Luckily, Google teamed up with many analytics vendors who provide pre-configured JSON scripts you only need to copy-paste into your site. See the list of available analytics vendors.

To use the pre-configured scripts, you need to add the name of the analytics vendor in the type attribute.

The <amp-analytics> tag also has some optional attributes you can use to further configure how you track your site.

<amp-analytics>
  <script type="application/json">
  {
    // ...
  }
  </script>
</amp-analytics>

Add the following script to the <head> section of your AMP HTML page to import the <amp-analytics> component:

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

Final Words

In this post, we had a look at all built-in AMP components, and some of the extended ones. As Accelerated Mobile Pages is still new, many things can change in the future, so it’s worth to keep an eye on the documentation either on Github or on the official AMP site.

As these AMP components are open source, you can also contribute to the development, even creating your own component. If you want to see how a complete AMP page looks like with different components, you can check out these few examples on Github.