How to properly configure WordPress AMP?

According to research conducted by Google, more than 50% of search requests around the world are made from mobile phones. In this regard, you should make sure that your WordPress site loads quickly and looks decent for this category of search users. Fortunately, the Google Accelerated Mobile Pages (AMP) project makes this task easier to accomplish.

In this guide, we’ll show you how to install WordPress AMP in two ways:

• Using the AMP Plugin for WordPress.
• Via AMP Plugin for WP – Accelerated Mobile Pages.

We will also explain what WordPress AMP is and discuss how to verify that they work correctly after installation. Let’s start!

Content

• What is WordPress AMP and how is it useful for your site?
• How to install WordPress AMP using two plugins?
• How to Check Correctness of Your WordPress AMP Website?
• Conclusion

What is WordPress AMP and how is it useful for your site?

Google Accelerated Mobile Pages (AMP) is an open-source library that helps you create fast, smoothly scrollable and simplified versions of your web pages that look great on mobile devices. AMP is very friendly, built on existing platforms and frameworks. In addition, it is fully compatible with WordPress.

In short, Google AMP works in a way that allows you to duplicate your site using AMP HTML. This process eliminates most of the elements that can lead to the slow loading of your site (JavaScript, third-party scripts, etc.). Then Google processes and “smooths” your site to load it even faster. After that, the results will look something like this:

Google AMP offers many advantages, although it has some disadvantages. Let’s explore both sides of the coin. Let’s start with the benefits:

• Improving Search Engine Optimization (SEO). The most obvious advantage of Google AMP is the increase in speed. Since speed is a critical factor when it comes to ranking your pages in search engine results (SERPs), this can help make your site more visible. Google AMP guarantees that your site’s pages will be displayed in the Google News carousel, in the priority location at the top in the scroll-free area of ​​search results on mobile (further enhances SEO position).
• Improved user interface. It was estimated that 33% of all potential sales are lost if the website is not optimized for mobile devices. Even more alarming research results show that 57% of Internet users will not recommend a business with a site that is not adapted for mobile devices. Google AMP makes this optimization easy and affordable and thus avoids this danger.
• Improved server performance. Google AMP benefits from some of Google’s key optimization features. It reduces traffic from images to 50% without loss of quality and reduces the load on the server. By reducing server load, AMP helps improve the performance of your site.

Google AMP, on the other hand, has its disadvantages:

• Limitations of Cascading Style Sheets (CSS) and JavaScript. While Google AMP allows you to achieve lightning fast loading times, it may cost you some elements of the site. AMP will remove very high quality graphics, complex animations, and other vibrant elements that use CSS and JavaScript.
• Only pages from the cache are displayed. The high speed of Google AMP is also a consequence of the fact that Google includes displaying versions of your pages from the cache. For this reason, your users may not always be able to access the latest versions of content.
• Limited access to advertisements. Despite the fact that Google AMP supports advertising, the process of describing it is very complicated. It also has limited integration with external advertising platforms.

If these disadvantages are enough to take thought, you can turn your attention to responsive web design for your site. Although, if you are looking for a quick and easy solution to make your pages functional for mobile devices, Google AMP remains the best option.

In the next section, we describe two methods for installing WordPress AMP with a few handy plugins for speeding up mobile pages in WordPress.

How to install WordPress AMP using two plugins?

To install AMP on your site, you need the WordPress AMP plugin. Before proceeding with this or the following method, we recommend that you back up your WordPress site. After that, everything is ready for you to start.

Option 1: Using the AMP Plugin for WordPress

The AMP plugin for WordPress is a great tool if you want to install AMP for your WordPress site quickly and easily. Although the default version contains a minimum number of functions for setting up AMP, these options can be expanded with additional plugins. Further we will consider this process. Now let’s move on to how to install the plugin itself.

First, go to Plugins ›Add new in your WordPress admin console. Type “AMP for WordPress” in the search bar and find the AMP plugin for WordPress. Then install and activate it:

Next, go to Appearance> AMP. This will open the AMP settings page. Here, select the Design tab:

On this page, you can customize the look of your WordPress AMP site to your preference and preview any changes before posting them. You can customize the text of your site, links and background color. Plus, we can choose which color scheme you want to use – light or dark (i.e. black or white) for your site. When your settings are completely fine, just click Publish at the top of the page.

You can also set where posts, pages, or both will be located in WordPress AMP. To do this, just go back to your WordPress console and go to AMP> General:

On this page, check the box next to the Post Type Support setting for the posts you would like to see on the WordPress AMP website and click on Save Changes.

You probably noticed that there are not so many settings. Fortunately, there are several plugins that you can use to expand your selection. For example, you can use Glue for Yoast SEO & AMP to integrate with the Yoast SEO plugin with your AMP installation.

Go to Plugins ›Add new, find, install and activate Yoast SEO:

After that, do the same with the Glue for Yoast SEO & AMP plugin. Then go to SEO ›AMP in the admin console. Here you can choose whether you want to include recordings and media data types in support of AMP:

After that, click the Save changes button. Additional settings can be found on the Design tab. Here you can set the icon for the WordPress AMP site, choose a color scheme and even add your own CSS:

And again, do not forget to save the changes when you finish setting up your site.

The AMP for WordPress plugin is great if you want to add basic AMP functionality to your site. However, if you want more customization of the look of your WordPress AMP site (and the possibility to expand it in the future), our next plugin for accelerated mobile WordPress pages may be more suitable for your case.

Option 2: Installing AMP Plugin for WP – Accelerated Mobile Pages

In addition to providing an attractive and easy-to-start page setup interface, this WordPress AMP plugin can integrate with many other tools. Among them: WooCommerce (the leading e-commerce plugin in WordPress), Alexa metrics, OneSignal push button notifications and others.

To use this AMP plugin for WordPress, you first need to go to Plugins> Add New in your console. Find “AMP for WP”, install and activate the plugin:

Next, go to the new AMP tab in the WordPress admin panel. You will see menu items with sections Settings, Design, Extensions and others. Let’s take a closer look at the settings in Settings:

Most likely you will want to start with a section of the manual with links Getting Started on this page. This will help you set up your WordPress AMP in the best possible way. After that, you can run various AMP options for WP, including:

• SEO: This includes meta description settings, integration with SEO plugins, and more.
• Performance: This is a single setting that turns file minimization on and off. Minimization can improve the speed of your site.
• Analytics: Here you can configure integration with Google Tag Manager, as well as analytics settings.
• Comments: This allows you to configure whether you want to include WordPress, Disqus or Facebook comments in your WordPress AMP.
• Advanced Settings: You can enter your HTML code for the header or footer, set up mobile redirection and enable or disable retina images.

Click on Save Changes for each setting above once you are done with it. After that, select the Design tab:

Actually here you can control the look of your WordPress AMP site. To do this, select a specific AMP theme from the list on the Theme Selector menu.

After selecting a theme, you can customize its appearance. You will find design settings for the color scheme and font (Global tab), the choice of displaying the title and footer, the slider on the main page and much more. In the Social section, you can also select which social site buttons you want to display on your WordPress AMP site.

If you are happy with the look of your AMP site, save any changes. You can also preview them first if you go to Appearance> AMP:

The free version of AMP for WP contains a wide range of features. However, you can significantly improve the look and feel of your paid AMP site. There are extensions for rating description (it will be useful for goods or real estate profiles), integration with AMP WooCommerce Pro, use of custom post types and more:

AMP paid themes are also available after payment. You can see them in the section Design> Themes in your admin console. There are special settings that are suitable for certain types of sites, such as news sites, magazines, and so on. Plus, there are some great multipurpose topics:

If you want to try even more additional features, then for you there are a number of Pro plans available for this plugin. The range is from the Personal plan (servicing one site for 149$ per year) to the Agency plan (servicing an unlimited number of sites for 499$ per year).

How to Check Correctness of Your WordPress AMP Website?

When you set up any of the AMP plugins for WordPress, you come to one more step. You need to check WordPress AMP to make sure it is accessible and linked on supported platforms. Verification is also a convenient way to look at AMP errors in order to resolve them.

One quick and easy way to test AMP is to use the developer tool in the browser. To do this, you need to open the AMP page in your browser (in our example, we use Google Chrome). Next you need to add the following at the end of the URL:

#development=1

Once you do this, open the developer tool console in a browser. For Google Chrome, this is the Chrome DevTools console. If errors are found, they will be highlighted in red, along with an analysis of their causes.

Typically, validation errors are caused by incorrect prefixes, incorrect code formatting, and / or unsupported tags. In most cases, error correction settings will be present. In addition, the Google AMP project also describes a method for resolving common verification errors if there is no auto-correction.

Another effective way to test AMP is to use the AMP Validator extension for Google Chrome and Opera:

This tool provides a simple definition of errors (red icons), as well as their causes. In addition, if you run AMP verification on your non-AMP page, the blue extension icon will show you a redirect link to the version of the AMP page. This setting provides a convenient way to evaluate the theme elements of your site that may interfere with the proper display of your WordPress AMP.

Conclusion

Even a few extra seconds of loading time can significantly lower the ranking of your site in search engines (and your conversion rate). Fortunately, as we have already seen, using Google AMP can help you make sure that the pages on your site load lightning fast on mobile devices. What’s more, configuring and fine tuning AMP for WordPress is easy and straightforward if you use the right WordPress plugin for accelerated mobile pages.

Do you still have questions about how to install any WordPress AMP plugin? Let us know in the comments!