AMP WordPress – What It Is and How to Set It Right

According to a study conducted by Google, more than 50% of searches carried out in the world are made by mobile devices. That’s why your priority should be to make your WordPress site load quickly (and look good) these devices. Luckily Google Accelerated Mobile Pages (AMP) makes this task much easier. So you need to know what is AMP WordPress and how to properly configure it on your WordPress site.

In this article, we will explain what is AMP WordPress and how to set up in two ways:

1. Using the plugin AMP for WordPress .
2. Through the plugin AMP is WP – Accelerated Mobile Pages .

Also we explain what is AMP WordPress, and how to perform validation after the setup process is completed. So come on!

What is WordPress AMP (And How You Can Benefit Your Site)

Google Accelerated Mobile Pages (AMP) is an open source library that helps you create quick mobile versions of smooth sliding, and clean look to your website. The AMP is extremely user friendly and works with platforms and frameworks already exist. Moreover, it is fully compatible with WordPress.

In a nutshell, Google AMP works by allowing you to create a copy of your site using the HTML AMP . This process eliminates most of the elements that cause the slow loading of your website (JavaScript, third-party scripts, etc). Google then does the reduction of your site, increasing the loading speed. The result will look something like this: Among the advantages of knowing and knowing what is AMP WordPress, the many benefits are that you can find, despite having some possible disadvantages. We will explore both sides. First, let’s start with the pros:

• SEO improvements. The most obvious benefit of Google AMP is the increased speed. Once the speed of the page is one of the key factors when it comes to ranking on Page Search Engine Results Pages (SERPs), this can help make your site more visible. Google AMP will also ensure that the pages of your site from appearing in Google Carousel.
• An optimized user experience. It is estimated that 33% of potential sales are canceled when a website is not optimized for mobile devices. An even more disturbing study claims that 57% of users do not recommend a site with a bad design for phones and tablets. Google AMP makes it easy to create a responsive website for mobile devices helping to avoid these problems.
• Server performance improvement. The Google AMP benefits from some of Google optimization of key tools. Reduces the use of bandwidth for images by 50% (without affecting image quality) and improves performance by the server. By reducing the load on the server, the AMP helps improve the performance of the site ..

On the other hand, these are some of the possible cons of using Google AMP:

• Limitations on CSS and JavaScript. Even if Google AMP makes the loading of your site much faster, it comes with a price. The AMP will remove high-definition graphics, elaborate animations, and other elements using CSS and JavaScript.
• Only cache pages will be displayed. The speed of Google AMP can be partially attributed to the fact that Google shows only cached versions of your website. For this reason, your users will not always see the latest version of its content.
• Restrictions on advertisements. Even if Google AMP has support advertisements, the implementation process is complicated. It also has integration with external limitations advertising platforms.

If these drawbacks were enough to make you rethink using AMP, consider investing in a responsive site design. But if you’re looking for a quick and easy way to make functional site on mobile devices, Google AMP may be ideal for you.

In the next section we will teach two ways to set the AMP WordPress, with the help of a few plugins.

Configuring the AMP WordPress Plugins 2

To configure the AMP on your site you need a WordPress plugin AMP . Before proceeding with the installation we recommend that you have a backup of your site. With the prepared backup, you are ready to start.

Option 1: Using the AMP Plugin for WordPress

The plugin AMP for WordPress is an excellent tool to configure the AMP in your WordPress quickly and easily. Even the standard version with few tools for customizing their AMP settings, your options can be extended with the help of additional plugins. We will show it later. For now, let’s see how to configure the plugin itself.

First, go to Plugins> Add new in your WordPress dashboard. Search for ‘ AMP for WordPress ‘. Then, install and activate :

Then, navigate to the tab Appearance > AMP on your dashboard. Then to the AMP customization page will be displayed. Select the tab Design :

Here you can customize how the AMP will show your WordPress site and view any changes before putting your site up. You can adjust the texts, links and background color. Plus, you can select whether a light or dark theme for your site. When you are satisfied with your changes, click Publish on the top of the screen.

You can also set whether you want posts, pages, or all own templates are shown in AMP WordPress. To do this, return to the WordPress dashboard and access AMP > General :

Select the options you want to include in AMP WordPress, then click Save Changes .

You may have noticed that there are not many customization options here. Fortunately, there are several plugins that can expand your options. For example, you can use the Glue for Yoast SEO & AMP to integrate with the famous plugin Yoast SEO on your AMP configuration.

Go to Plugins > Add New , then install and activate Yoast SEO plugin:

After that, do the same thing with the plugin Glue for Yoast SEO & AMP. Then navigate to SEO > AMP on your dashboard. Here you can enable support posts and media types to AMP.

Then click Save changes . You can also make other settings tab Design . On this page you can set an icon for your AMP WordPress site, adjust your color theme, and even add custom CSS:

Again, do not forget to save your changes to finish the settings for your site.

AMP for WordPress is a great plugin if you want to add basic features of AMP to your site. But if you want more control on the look of your WordPress AMP (and the potential to further expand its functionality) the next plugin further meet your needs.

Option 2: Install Plugin AMP is WP – Accelerated Mobile Pages

Besides having a friendly and refined interface, WooCommerce (the largest e-commerce WordPress plugin), OneSignal button push notifications , and more.

To use this WordPress Plugin AMP , you must first access Plugins > Add new in your dashboard. Search for ‘ AMP for WP ‘, and install the plugin:

Now navigate to the AMP tab in your WordPress dashboard. You’ll see a menu with sections Settings , Design , Extensions , etc. Let’s take a look at the option Settings :

A good idea is to start with the section Getting Started . It will help you in the initial setup of your WordPress AMP. You can then navigate between the different choices that AMP is WP offers, including:

• SEO: Includes meta description configuration, integration with SEO plugins, etc.
• Performance: There is a single function to enable and disable the minification files. Minification can improve your website’s speed.
• Analytics: You can configure the integration with Google Tag Manager , as well as analytics options.
• Comments: Allows you to configure whether or not the comments of WordPress, Disqus and / or Facebook to your WordPress AMP.
• Advanced settings: You can insert custom HTML for headers and footers, configure redirection for mobile, and enable or disable retinal images .

Be sure to click   Save Changes for each of the above settings you have changed. Then, select the tab Design :

Basically, here is where you can customize the look of your WordPress site AMP. For this, you can choose one of several themes dedicated AMP listed in the menu Theme Selector .

After choosing the theme, you can customize your look. You’ll find color options and typography (listed on the tab Global ), display settings header and footer, sidebar options for the main page, and more. In the section Social you can select which social buttons you want to show on your AMP WordPress site.

The free version of AMP for WordPress has a wide variety of tools. However, you can improve the look and functionality of your site with paid significantly extensions. There are extensions to implement assessments star (which are perfect for real estate products or profiles), integrate with AMP WooCommerce Pro , use custom types of posts, and more:

The AMP Premium themes are also available for purchase. You can view them in Design > Themes on your dashboard. There are options that are ideal especially for specific sites, such as news sites, magazines, and so on. Moreover, several themes for different purposes are also available:

If you want to enjoy even more advanced tools, there are a variety of Pro plans available for this plugin. These plans range from Personal plan (for a site from $ 149 per year) to the Agency plan (for unlimited sites for $ 499 per year).

How to Validate Your Site AMP WordPress

After setting one of these AMP plugins for WordPress, there is one more step to be made. You need to validate your AMP WordPress to ensure that it can be accessed by the supported platforms . Validation is also a useful way to get a reading AMP errors for troubleshooting purposes.

A quick and easy method of performing AMP validation involves the use of developer tools to your browser. For this, you need to open an AMP page in your preferred browser (in this example we will use Google Chrome). Then you need to add the following at the end of the URL:

Development # 1 =

Once you have done this, open the console tools for browser developers. Google Chrome is Chrome DevTools console . If an error is displayed will be highlighted in red, along with an analysis of the cause of the error ..

Typically, validation errors are caused by invalid prefixes, incorrect formatting and code entries, and / or unauthorized tags. In most cases, an option for the resolution of the error will appear in the report. However, Google AMP project also lists methods to correct common validation errors if an alternative auto repair is not displayed.

Another effective validation method is the use of AMP Validator extension for Google Chrome and Opera :

This tool provides a simple listing errors (red icons) as well as their causes. In addition, if you are testing the AMP validator on a page other than AMP, a blue icon appears extension linking you to AMP version of this page. This tool provides a useful way to access theme elements of your site that may be preventing the AMP WordPress properly appear.

Conclusion

Even a few seconds longer load times can significantly decrease the ranking of your website on search engines (and your conversion rates). Fortunately, as we have seen, using Google AMP can help you ensure that your website load at lightning speed on mobile devices. Plus, configure and customize AMP for WordPress is simple and straightforward, provided you use the correct plugins.

Got questions about how to configure any of the AMP WordPress plugins? Let us know by commenting in the section below!