How To Launch AMP Pages On An Enterprise Site

 In Blog

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:

Launch AMP pages on Ecommerce site

Other potential uses for AMP pages include (as listed by Bruce Clay Inc.):

  • Recipes
  • 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.

Blog_Pages

Building an AMP Template

Depending on the technology that powers your website, you have a number of options:

1. WordPress

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:

  • Third-party Javascript. Various tracking services and many other services create additional server requests that result in prolonged waiting time before you see the content, as well as draining the mobile device’s battery.
  • 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:

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.

AMP Chrome extension

(image source)

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.

AMP Chrome extension errors

(image source)

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.

Chrome 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.

AMP validator

Conclusion

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.

Mitul Gandhi
As a longtime data-driven serial entrepreneur, information architect and SEO veteran, Mitul has developed a blend of vast technical expertise and intense marketing insight. His variety of experience, gained in positions in in-house SEO, search marketing, and software development, affords him the ability to efficiently assess how to use software tools to meet challenges and drive ROI. As the Co-Founder and Chief Architect of seoClarity, Mitul currently oversees day-to-day operations, and provides strategic direction to all departments. His well of knowledge includes 10+ years of consulting experience with Fortune 500 and top Internet retailers concerning online search marketing. He has several patents pending for analyzing cause and effect in SEO. Mitul holds an MBA in direct marketing from Rochester Institute of Technology. Additionally, he has spoken at conferences in the United States and the U.K., including SES, SMX and Pubcon. He has also been quoted in MSN Money, USA Today, Time Online, Search Engine Watch, Search Engine Land and Web Pro News.
Recent Posts

Leave a Comment