How to create a mobile-friendly WordPress website with AMP

Based on the latest Google research, more than 50% of search queries worldwide come from mobile devices. So making sure your WordPress site loads fast (and looks good) for your search queries from mobile is a top priority. Google Accelerated Mobile Pages (AMP) will make this much easier for you.

In this article, we will explain how to install WordPress AMP using 2 methods:

1. Use the AMP for WordPress plugin.
2. Use the AMP for WP plugin – Accelerated Mobile Pages.

We will also explain what WordPress AMP is, and how to test it (validate) after the installation is complete. Let’s get started!

What is AMP (and how does it help)?

Google Accelerated Mobile Pages (AMP) is an open-source library to help you create fast, smooth web pages, and streamline your version of your website down to mobile relevance. AMP is also very user-friendly, built on older platforms and frameworks. Furthermore, it is fully compatible with WordPress.

Read More: 22 Must-Have WordPress Plugins for Business Websites in 2020

In short, Google AMP allows you to make a copy of your site using AMP HTML. This removes some of the components that make the website load slowly (JavaScript, 3rd party scripts, etc.). Google will then streamline the site even further to make the load even faster. The results will be as follows:

AMP has many benefits, but it also has many disadvantages. To see through the problem, we will cover both sides of the AMP. First, the advantages of AMP WordPress are:

• Promote Search Engine Optimization (SEO): The easiest advantage is AMP WordPress will improve the speed. Since speed is an important factor in ranking your site in Search Engine Results Pages (SERPs), it will help boost your site’s ranking even further. AMP will also help the site’s website show up on Google News, prioritized above the mobile search section (this will also increase SEO).
• Increase user experience: Statistics show that nearly 33% of all sales fail because the website is not optimized for mobile. Another worrying metric is that 57% of internet users say they will not recommend any business with a poor mobile interface. AMP WordPress will create beautiful, user-friendly mobile websites to avoid bad reputations that directly affect revenue.
• Increase server speed (reduce server load): Google AMP also takes advantage of some of the main optimization features of Google itself. It reduces bandwidth usage by up to 50% (without sacrificing rendering quality) and increases server-side rendering. By doing this optimization, AMP will help you solve server performance problems and speed up your site overall.

On the other hand, there are some disadvantages to using AMP WordPress:

• Limit Cascading Style Sheets (CSS) and JavaScript: Although AMP gives you a lot of speed, it’s because of the trade-off with branding ingredients. AMP removes high-resolution images, limits animations, and other animators like CSS and JavaScript.
• Only show cached pages: AMP’s speed comes in part from the fact that it allows Google to render the cached versions of web pages. Therefore, users may not be seeing the latest version of your website.
• Advertising revenue is limited: Even though Google AMP does support ads, implementing an ad on Google AMP can be quite complicated. It also limits ads from other 3rd party ad platforms.

If these disadvantages make you hesitate, you should consider using responsive web design. However, if you want to find a quick solution to having the perfect mobile website, Google AMP is still worth looking at.

Read More: 10 Best WordPress Product Review Plugins to Boost Online Revenue

In the next section, we will go through 2 methods to help you install AMP WordPress, using some Accelerated Mobile Pages plugin in WordPress.

How to install AMP WordPress using  AMP WordPress plugins

To install AMP for your WordPress site, you need to install the AMP WordPress plugin. But before making any changes in the methods below, please back up your WordPress site first. Once done, you should be able to move on.

Use the AMP for WordPress plugin

The AMP for WordPress plugin is a great tool for you to quickly and simply set up AMP for your WordPress site. Although the default version has a fairly simple option to customize AMP, you can use additional plugins to do this. We will guide you later to do so. Now, let’s install this plugin.

First, go to Plugins ›Add New in your WordPress dashboard. Enter ‘AMP for WordPress‘ in the search bar and find the correct AMP plugin for WordPress plugin. Now install and activate it:

Next, go to the Appearance> AMP tab on your admin page. This will help you customize your AMP page. Then click on the Design tab:

Here, you can customize how your AMP WordPress site will be displayed, and preview the changes. You can customize the site’s text, link, background color. Furthermore, you can also choose whether you want to use a light or dark color tone (white or black) for your site. When you’re done customizing, just hit the Publish button at the top to apply your changes.

Read More: List of Top Web Hosting provider for your website in 2020

You can also choose which page, post, or full page, AMP WordPress will be applied. To do so, just go back to your WordPress dashboard and go to AMP> General:

Once you’re in, check the box under Post Type Support for the option you want to edit, and click the Save Changes button.

As you can see, there aren’t many options here. However, there are many other plugins for you to increase your customizability. For example, Glue for Yoast SEO & AMP to integrate the popular Yoast SEO plugin into your AMP settings for WordPress.

Go to Plugins ›Add New, then find, install, and activate the Yoast SEO plugin:

Then do the same with Glue for Yoast SEO & AMP plugin. Then move on to SEO ›AMP to choose an option for the post or what kind of multimedia content needs to support AMP:

Then click the Save changes button. You can also further configure skins using the Design tab. Here, you can customize the icons for your AMP WordPress site, customize the color scheme, and add custom CSS:

Once done, don’t forget to save your changes.

AMP for WordPress is a great plugin for you to create AMP sites. However, if you want more control over the look and feel of your AMP WordPress site and have a lot of functionality, the next plugin we cover – Accelerated Mobile Pages WordPress will get you covered.

How to Validate Your AMP WordPress Site

After you have configured the AMP plugin for WordPress, you will also need to validate (validate) the AMP WordPress, to make sure it is accessible and linked from supported platforms. Validation also helps you check for AMP errors if any to handle it.

The fastest and easiest way to test AMP (AMP validation) is to use the browser developer tools. You open the AMP page in your browser (in this example, we use Google Chrome). You will need to add this line after the end of your URL:

# development = 1

Then, open up the developer tools console. For Google Chrome, this is the Chrome DevTools console. If an error pops up, you will see it highlighted in red, next to analyzing which problem caused the problem.

Epilogue

Only a few seconds slower loading can cause you to drop your search engine rankings (and conversion rates). Fortunately, with Google AMP, it can ensure your site loads extremely fast on mobile devices. Moreover, the configuration and customization of AMP WordPress are also simple and clear, use correctly it