Now that Google has announced its intention to use mobile-friendliness as a ranking signal, it`s increasingly important for marketers to ensure their site is optimized for mobile devices.
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.
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:
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.
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 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.
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.
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.
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.
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.
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.
The documentation for creating Accelerated Mobile Pages, including information about the supported elements, attributes, and more.