Setting Up Google AMP on Your WordPress Site

What Is Google AMP?

Website speed and optimization are two important concepts in the world of web development. Trimming the fat off your site’s code, creating light and fast-loading pages, and maximizing optimization techniques can often yield better search results for your site. Special consideration may be needed for your mobile audiences, however. 

That’s where the Accelerated Mobile Pages (AMP) project comes in. This is a development framework created by Google to enhance website performance for mobile users. AMP pages are specially designed so that Google search users can quickly load pages without using extraneous data.

In this post, we’ll walk you through the benefits of using AMP for WordPress, and discuss how to apply it effectively. Finally, we’ll look over some themes and plugins that can help you get onboard with the project. Let’s get amped!

Benefits of Google AMP

While the official Google stance is that AMP pages do not factor into search rankings, its side effects suggest that an AMP page can indirectly have a positive impact on Search Engine Optimization (SEO).

When implemented correctly, AMP significantly speeds up a web page without losing (much of) its functionality. This in turn produces a lower bounce rate and higher site ‘stickiness’, meaning that users should spend more time on your website.

So it’s important to remember that AMP does not directly count as an SEO factor. However, it can influence factors that do make a difference in search engine rankings, such as:

  • More organic traffic. A 2019 study of AMP showed that 77 percent of websites saw improved organic traffic on mobile devices. This means that if your site performs well already, but you could use more traffic via mobile channels, AMP can help. This is especially true for eCommerce websites. AMP increases your page loading times on mobile devices, getting you in front of customers faster. 
  • Increased site speed. By using the Google AMP Cache functionality, Google can place important pages physically closer to the user. This means they can be served up quicker. Additionally, the Google AMP Cache can lighten the heavy load images can add to a website. This is accomplished through a series of optimization techniques, including converting images to the WebP format
  • Lower bounce rates. Since page loading times have a direct impact on bounce rates, it’s important to keep to the 2-second benchmark goal. AMP can help you achieve that, by limiting elements like Cascading Style Sheet (CSS) sizes and slow JavaScript (while also optimizing images).
  • Improved site stickiness. It follows that since AMP can improve your website’s loading time on mobile devices, your site’s users are more likely to stick around for longer. Bounce rates and ‘stickiness’ go hand-in-hand. 
  • A better digital experience. Building with AMP can improve the overall digital experience you offer to your customers and other visitors. In fact, it works so well that we’ve integrated AMP functionality directly into the core of our Genesis 3.0 theme framework for WordPress. 

However, if you’re not using Genesis, there are a few plugins that can help you easily get started with AMP on your website. Later in this post, we’ll take a look at how AMP interacts with WordPress themes and plugins.

 Drawbacks of Google AMP

If AMP seems like a solution that’s too good to be true, you’re not entirely wrong. While its benefits are many, there are some drawbacks to be aware of before you get started. 

Since AMP’s main goal is to create a mobile experience that’s light and lean, it can also limit your options for adding customizations with JavaScript and CSS. For example, adding Share buttons and dynamic scripts can become problematic. Later we’ll introduce AMP, the official plugin for WordPress that can add these functionalities without detracting from the framework’s benefits. 

Another hurdle to overcome is the limited advertising opportunities you get with AMP usage. This is another aspect of the framework that plugins can help to improve. However, if you decide that AMP is just not for you, you’ll need to plan ahead for disabling it. This takes a bit more work than simply deactivating the plugin.

For example, if you’ve used AMP for a period of time, it’s likely that Google has indexed the AMP pages. This means you’ll need to create redirects to your non-AMP posts, so your users don’t run into pages that are missing content. 

How to Set Up AMP on Your WordPress Site

Now that you’re up to speed on AMP and how it works, let’s take a look at the steps needed to add it to your WordPress website. 

Step 1: Install and Activate an AMP Plugin

To demonstrate how to set your site up with AMP, we’re going to use the official AMP plugin for WordPress: 

Automattic’s official plugin creates dedicated templates for your WordPress posts. This solution also offers a few choices for tweaking your template using built-in options, and is ideal for simple content publishing. 

Your first step will be to install and activate the plugin in your dashboard. It’s worth noting, for those of you with a development team, that the AMP plugin also enables you to completely customize your AMP templates. Additionally, while previous versions of the plugin did not support WordPress pages, you are now able to optimize those as well. 

Step 2: Customize Your AMP Settings

In your WordPress dashboard, you’ll now be able to navigate to AMP > General and find a user-friendly page of settings that you can configure for your website: 

You can choose the AMP website mode you wish to use. Depending on the theme and mode you choose, there may be development work to tackle, so it’s important to review the choices carefully. Then, you can select all the content types you want to make available as AMP pages. 

Additionally, you can choose to try out AMP Stories, a new feature available in a beta version: 

With AMP Stories, you can create engaging content that is still delivered to mobile users quickly. You can also track, measure, and monetize your AMP Stories. 

Step 3: Set Up Google Analytics

If you use Google Analytics to track your website’s traffic, you’ll have to make a few adjustments if you want to also include your AMP pages in that data. There are two ways you can approach this. 

First, you can alter your existing Google Analytics tracking code manually to include your AMP pages and URLs. Alternatively, if you use MonsterInsights or have been looking for a good Google Analytics plugin for WordPress, you can use its Google AMP add-on:

You can find the Google AMP add-on in your Insights menu if you’ve already installed the MonsterInsights plugin in your dashboard. It’s important to note that you will need a Plus license plan or higher to install add-ons, however. 

Once you’ve installed the add-on, you just need to Activate it and you’re all set. If you want to check your AMP settings at any point, you can navigate to Insights > Settings > Publishers, and scroll down to the Google AMP section. 

Step 4: Fix SEO Issues

If you’re using the Yoast SEO plugin for WordPress, and have set up the AMP plugin as per the previous steps, there are a few ways to ensure that the plugins are working well together. The Glue for Yoast SEO & AMP plugin is just the tool for the job:

This plugin is provided by Yoast, in order to connect Automattic’s AMP plugin with Yoast’s SEO tools. Be aware that this does not generate any AMP code or work on its own – both plugins are required for it to work. Additionally, Glue for Yoast SEO & AMP offers a few additional theme development tools, which can help match the sparse AMP layouts to your brand.

Overall, this plugin is ideal for anyone using both the official AMP plugin and Yoast. Once you’ve installed and activated the free plugin, you can navigate to SEO > AMP in your WordPress dashboard to configure the settings: 

You’ll be able to easily toggle on the custom post types you want to include. You can also use the Design tab to customize your AMP pages. 

Step 5: Validate Your AMP Setup

Once you have your AMP settings configured, it’s recommended that you validate them. This means you should check to ensure that everything is correct and in working order. In fact, one of the benefits of using AMP to improve mobile experiences is that it was designed in a way that allows for validation.

You have three options for completing this step: 

Since all three of these options will yield the same exact results, you can choose the method that best fits in with your development process.

Add More Functionality to Your AMP Pages

If you still want a bit more out of your AMP pages in terms of branding and retaining your theme elements, there are some other tools that might be helpful. One plugin to check out is AMP for WP – Accelerated Mobile Pages:

AMP for WP offers more extensive theme development tools than other solutions that are available for implementing AMP. This can be helpful if you’d like to customize your AMP theme to look more like your non-mobile site. However, where it really shines is in its integrations of other features such as commenting, custom post types, embeds, and even email opt-ins.

What’s more, this is an add-on plugin that works alongside the official AMP plugin by Automattic. As we mentioned previously, there are some drawbacks to using AMP. For example, if you’re unable to build a custom AMP theme and need to integrate many features, AMP for WP can help. As a companion plugin, it can increase the functionality of your AMP pages and round out your AMP toolkit.

AMP & WordPress Themes

You may be wondering how your AMP pages will affect your WordPress themes. AMP pages replace your WordPress theme entirely on mobile devices, because they are written using a different set of standards than most WordPress themes.

However, AMP works because it reimagines the best practices for HTML. You can choose to follow many of its principles even within your non-AMP WordPress theme, although it will likely involve having your developer rebuild it from the ground up.

The Google AMP project offers a step-by-step tutorial on creating your own AMP pages. Reading through this tutorial will give you a better understanding of what is (and isn’t) on an AMP-generated page. A few key components are:

  • Stripped HTML and AMP
  • Stripped JavaScript (JS) and AMP JS library
  • An AMP cache

Since AMP runs side by side with a theme, using the term ‘AMP-friendly’ is a slight misnomer. However, you can find themes or templates that come with supplemental AMP resources. In fact, we have released the first theme framework for WordPress to fully integrate AMP support in its core. 

Our Genesis 3.0 theme framework brings together everything you need to make the most of AMP. This combination will also work to eliminate several of the developer pain points we’ve discussed in this article.

We’ve also included an AMP-ready Genesis Sample theme and an AMP-ready Essence Pro theme, so you can develop with AMP in mind from the start. This will help to create a more cohesive experience between your AMP and non-AMP pages. 

Get the Most Out of AMP With WP Engine and Genesis

The Google AMP framework can bring you increased traffic, and improve your website’s overall mobile experience. When you combine AMP with our Digital Experience Platform and our AMP-ready Genesis 3.0 theme framework, you have all you need to create amazing websites

We understand how important the right developer resources are to the success of a project. Come check out our versatile hosting plans, and take your websites to the next level!

Get started.

Build faster, protect your brand, and grow your business with a WordPress platform built to power remarkable online experiences.