Page loading speed affects both rankings and the user experience.
And you’ve probably heard of the Accelerated Mobile Pages Project – an initiative that aims to improve mobile users’ experience by making pages much faster to load.
(If you’ve missed it, though, you can read my overview of AMP here.)
But I bet you’re still wondering how to launch AMP pages, particularly on an enterprise site with thousands of content assets. In this post, you’ll discover the process of launching AMP pages on an enterprise site, from selecting what content to convert first and building a template, to validating it and tracking your pages’ performance.
What Pages to Convert to AMP First
I admit, when you manage thousands of content assets, having to select content to convert into AMP first might feel a little overwhelming. But luckily the process is actually quite simple. First, let me give you a bit of a background on AMP assets.
What Pages Typically Work Best as AMPs
Originally, the AMP project was created to help news publishers to improve the loading of their content on mobile devices.
However, since then, AMP has broken into other content types too. Ecommerce stores, for example, could use the AMP carousel to showcase products to shoppers. A couple of months ago, eBay announced that AMP pages are now part of their mobile browsers experience. Here’s a screenshot of eBay’s AMP-powered search results:
Other potential uses for AMP pages include (as listed by Bruce Clay Inc.):
- Travel Guides
- Entertainment and many more
How to Decide What Pages to Convert to AMP Pages First?
One way to do it is by adapting an entire section of the site, for example, a blog, focused pages that are content driven, or product category pages. But another, to look at pages most commonly accessed on mobile devices and are currently ranked on mobile.
seoClarity helps construct your plan based on what pages rank most frequently and in the highest positions. This helps to create a roadmap to prioritize what pages you should consider converting to AMP.
Building an AMP Template
Depending on the technology that powers your website, you have a number of options:
If your site runs on the popular CMS platform, then you could use two dedicated AMP plugins:
- AMP by Automatic, the makers of Wordpress.
- Glue by Yoast, the makers of hugely popular Yoast SEO Plugin
In this case, the process is as simple as installing and activating the plugins, and then following some simple setup instructions.
Note: The AMP plugin currently only supports blog content. To AMP-enable your page, you would have to create the template manually.
2. Other Content Management Platforms
From what I gather, many other content management systems are already working on dedicated extensions. For example, Joomla developers have launched the wbAMP plugin that converts content into AMP.
However, since I have little experience with the platform, I recommend that you contact your website technical support to find out if they could recommend a suitable solution.
Hand-Code to Convert to AMP Templates
If there isn't a plug-in available to convert to content to AMP, your only option is to code an AMP template by hand. Below are some characteristics of AMP pages that might affect your work as an SEO:
1. AMP pages are separate versions of your main page
Unlike the responsive design that only amends the layout of the original page, when you access it on a mobile device, AMP pages are separate entities. This means that to use AMPs; you will need to maintain two versions of a page – the original, and its AMP counterpart.
From an SEO point of view, having two pages means that you’ll have to manage twice as many assets. Unless you use the Glue plugin I mentioned earlier (WP blog only), then you’d have to recreate your meta tags, and other on-page elements on every AMP page you create.
2. AMP template are restricted to contain only certain elements
Since the goal of launching AMP-enabled pages is to increase page load time, to create them, you need to make do with various content assets. For example:
- Lead forms. Again, due to their JS-based setup and server requests they generate, they can slow down the page load.
Luckily, you can still use images, and even have the page to display light-boxes or carousel-like slideshows, however, they’d require custom, AMP-specific code to work.
3. AMPs must use inline CSS
Another important aspect of creating AMP pages is the requirement to include the entire CSS in the actual file. What this means is that the code responsible for page styling cannot be served from an external file (like it happens with a traditional web page).
As a result, you can’t make global changes to the template, but instead you have to edit each page separately.
If you’re interested in coding AMP pages, then I recommend you check out these two resources:
- AMP by Example – a hands-on introduction to developing AMP pages.
- How to Make a Basic AMP Page From Scratch – a step-by-step tutorial by Envato
Validating AMP Pages
If you’ve been in SEO for any length of time, then I’m sure you know this that Google tends to pay an awful lot of attention on the validity of a page before it shows it in results. The situation is no different for AMPs. As the search engine states:
“Only valid AMP pages are eligible to show in the search results.”
For that reason, it’s crucial that you validate and error-check your AMPs. Luckily, Google has provided tools and suggestions as to how to do this. Let's walk through this process:
1. The simplest way to validate AMPs is to use a dedicated AMP chrome extension
This browser extension lets you quickly identify and debug AMP pages. It appends a little AMP icon to your Chrome browser that, by changing its color, indicates the validity of an AMP page.
The icon turning red when you access your AMP will signal errors on a page. Clicking on the icon will access a list of issues with it.
A green icon tells you that the page validates with no issues. And finally, the blue icon indicates that this isn’t an AMP page but such a version of this page exists.
2. You can also use Chrome’s Developer Tools
Similarly, you could use Chrome’s developer tools, accessible via Settings > More Tools > Developer Tools.
To use this method, follow these steps (as per the Google’s suggestion):
- Open your AMP page in your browser
- Append "#development=1" to the URL, for example, http://localhost:8000/released.amp.html#development=1.
- Open the Chrome DevTools console and check for validation errors.
3. Use the Official AMP Validator
Finally, the Accelerated Mobile Pages Project’s website features another tool you could use for validation – the AMP validator. To use it, type in your AMP-enabled URL into the box on top and click Validate. The application will analyze your code and report on any potential bugs or issues.
But here’s the thing with all these methods – they allow to only check one URL at a time.
And, as I’m sure you’ll agree, that poses a problem for a site with potentially hundreds of AMPs. To validate more than one AMP page, you could use the AMP validator by TechnicalSEO.com. The tool allows you to import up to 100 URLs via a .csv file to test.
The jury’s still out as to whether AMP pages will become an Internet-wide standard for mobile content. But given the frustrations smartphone users experience when accessing content on their devices, you probably should at least start considering your approach to conver the most popular content on your site to AMPs.
And hopefully, after reading this guide, you know where to begin.