WPKube

How to Add Google AMP Pages to Your WordPress Site

Google is pushing more and more publishers to implement Google AMP on their sites. AMP is a somewhat new and ongoing project designed to make your content ready for mobile users, at least more than it already is.

We’re going to learn a couple of different ways we can add Google AMP pages to a WordPress site as well as what AMP is and who it’s for (and not for).

What is Google AMP, and How Will Google AMP Pages Benefit Your Site?

Google AMP is an open-source project created by Google to bridge the gap between the speed at which a mobile web page loads and how mobile-ready a site is. It’s meant to make your site accessible to all, even folks with slow Internet speeds and low-powered or outdated hardware.

How does this work? Basically, AMP creates a minimized or stripped-down version of each post on your site that places the focus on your content while using less code. The end result is a web page that loads at a much faster rate, encouraging users to stay on your site as opposed to leaving when they can’t get it to load.

Google worked with many large publishers to test this project out before it was released for public use. It’s used by some of the biggest and most well-known publishers in the world, including BBC, The Guardian, The Huffington Post, Mashable, The New York Times, The Telegraph, TIME, The Wall Street Journal and The Washington Post.

You can view case studies from various publishers on the AMP Project website. This includes a study from The Washington Post where AMP helped the publication “increase returning users from mobile search by 23%” as well as a study where AMP made Gizmodo “3x faster on mobile.”

Before & After Example of a Google AMP Page

Here’s a before and after example of a page on a site that uses Google AMP. The page is an article from Forbes, and the URL is http://www.forbes.com/sites/kurtbadenhausen/2016/11/16/the-10-best-states-for-future-job-growth. It looks like this:

If you add, /amp/ to the end of the URL, you’ll access the Google AMP version of the article. The URL becomes http://www.forbes.com/sites/kurtbadenhausen/2016/11/16/the-10-best-states-for-future-job-growth/amp/, and it looks like this:

You may be wondering how users find AMP versions of your articles. When they conduct a Google search, they’ll see the AMP logo attached to AMP-enabled pages.

Does AMP Really Make the Web Faster?

Here’s an example from Gizmodo using this article about a children’s picture book depicting the colonization of Mars. Here are the original article’s results from Pingdom:

Here are the results of the AMP-enabled version of the article:

Who Shouldn’t Use Google AMP?

Google AMP is a useful tool, and it’s tempting to implement given the ferocity at which Google is pushing the project, but it isn’t for everyone. Here are a few scenarios where Google AMP may not be necessary, especially given the fact that it isn’t a ranking factor, at least not yet.

1. You Use a CDN

Google AMP is intended to make the mobile web faster, but you may not need it if you use a content delivery network. Serving JavaScript and media files over a CDN does wonders for a site’s ability to load pages fast, which negates the need for Google AMP’s stripped-down pages.

2. Your Site is Optimized for Mobile Devices

Using a CDN isn’t the only way you can optimize a site for mobile devices. You can also add custom code to your site, optimize images, use lazy-loading features and implement dozens of other features to improve your site’s user experience for mobile users. If your site is already optimized for mobile devices, you likely won’t see much improvement with Google AMP.

3. You use a Single CSS Reference Sheet for Mobile Pages

This one is for developers. Referencing multiple stylesheets can have a negative effect on a site’s page speed scores even though they may be necessary. If you only use one CSS reference sheet for mobile pages, you likely won’t see much improvement if you implement AMP.

4. You Don’t Publish Much Content

Google AMP is for content-heavy sites. These sites have anywhere between hundreds and even thousands of pages. If you don’t publish much content, meaning you publish a blog post every now and then or none at all, you likely won’t benefit from Google AMP.

5. You Run a Food Blog

Google AMP strips down your site’s content. This includes recipe card plugins. Many food bloggers have reported issues with recipes not displaying correctly on AMP-enabled pages.

6. You Have an Ecommerce Site

This ties back into scenario number 4. Google AMP is for content, so you’ll likely face more issues than improvements if you implement it on an ecommerce site.

The Downsides of Using Google AMP

Google AMP is still relatively new, and it’s far from perfect. There are several downsides of using it, some of which may convince you to not use it at all.

The first one ties into the fact that AMP is still very new. Not every analytics service or ad network is supported because of this (Google Analytics and AdSense are supported with the plugin used below). Google is adding support for more and more platforms gradually, and most major platforms are already supported.

View the full list here if you want to see if your platform is supported. This list includes supported content platforms and audio/video platforms. All content from unsupported platforms will not display properly on AMP-enabled pages.

Some Google users have also complained about the implementation of AMP-enabled pages. They don’t like how some AMP articles do not have social sharing buttons (the plugin used in this tutorial does, however) they can use to share content with their friends nor can they access the page’s URL to share it.

Comments are also often disabled on AMP pages, which users have found annoying as well. If you enable AMP on your site, you may consider placing a link at the top of every post you publish so AMP users can access the original article. We’ll learn how to insert this type of URL in the footer of AMP-enabled pages below.

How to Install Google AMP Pages on WordPress

You’ll need to install two plugins in order to properly run and customize AMP on your site. The first is the main AMP plugin for WordPress, developed by Automattic.

Go to the Add New plugin page, and search for “amp”. Install and activate the plugin once you find it.

Now, you can go to any blog post on your site and add /amp/ or /?amp/ or /?amp=1/ to the end of the URL to access the AMP version. You may need to enable pretty permalinks if it isn’t working.

The base plugin is very basic and only allows you to edit a few styles. To access them, hover over Appearance, and select AMP.

You can edit the header text color, the header background and link color, and the color scheme. Here are the default styles:

All you need to do is select new colors or a color scheme to suit your brand.

Installing & Setting Up AMP for WP

You can technically get away with just installing the base plugin, but there are other plugins you can use to extend the functionality and compatibility of your site’s integration with AMP. One of them is AMP for WP – Accelerated Mobile Pages.

After you install and activate this plugin, you’ll find an AMP menu item in the admin panel to the left. Hover over it, and select Welcome.

Click over to the General tab. The default logo on the AMP version of your site is a simple text link, as seen in the image in the previous section. Here, you can upload a custom logo. The developers recommend a dimension of 190 x 36 px. Simply click the Upload button to add it.

If you use an analytics service, select it, and enter your analytics ID. AMP for WP currently supports Google Analytics, Segment Analytics and Piwik Analytics.

You can also change the color scheme of your AMP-enabled site with AMP for WP. However, the settings beneath that are a little more interesting. For example, if you want the AMP version of your site to use a specific page as its homepage, turn the setting on, and select that page.

The next setting ties back into a con I mentioned in the previous section, and that’s the fact that some users don’t like using AMP-enabled pages at all. This setting lets you insert a link to the original article in the footer. It’s set to ON by default, and I recommend leaving it on for users who want nothing to do with AMP. You can also use the ON/OFF setting for RTL support if your site uses a right-to-left language as well as the archive pages setting if you don’t wish to use AMP on these pages.

Make sure you save your changes before leaving the page.

Adding a Custom Menu

AMP for WP is a fairly large upgrade from the base AMP plugin. Here’s how your AMP-enabled pages look by default with this plugin activated.

You can see there’s a navigation button at the top of the page that triggers a slide-in menu to the right. It also has a floating social share bar at the bottom. If you want to edit the menu that displays on AMP-enabled pages, go to AMP > Welcome > AMP Menu, and click the link that’s there to be taken to the WordPress menu builder you’re used to.

Adding Advertisements

You can also add advertisements to AMP pages using the Advertisement tab.

Toggle the ON switch for the ad you would like to enable, and select a size.

Enter your ad’s Data AD Client and Data AD Slot.

If you’re using AdSense, select an ad that’s the same size as the one you chose earlier or create a new one. Click its associated Get Code button to find the ad’s Data AD Client and AD Slot. Click Save Changes to insert the ad on AMP-enabled pages.

Customizing Settings for Single Posts

When you activate AMP for WP and take a look at one of your blog posts, you’ll see that post’s featured image at the top of the page, a floating social share bar and related posts at the bottom. You can turn these features off and edit others in the Single section.

The first part deals with a post’s metadata and featured image. The metadata, which are the author and date, display at the top of a post by default. You can turn the switch to OFF if you don’t want it displayed at all. You can also toggle ON/OFF the featured image setting or leave it on and enter custom dimensions for it.

You can also choose whether or not you want related posts and tags to display as well as which social media platforms you want to appear in your floating social share bar.

You’ll also notice there’s a toggle ON/OFF switch for comments. The default WordPress comment system works just fine, but third-party comment systems may not be supported.

Customizing Structured Data

The Structured Data section is where you can add a default featured image for posts. Many publishers, including Joost de Valk and the team over at Yoast, began seeing errors in Search Console for AMP-enabled pages due to a lack of featured images on older posts. Adding a default featured image cleared up most errors for these publishers.

All you need to do is navigate to the Structured Data section, and click Upload to upload a default featured image.

If you want to monitor the AMP version of your site for errors, open Search Console, click Search Appearance, and select Accelerated Mobile Pages.

Final Thoughts

Adding Google AMP pages to a WordPress is a simple and fairly-straightforward process thanks to plugins. You’ll probably have a harder time deciding whether or not to enable them at all. I’d recommend only enabling it on your site if you publish content everyday, and especially if you own a news or magazine site that publishes content several times a day.

If you enable AMP and see a lot of errors in Search Console, try installing a few additional plugins. The first is Glue for Yoast SEO & AMP, a separate plugin that integrates the main AMP plugin with the Yoast SEO plugin.

You can also try Schema App Structured Data or WP SEO Structured Data Schema. These plugins help you add structured data for Schema.org on all posts and pages on your site.

We hope you enjoyed this tutorial. You may also want to see our post on 7 SEO Tools and WordPress Plugins For Maximum Visibility.

AMP is a complicated beast, so if you have any thoughts or tips to share on how you’ve enabled AMP on your own WordPress site, let us know in the comments below.