Getting Started with AMP Articles for WordPress
You have just three seconds to get something up on a mobile screen before your visitors start bouncing. With a margin of error that narrow, the speed of your website on mobile devices is critically important. That’s where AMP comes in.
The Accelerated Mobile Pages, or AMP Project, is the first to target webpage load speed on mobile devices and to work across multiple platforms.
Facebook Instant Articles and Apple News are two other mobile speed-optimizing projects, but they are locked into a single environment. Facebook Instant Articles only work on the Facebook app and the Apple News app is only available to users on Apple devices. What these programs aim to do for their respective captive audiences, the AMP Project aims to do across multiple platforms.
Already, AMP format articles are used by Google Search and the LinkedIn, Twitter, Pinterest, Medium, and Nuzzle apps. Since AMP is an open-source initiative, additional platforms may join at any time.
Content in AMP format gets a boost in visibility in Google search results and loads an average of four times faster than non-amp equivalents. With hundreds of content publishers and platforms already aboard the AMP bandwagon, if your website regularly publishes articles or blog posts, you need to configure your WordPress website to generate AMP articles.
Your AMP Articles at Work
Let’s get one thing straight: AMP articles are not a suitable replacement for having a responsive website. Even with AMP articles available, visitors who head straight to your website will be served your standard website files and articles (for now anyway, I have a feeling this arrangement may change over time if mobile browsers add native support for the AMP format).
So when will visitors see your AMP content? Visitors will be served the AMP version of your content when they access it from a platform that supports the AMP format.
Here are a few examples:
- If someone shares one of your articles on Twitter, when a visitor using the Twitter app opens the link they will get the AMP article. The same goes for content accessed using the LinkedIn, Pinterest, Medium, and Nuzzle apps.
- When someone uses a mobile device browser to perform a Google search for a trending news story – one you happen to have written about – a selection of AMP articles will be displayed in the “Top Stories” portion of the search results. If your article happens to make it into that section, the AMP formatted version will be displayed.
- Anytime a new platform adds support for AMP content, your content will be served to users of that platform in AMP format.
How Does AMP Work?
AMP articles are built with a special HTML library of custom elements. AMP restricts certain HTML, CSS, and JavaScript features to speed up content on mobile devices. Some of the restrictions AMP enforces include:
- All scripts must load asynchronously. Interactive features must be added using custom AMP HTML or sandboxed in an
iframe. This allows the webpage to load without waiting on scripts to be downloaded and processed. - All external resources, such as images, ads, and embedded tweets and Instagram images, loaded as HTML objects and must state their size so that the size can be set before the resource is downloaded.
- CSS styles must be declared in an inline stylesheet bound to a maximum size of 50 kb.
- Because scripts are loaded asynchronously, web font downloads, which are often very heavy, are triggered before any other resources.
- Animations cannot affect page layout.
- Resource downloads are prioritized based on position, with above-the-fold content being loaded first.
These tactics are enforced by a validation tool built into AMP. Pages that fail to validate may not be indexed by Google or used in the apps that support the format.
A Tale of Two Documents
If you are dealing with a simple website composed of an HTML file, a CSS file or two, and a couple of scripts, it may be possible to reformat the page into a single AMP-formatted document. However, in most cases, it won’t make sense to reformat every page of your site. Instead, what you’ll want to do is use a plugin to generate a second stripped-down AMP version of every article you publish.
You may be saying to yourself: “That will create duplicate content!” And if you had that thought, you’re absolutely right. That’s why it’s important to properly link the AMP version of your page to the standard version using link elements.
The standard version of your web page is linked to the AMP version with a link that looks like this:
<link rel="amphtml" href="http://www.example.com/amp_article_url">
The AMP version links back to the standard version using a similar element:
<link rel="canonical" href="http://www.example.com/full_article_url">
Google and other platforms will use the links to associate the two versions of the page and deliver the AMP version to mobile device users while delivering the standard version to desktop visitors. In addition, Google recognizes these tags and won’t penalize your website for publishing duplicate content when these tags are present.
There’s a Plugin for That…
If you’re feeling a little overwhelmed by the thought of having to learn AMP HTML and create specially-formatted documents, I have good news! There’s a plugin for that. Actually, there are a few different plugins already in the WordPress Plugin Directory that you should check out.
I’ve scoured the options available from WordPress.org and found four plugins you should know about if you’re planning on integrating AMP format with your WordPress website.
Accelerated Mobile Pages (AMP) Project
Install and activate the plugin and AMP-format articles will be automatically generated at http://example.com/article-permalink/amp/. Currently, this plugin only generates AMP articles for Posts. So if you have Page content that you want to display in AMP format, this plugin won’t do that.
I installed this plugin on my personal blog and it worked flawlessly. The AMP articles were attractively formatted, the expected
linkelements were added to the source code, and the articles validated successfully using the Chrome Developer Tools > Console.FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.
FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.
Custom AMP
The Custom AMP plugin allows you to customize the AMP article generated by the AMP plugin. After installing the AMP plugin, install this plugin to add a Custom AMP Panel to your WordPress Admin interface. Within the panel, you can add a website logo or featured image, choose whether or not to display comments, integrate with WooCommerce, show related posts, add a navigation menu, add Google Analytics tracking code, add custom CSS, and add additional html to the AMP article footer.
As you work with this plugin, be sure to validate the AMP pages generated by your website to ensure that the changes you make don’t cause the pages to fail validation.
Facebook Instant Articles & Google AMP Pages by PageFrog
The PageFrog plugin works hand-in-hand with the AMP Plugin to allow custom styling of AMP articles. PageFrog can also be integrated with the Facebook Instant Articles plugin to simultaneously control the appearance of posts on both mobile-optimized platforms.
The PageFrog plugin is a more full-featured option than the Custom AMP plugin. It includes integration with multiple analytics platforms, connects directly to Facebook Ads and Google AdSense, and automagically adds a featured image without breaking AMP validation.
If you want a bare-bones option, PageFrog isn’t what you’re looking for. But if you want more control over presentation and broader integration with analytics and advertising platforms, PageFrog offers a lot for free.
Which Plugin is the Right Plugin?
Right now, the only plugin the WordPress Plugin Directory that generates AMP articles is the AMP plugin. At a minimum, you’ll need to install and activate this plugin. If you want greater control over the appearance of your AMP articles, or to embed analytics tracking code, you’ll need to install at least one other plugin.
If you want a bare-bones plugin to perform minor design adjustments and add Google Analytics tracking code, the Custom AMP plugin is a simple option that is up to the task.
If you need more features than what the Custom AMP plugin provides, PageFrog is another great option to consider. PageFrog is particularly attractive if you want to integrate with an analytics program other than Google Analytics or if you want to embed Google Adsense ads in your AMP articles.
Validating AMP Pages
The final step in the AMP setup process is to validate your AMP pages. Pages that fail validation may not be indexed and displayed by Google or used by other supported platforms.
Thankfully, testing for validation is simple, although fixing validation errors may be a lot less so. Here’s how to test for AMP validation:
- Open a web browser and navigate to the AMP version of one of your articles.
- Open the JavaScript console. In Chrome you can find this by opening the contextual menu (right-click in the browser window on a PC or hold down Ctrl and click on a Mac), selecting Inspect and clicking on the Console tab. Similar steps will open the Console in other browsers.
- Add #development=1 to the end of your AMP URL, so that the URL looks like this: http://www.example.com/amp_article_url#development=1. Press Enter to load the page and run the AMP validator.
- Watch the console for messages.
The message you’re hoping to see is AMP validation successful. If the page fails to validate, you will need to review the messages in the console to determine what caused the failure and take the steps necessary to address the issue identified.
Wrapping Up
With leading platforms like Google, Twitter, Pinterest, Linked, and more already onboard, the AMP format is already a major player in the mobile optimization game. If you publish blog posts or news articles on a regular basis, generating AMP articles isn’t really optional any longer. You need to get started configuring your website to generate AMP articles that validate successfully. Thankfully, there are already a few plugins in the official WordPress Plugin Directory that make the process pretty straightforward.
Tags:
Jon Penland Jon manages operations for Kinsta, a managed WordPress hosting provider. He enjoys hiking and adventuring in northeast Georgia with his wife and kids when he isn't figuring out the ins and outs of supporting WordPress-powered businesses.