How To Set up Google AMP for WordPress Blog: Official Plugin

add-google-amp-to-wordpress

Did you know that 53% of mobile users abandon a website that takes longer than three seconds to load? That means if you haven’t been paying attention to your mobile load times, you may be getting less traffic than you deserve.

When you consider that most Google searches now occur on mobile, it becomes even more important to maximize your site’s mobile page speed. One new technology to help you accomplish that is Google Accelerated Mobile Pages, also known as Google AMP.

I’ve talked before about methods to speed up website and making your site mobile friendly. Guess what? Google AMP can help you accomplish both of those things at the same time.

Google AMP speeds up the mobile version of your site by offering lightweight versions of your pages hosted on Google’s servers. As a result, visitors get their content incredibly fast, which means they’re less likely to abandon your site and more likely to continue reading your posts.

In this post, I’ll tell you a bit more about Google AMP and then show you exactly how to set up Google AMP for WordPress using one free plugin.

Before that let’s dive deeper to understand more about Google AMP project.

What is Google AMP?

Google AMP is a new initiative from Google aimed at making mobile websites load faster. If you’re familiar with Facebook Instant Articles, Google AMP is a similar idea.

Instead of loading your full mobile site, Google loads a stripped down, minimalist version of your site that looks something like this:

google-amp-example

Google also gives sites with AMP a special mark in the mobile search results and a chance to show up in a “featured” carousel at the top of the page:

google-amp-example2

Though Google says AMP does not currently have a direct effect on your site’s search engine rankings, it does provide a chance to get more clicks thanks to the eye-catching AMP icon and featured carousel.

Here are some of the best videos to understand AMP in detail:

How to Set Up Google AMP for WordPress

It’s easy to add Google AMP to WordPress thanks to an official plugin from Automattic. But, the official plugin doesn’t have any configuration options, so you’ll likely want to add an extension plugin to be able to further style how Google AMP looks and functions.

First, I’ll show you how to install and test the official plugin. Then, I’ll show you how to set up the extension (which requires you to already have installed the official plugin).

How to configure Official Google AMP Plugin

To get started, install the AMP plugin like you would any other WordPress plugin.

You don’t need to configure anything. As soon as you activate the plugin, it will automatically add AMP versions of all your posts (Note: the plugin does not add AMP versions of your pages).

To verify that AMP is working properly, you can add “/amp” to the end of the URL of one of your WordPress posts. Example:

configure-amp-1

You should see a new minimalist interface which looks something like this:

configure-amp-2

Don’t worry about any duplicate content issues – the plugin automatically adds a rel=”canonical” tag so that Google knows the content isn’t duplicated.

As I mentioned, the official plugin doesn’t actually give you any further options to configure your AMP pages, so let’s take it one step further by installing another plugin which does.

Configuring Your Google AMP Pages

To add configuration options for Google AMP, you need to install the AMP for WP plugin.

Remember: The AMP for WP plugin will only work if you already have the official AMP plugin installed. So, make sure you’ve followed the previous step before you try to set up AMP for WP.

Once you activate the AMP for WP plugin, you’ll see a new “AMP” tab in your WordPress dashboard. This is where you can configure advanced settings for AMP:

amp-for-wp1

Get started by clicking on the “General” tab:

amp-for-wp2

In this tab, you can add your site logo, Google Analytics tracking, and change the color scheme for your AMP pages. You can also add custom text to the footer of your pages.

In the “Notifications” tab, you can add a custom notice that pops up when users visit your AMP pages. The most common use for this would be something like a “cookie consent” notice, but you can make the text anything you want.

The “Advertisements” tab allows you to add multiple AdSense ad blocks. Currently, AdSense is the only network supported by the plugin, though hopefully that changes in the future.

amp-for-wp3

“Single” is where you can configure the actual format for your AMP-enabled posts. You can choose to show/hide featured images, comments, social icons, and lots more. You definitely should configure this tab:

amp-for-wp4

The “Structured Data” tab allows you to set default widths/heights for your pages, as well as a default featured image.

And finally, the “Custom CSS Editor” allows you to include any other custom CSS snippets you’d like to add. These style changes will only affect your AMP pages.

Once you’ve gone through all the settings, make sure to click the “Save Changes” button.

Configuring Your AMP Pages Menu

The plugin also adds a separate menu location specifically for your AMP pages.

To set up this menu, start by going to “Appearance” → “Menus”. Create a new menu for your AMP pages:

amp-menu-1

On the next screen, make sure to choose the “AMP Menu” location:

amp-menu-2

Then, you can drag and drop links to this menu like you would any other menu on your WordPress site. Though, this menu will only show up on the AMP versions of your posts.

Styling Your AMP Pages Visually

You can also use the visual WordPress Customizer to style your AMP pages by going to “Appearance” → “AMP”:

amp-visual

You don’t have a lot of options, but it’s nice to be able to preview different styles in real time.

Should you enable Google AMP?

The Answer is yes. You should enable it right away.  Google AMP is a great way to speed up the mobile version of your site. As I mentioned, this can directly improve your traffic because the majority of people will simply quit loading a page that is taking too long.

AMP is also incredibly simple to set up with WordPress. It only takes about 15 seconds to activate the basic AMP plugin. Configuring your AMP pages further is simple as well thanks to the AMP for WP plugin.

Google AMP is still fairly new &  it’s already become the standard for major publishers. And given that Google is behind the technology, it probably won’t go away anytime soon.

Don’t forget to share this post. And if you’ve already implemented Google AMP on one of your sites, it would be awesome if you left a comment about your experience.

Note: This article was originally published on WPSutra here. Based on popularity & usage, this post has been republished here with proper credits. WPSutra is a dedicated blog to learn about WordPress.

Leave a Reply

Your email address will not be published. Required fields are marked *