OUR PRESS

02 November, 2022 Web Programming Latest News

The Definitive Guide to Accelerated Mobile Pages (AMP)

Introduction

The world has gone mobile, and the web hasn’t kept up. AMP is an email-based format that puts content in a wrapper to optimize it for phones and tablets. And, with the recent launch of Accelerated Mobile Pages (AMP) 2.0 by Google, it’s more important than ever to be a part of this new platform! This guide is here to help you get started and learn more about what all the hype is about.

Highlights of This Guide

This guide is focused primarily on the HTML elements of AMP pages. We also include a few sections about JavaScript and CSS, but for a more comprehensive information and examples, please refer to Google's Developer documentation. Some key features of this guide are:

  • Introduces AMP – what it is, why it matters, and how to use it.
  • Explains the role of Google in the way AMP pages work.
  • Provides resources for integrating AMP into your mobile site. This includes HTML elements, CSS styling, JS libraries and tools.
  • Includes a comprehensive list of open source and downloadable tools in both HTML and JavaScript. AMP is so new that there are still some supporting elements which you have to download from Google’s CDN (CloudFront). Some browsers have or will soon have native support for reading AMP pages directly in-line with other AMP websites without a separate wrapper document.
  • A comprehensive list of all the attributes, tags and containers within an AMP page. This allows you to get a better understanding for all of what makes up an AMP page, so that you can experiment with creating your own custom AMP pages! We’ve also included some best practices on how to optimally use certain elements within a page.
  • An overview of each element in an AMP page and examples where applicable. AMP provides several different ways to create custom AMP pages, and it’s useful to understand which element you should use for each purpose.
  • An overview of the AMP page structure and how it works. We’ve included an excerpt from the Right Way To Do It section on Google’s developer site so that you can read about some of the most important elements within an AMP page. If you have a question that isn’t answered there, we suggest reading the AMP developer docs .

AMP Components

Your AMP page has several different components: an AMP header, which includes the content that is displayed in the small space above your site’s homepage;a content wrapper, which contains your page’s markup;and then optionally, there may be several other components such as buttons, snippets and more. The following elements are included within an AMP page. A few attributes and values listed here may not be supported by some browsers at the moment.

AMP HTML Elements

AMP JS Libraries and Tools

Several JavaScript libraries have been developed to support Accelerated Mobile Pages;these make it possible to create custom elements for your pages through a combination of HTML, CSS and JS. The following libraries have been developed or contributed to by Google: amp-carousel - Provides a carousel element for creating galleries of elements.

AMP Snippets

AMP snippets are used to insert content from other webpages into your AMP page. The following snippets have been developed by Google: ajax-carousel - This snippet allows you to create a live carousel from any webpage.

AMP Navigation

Many of the pages on the web use hierarchical navigation menus. AMP takes it one step further and provides an alternative way to display navigation menus. The following libraries have been developed or contributed to by Google: amp-menu - This library allows you to display a menu through AMP pages.

AMP Gallery

The gallery element has been created as an alternative to standard HTML galleries. This library provides functionality for creating gallery sliders in AMP pages, wrapping and displaying images on your site’s homepage.

Additional Tools

The following tools are available for use with AMP:

AMP Validator

An open source tool that you can use to quickly check your AMP markup and detect any of the problems outlined in the AMP Developer Documentation. You can also create a custom syntax validator if you would like.

AMP WordPress Plugin

The WordPress plugin allows you to easily integrate AMP pages into your WordPress site. This plugin is included on this page with an updated version that supports AMP 2.0 and Custom Elements.

AMPamp

This Chrome Extension will allow you to inspect, preview, publish and test your AMP pages in all major browsers. It is built atop the AMP Validator for your AMP site.

AMPamp: AMP in the Browser

This Chrome Extension allows you to view and interact with an AMP page natively as it loads in your browser. It is built atop the AMPamp Chrome Extension.

AMPamp: AMP in the Browser for Mobile

This Chrome Extension allows you to view and interact with an AMP page natively as it loads in your browser on mobile devices. It is built atop the AMPamp Chrome Extension.

Google's Testing tool

Allows you to test a website against Google's AMP Guidelines. You can use this tool to quickly test your AMP pages and determine any errors that are present.

The AMP Cookbook

A collection of example AMP pages with detailed explanations of how they work. This site is also a great place to find code for templates or custom elements that you can use in your own projects.

Google Developers' guide for AMP

The documentation for creating Accelerated Mobile Pages, including information about the supported elements, attributes, and more.