June 4, 2018
June 4, 2018
According to a study conducted by Google, over 50% of search queries worldwide are conducted via mobile devices. As such, ensuring that your WordPress site loads quickly (and looks great) for those searchers 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:
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!
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.
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:
On the other hand, here are the possible cons associated with using Google AMP:
If these drawbacks are enough to give you pause, you might consider investing in responsive web design for your site instead. However, if you’re looking for a quick and easy way to make 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.
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.
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. Then, install and activate it:
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 display, 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 use Glue for Yoast SEO & AMP to 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 may be a better fit for your needs.
In addition to providing a sleek, beginner-friendly interface for configuring your pages, this WordPress AMP plugin can integrate with many additional tools. These include WooCommerce (the leading e-commerce plugin for WordPress), Alexa metrics, 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 and download the plugin:
Next, navigate to the new AMP tab in your WordPress dashboard. You will see a drop-down 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 AMP for WP offers, including:
Be sure to click Save Changes for each of the above settings 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 with the way your AMP site looks, you can save your changes. You can also preview them by simply navigating to Appearance > AMP:
The free version of AMP for WP 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 with 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 Pro plans available for this plugin. These range from the Personal plan (catering to one site from $149 per year) to the Agency plan (catering to unlimited sites for $499 per year).
Once you’ve configured either AMP plugin for WordPress, 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:
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, and/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.
This tool provides a simple overlay of errors (red icons), as well as their causes. Plus, if you are running 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.
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 ensure 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!
September 20, 2019
Will Morris great information provide once again that for articles