The Definitive Guide to Accelerated Mobile Pages (AMP)
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
- 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.
- 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 .
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
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.
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.
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.
The following tools are available for use with AMP:
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.
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.