Google AMP: How To Configure For WordPress

120Shares
Google AMP for WordPress
  • Save

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
  • Save

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
  • Save

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:

Subscribe on YouTube

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).

If you like, you can watch this complete video tutorial to implement AMP Pages on your WordPress website.

Subscribe on YouTube

Or you can read the complete process below.

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
  • Save

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

configure-amp-2
  • Save

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
  • Save

Get started by clicking on the “General” tab:

amp-for-wp2
  • Save

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
  • Save

“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
  • Save

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
  • Save

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

amp-menu-2
  • Save

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
  • Save

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.

Was this helpful?

Thanks for your feedback!
  • Save
120Shares
Authored By
A Blogger, Author and a speaker! Harsh Agrawal is recognized as a leader in digital marketing and FinTech space. Fountainhead of ShoutMeLoud, and a Speaker at ASW, Hero Mindmine, Inorbit, IBM, India blockchain summit. Also, an award-winning blogger.

57 thoughts on “Google AMP: How To Configure For WordPress”

  1. Aparna

    Hello Sir..
    Do we need to create separate property for amp? or we can use the same analytics code..

  2. Sanjay Sajeev

    Hi Harsh,
    Thanks for your informative and useful post. As you mentioned, I installed AMP google first and when I tried to install AMP by ahmed, I got a message that there might be a conflict between these two plugins as the name is the same. But I ignored and installed. After that, I didn’t change any settings in the Addon AMP plugin. It is showing the AMP version when I add AMP at the end of my blog post URL. But when I check on my mobile, no AMP version is not showing. But once I add AMP at the end, it is showing on my mobile. Will it take time to show the proper amp version on mobile without adding AMP at the end of the post URL?

    1. Harsh Agrawal

      @Sanjay
      There is a difference between mobile version of site and AMP version.
      When Google will crawl and index your blog next, it will start showing AMP version to mobile visitors. However, if you want to check manually, then you need to add AMP at the end of URL to see it work.
      You can also do the same even on desktop version to see how your site looks in AMP version.
      Technically, now we have 3 version of the site:
      1 & 2: Desktop + mobile ( Usually achieved using responsive themes)
      3: AMP version

      There are other versions such as the Facebook instant format, telegram instant and so on if you like to optimize your site for these specific platforms as well. 🙂

  3. Susan Velez

    Hey Harsh,

    I followed your directions to get my WordPress site AMP set up. Awesome and easy to do, I did run into a few errors, but finally got a green light that everything is working.

    However, now my ThirstyAffiliates plugin is not working properly. I’ve already gotten 4 errors that my links were broken.

    Also, since making my WordPress blog AMP ready, I don’t see the option to cloak my affiliate links using ThirstyAffiliates.

    Are you using ThirstyAffiliates since I know that your site is set up with AMP?

    If I need to switch affiliate plugins, then I guess I will. (although, it’s going to be a ton of work.)

    I just don’t want to end up with a bunch of broken affiliate links.

    Did you have any issues when you switched with the ThirstyAffiliates Plugin when you made your site AMP ready?

    Not sure what happened and everything was working fine before getting AMP set up.

    Looking forward to your suggestions.

    Have a great day 🙂

    Susan

    1. Harsh Agrawal

      @Susan
      AMP should not affect affiliate link. Could you post about this issue at ask.shoutmeloud.com and I will personally look into this.

  4. Aditya

    Which AMP plugin you use in your website can you please tell ….

    1. Harsh Agrawal

      We use AMP for WordPress plugin

  5. Blogging Prince

    Thanks Harsh for this.

    I am new to WordPress, took your advice and few others and finally decided to move to WordPress.

    One of the features I enjoy now is the AMP pages, I was surprised how I easily moved to AMP.

    Thanks and the AMPforWP plugin is really cool with all features especially the ads injection feature.

    Hope to enjoy more features on my tutorial blog while on WordPress.

  6. David Nwachukwu

    Good guide Harsh, I’ve been struggling with the introduction of Google AMP to my blog, this just cleared up the problematic areas. Appreciate it!

    Google AMP may not directly increase search rankings but indirectly it does! Because faster load speed, the better page score from Google!

  7. Jayaseelan

    How are analytics affected by AMP?DO AMP pages appear higher on organic search results than paid ads?

  8. Subho

    Hi HARSH Sir
    Great Article! i really appreciate this in WordPress. This issue has and still is so important and you have addressed it so Informative.
    How can i implement AMP Technology in Google Blogger? Please help me sir!
    Thanks

Leave a Comment

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

Scroll to Top
120 Shares