AMP is a framework for making fast mobile sites, and it currently powers over 43% of search results. Switching your site over to AMP can give you a huge boost in traffic. How does it work?
What Is AMP?
If you’ve ever opened a news article from Google search results on your phone, you’ve likely encountered AMP before. It’s cached by Google, so the URL bar starts “www.google.com/amp” and has a header with the actual website name, and a link to the non-AMP page:
You might have also noticed the page loaded instantly (or nearly so). This is AMP, and it’s powering the bleeding edge of mobile websites.
What AMP actually is is a web component framework, similar to React, Angular or Vue. But while those frameworks focus on highly customizable web applications, AMP is designed to be a lightweight framework for mobile pages. There’s a lot stripped down to make that happen, and it comes with its own restrictions. It’s open-source, and you can use it without involving Google, but AMP’s integrations with Chrome and Google Search make it way faster than any other framework.
AMP is common enough that the script file used to load it will likely be cached already. Google even prerenders some AMP content before you even click on it, which can make pages load nearly instantly. There’s also integrations with Google Search that will display your page in a special box, rather than just in the list of results, and any page that’s AMP-enabled will display with a lightning bolt next to the name:
And for things like news articles, they can be displayed in a carousel of AMP-enabled results:
The lightning bolt is again in the corner of each article box. This carousel is powered by structured data, which is actually required for your AMP pages to be listed in Google.
How Does AMP Work?
AMP implements their own optimized HTML elements, and forces you to use them. For example, traditional images present two major problems: loading an image changes the layout of the page (requiring an expensive recalculation), and AMP needs to lazy-load images. Instead of using a normal tag, you’ll need to use
There are many components like this for all sorts of things, including video, advertisements, and dynamic content. Browsers don’t know how to process these components though, so to make this work you’ll need to load:
There’s a bit more boilerplate, such as setting a responsive viewport and linking to the normal HTML version of the page, which you can view in the AMP documentation. You must include all of this, or your AMP page will fail to pass Google’s standards.
Google caches your AMP site and preloads it to improve load times, which is great, but because of this the URL bar will display google.com as the domain, rather than your site’s name where the page is actually hosted. By default, your site will display in the AMP viewer, but you can also make use of Signed Exchange, which is a method of getting around having extra URLs. With signed exchange, you sign the content with a TLS certificate verifying that it comes from your domain. Once you can verify that, the browser can display your site’s URL even though it’s still being cached and served from Google’s CDN.
AMP Limitations
While it’s most certainly fast, there’s a lot of restrictions as well. AMP severely limits JavaScript usage; all JavaScript is executed asynchronously, and you can use any custom JavaScript (outside of
AMP is all about avoiding style and layout recalculations in favor of an optimized rendering pipeline, so that presents a few restrictions. All resources must be statically sized, meaning no changing size with CSS. All CSS must be inline (in the header, rather than an external file), and is limited to a maximum size of 50Kb. You also can’t use the !important modifier in CSS, because it can overwrite mandatory AMP styling.
This makes AMP very mobile focused, as it’s not feasible to create a complex web application with it. But for the kind of content it’s geared towards (news, articles, anything you’d run WordPress for) it works very well.
How Do I “AMP” My Website?
You won’t replace your normal site entirely, so you’ll need to remake your site in AMP, while keeping the old site intact. AMP requires you to link to the non-AMP page with a canonical link, which is how you make it visible to Google.
AMP provides a lot of templates for you to start with. Because it’s only intended for mobile (though not limited to it), your design will be much simpler in general. You can browse through their Component Catalog to get a feel for what kind of content AMP supports, and how you can transition your site over to it.
If you’re using WordPress, you can implement AMP with a plugin, of which there are two popular ones—the official plugin, and a third-party plugin with more features. These will create slimmed down versions of every article, ready to be indexed by Google.
One extra thing that is required of you is to provide structured data about your AMP page. This is essentially some JSON in the header of your page that tells Google about the page. You can use their structured data-testing tool to make sure yours is valid, which will also give you a nice preview of how Google interprets your content. Make sure the type, headline, description, and image all match up and lead to the correct places.
You should use Google’s AMP validation tool to check your syntax, which will tell you if your AMP page is valid and will also show you a preview of how your site will appear in search results based on the type of result it is:
Then, when you’re ready to go live with AMP, link to the AMP version of each page in the head of your normal site, using rel=“amphtml”:
You’ll also want to place a link back from the AMP document to the normal site:
Then your AMP pages will be discoverable and appear in search results (though it may take a bit for Google to catch up). It would be a good idea to submit an updated sitemap through the Search Console, to let Google know directly that you’ve enabled AMP and have created AMPed versions of all your pages.
