According to a study, over 50% of Google search queries worldwide are conducted via mobile devices. As such, ensuring that your WordPress site both loads quickly and looks great at the same time, those types of searches should be a priority. Fortunately, the Google Accelerated Mobile Pages (AMP) initiative makes this task much easier.
In this article, we’ll explain how to set up WordPress AMP in two ways:
- Using the official AMP for WordPress plugin.
- Via the AMP for WP – Accelerated Mobile Pages plugin.
We’ll also explain what WordPress AMP actually is, and discuss how to validate it after the setup process is complete. Let’s dive in!
What WordPress AMP Is (And How It Can Benefit Your Site)
Google Accelerated Mobile Pages (AMP) is an open-source library that helps you create fast, smooth-scrolling, and stripped-down versions of your web pages that look great on mobile devices. AMP is extremely user-friendly, building on existing platforms and frameworks. Plus, it’s fully compatible with WordPress.
In a nutshell, Google AMP Project works by letting you create a duplicate of your site using AMP HTML. This process strips away most of the elements that cause your WordPress site to load slower (JavaScript, third-party scripts, etc). Google then further trims down and flattens your site, for even quicker loading times.
Google AMP provides many benefits, although it also has some potential drawbacks. Let’s explore both sides of that coin. First up, the pros include:
- A boost to Search Engine Optimization (SEO) – the most obvious benefit Google AMP provides is boosting speed. Since page speed is a critical factor when it comes to your page’s rankings in Search Engine Results Pages (SERPs), this can help make sure your site more visible. Google AMP will also ensure that your site’s pages show up in the Google News carousel, which is prioritized above the above-the-fold placement on mobile searches, thus further boosting your SEO.
- An enhanced user experience – it’s estimated that for every 0.1 second improvement in mobile page loading speed conversions increase by 8%. An even more concerning study found that 57% of internet users said they wouldn’t recommend a business with a poorly-designed mobile website. Google AMP makes it easy to create user-friendly mobile web pages, to help you avoid these pitfalls.
- Increased server performance – Google AMP benefits from some of Google’s key optimization features. It reduces the bandwidth usage for images (without affecting image quality) and increases server-side rendering. By reducing the load on your server, AMP helps to improve your site’s performance.
On the other hand, here are the possible cons associated with using Google AMP:
- Cascading Style Sheets (CSS) and JavaScript limitations – although Google AMP enables you to achieve lightning-fast loading times, this can come at the expense of branding elements. AMP will remove particularly high-definition graphics, elaborate animations, and other flashy elements that use CSS and JavaScript.
- Only cached pages are displayed – Google AMP’s high speeds can be partially attributed to the fact that it enables Google to display cached versions of your web pages. For this reason, your users may not always have access to the latest version of your content.
- Ad revenue capabilities are restricted – although Google AMP does support ads, the process for implementing them is fairly complicated. It also has limited integration potential with external ad platforms.
If these drawbacks are enough to give you pause, you might consider investing in a responsive web design for your site instead. However, if you’re looking for a quick and easy way to make sure your web pages look and function great on mobile devices, Google AMP is still well worth considering.
In the next section, we’ll cover two methods to set up WordPress AMP, with the help of a few handy Accelerated Mobile Pages WordPress plugins.
How to Set Up WordPress AMP Using Plugins
To set up AMP for your site, you’ll need a WordPress AMP plugin. Before proceeding with either of the following methods, we recommend that you back up your WordPress site. Once you’ve done that, you’re all set to begin.
1. Use the AMP for WordPress Plugin
The AMP for WordPress plugin is an excellent tool if you want to set up AMP for your WordPress site quickly and easily. Although the default version has a minimal amount of features for customizing your AMP setup, your options can be extended with the help of additional plugins. We’ll cover that process later on. For now, let’s run through how to set up the plugin itself.
First, navigate to Plugins -› Add New in your WordPress dashboard. Enter “AMP for WordPress” in the search bar, and look for the right AMP plugin for WordPress – install and activate the plugin.
Next, navigate to the new Appearance -> AMP tab in your dashboard. This will bring up the AMP customizer page. Once there, select the Design tab:
Here, you can customize the way your WordPress AMP site will be displayed, and preview any changes before you make your site live. You can adjust your site’s text, link, and background color. Plus, you can select whether or not you want a light or dark (i.e. black or white) color scheme for your site. Once you’re happy with your changes, simply hit Publish at the top of the screen.
You can also set whether you want posts, pages, or both to display on WordPress AMP. To do this, simply return to the WordPress dashboard and go to AMP –> General:
Once there, check the boxes under Post Type Support for the options you wish to include in your WordPress AMP, and click on Save Changes.
You’ll probably notice that there aren’t a lot of customization options here. Fortunately, there are several plugins you can use to extend your choices. For example, you can integrate the popular Yoast SEO plugin into your AMP setup.
Navigate to Plugins –› Add New, then find, install, and activate the Yoast SEO plugin.
After that, do the same for the Glue for Yoast SEO & AMP plugin. Next, navigate to SEO –› AMP in your dashboard. From there, you can select whether you want to enable posts and media types to have AMP support:
Then, hit the Save Changes button. You can also configure additional settings in the Design tab. There, you can set an icon for your WordPress AMP site, adjust your color scheme, and even add custom CSS:
Once again, don’t forget to save your changes when you have finished configuring your site.
AMP for WordPress is an excellent plugin if you want to add basic AMP functionality to your site. However, if you want more control over your WordPress AMP site’s appearance and the potential to extend its functionality even further, our next Accelerated Mobile Pages WordPress plugin might be a better fit for you.
2. Install the AMP for WP – Accelerated Mobile Pages Plugin
In addition to providing a sleek, beginner-friendly interface for configuring your pages, the AMP for WP – Accelerated Mobile Pages plugin can be integrated with many additional tools. These include WooCommerce, the leading e-commerce plugin for WordPress, OneSignal push-button notifications, and more.
To use this AMP plugin for WordPress, you’ll first want to navigate to Plugins -> Add New in your dashboard. Search for “AMP for WP” and install the plugin:
Next, navigate to the new AMP tab in your WordPress dashboard and choose your preferred panel view option. If you’ve selected Advance, you will see a menu with sections for Settings, Design, Extensions, and so on. Let’s take a closer look at the Settings option:
You’ll want to start by going through the handy Getting Started guide linked on this page. It will help you optimally configure your WordPress AMP setup. After that, you can run through the various options that the plugin can offer, including:
- SEO – this includes meta description settings, integration with SEO plugins, etc.
- Performance – there is a single setting for toggling file minification on and off. Minification can further improve the speed of your site.
- Analytics – here you can integrate WordPress with Google Tag Manager, as well as analytics options.
- Comments – this lets you configure whether or not you want to include WordPress, Disqus, and/or Facebook comments in your WordPress AMP.
- Advanced Settings – you can enter custom HTML for headers and footers, set up mobile redirection, and toggle retina images on and off.
Be sure to click Save Changes for each setting once you have configured them. After that, select the Design tab:
Essentially, this is where you can customize the look and feel of your WordPress AMP site. To do this, you can choose a dedicated AMP theme out of several listed in the Theme Selector drop-down menu.
After picking a theme, you can customize the way it looks. You’ll find design settings for color schemes and typography, which are listed in the Global tab, header and footer display choices, homepage sidebar options, and more. In the Social section, you can also select what social media buttons you wish to display on your WordPress AMP site.
Once you’re happy with the way your AMP website looks, you can save your changes. You can also preview these changes by simply navigating to Appearance –> AMP.
The free version of this plugin contains a wide variety of features. However, you can significantly improve the appearance and functionality of your AMP site with premium extensions. There are extensions for implementing star ratings, which are perfect for products or real-estate profiles; integrating AMP WooCommerce Pro, using custom post types, and more:
Premium AMP themes are also available for purchase. You can view them by returning to Design -> Themes in your dashboard. There are options that cater specifically to particular website types, such as news sites, magazines, and so on. Plus, there are a few outstanding multipurpose themes.
If you want to enjoy even more advanced features, there are a variety of premium plans available for the plugin – Accelerated Mobile Pages plugin. These range from the Personal plan (catering to one site from $149/year) to the Agency plan (catering to unlimited sites for $499/year).
How to Validate Your WordPress AMP Site
Once you’ve configured your AMP plugin of choice, there’s one more step to take. You’ll need to validate your WordPress AMP, to ensure that it can be accessed and linked to by supported platforms. Validation is also a handy way to get a readout of AMP errors for troubleshooting purposes.
One quick and easy method of performing AMP validation involves using your browser’s developer tools. To do this, you’ll need to open up an AMP page in your preferred browser. In this example, we’ll use Google Chrome. You’ll then need to add the following to the end of the page’s URL:
#development=1
Once you’ve done that, open up your browser’s developer tools console. For Google Chrome, this is the Chrome DevTools console. If any errors are present, they will be highlighted in red, along with an analysis of what caused the error.
Typically, validation errors are caused by invalid prefixes, incorrect formatting and code entries or disallowed tags. In most cases, an option to fix the error will be present in the readout. However, the Google AMP Project also lists methods for fixing common validation errors if no auto-fix option is present.
Another effective AMP validation method is to use the AMP Validator extension for Google Chrome and Opera.
This tool provides a simple overlay of errors, as well as their causes. Plus, if you are running an AMP validator on a non-AMP page, a blue extension icon will appear linking you to the AMP version of that page. This feature presents a useful way of assessing elements of your site’s theme that may keep WordPress AMP from displaying properly.
Conclusion
Even a few extra seconds of loading time could significantly reduce your site’s search engine rankings and your conversion rates. Fortunately, as we have seen, using Google AMP can help you make sure that your site’s pages load at lightning speed on mobile devices. What’s more, configuring and customizing AMP for WordPress is simple and straightforward, as long as you use the right Accelerated Mobile Pages WordPress plugin.
Do you have any questions about how to set up either WordPress AMP plugin? Let us know in the comments section below.
