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. Montu rai

    Thanks for sharing info for amp thanku harsh sir 😍😍😍😍😍😍

  2. Martins

    Thanks for the article Harsh, I’ve been trying to get the AMP working for my site too. You’ve mentioned in utmost easy manner, will surely do it.

  3. Dexx

    Hi, i just finished set up AMP on my website by following your tutorial. Thanks for help a lot. AMP is too much faster for mobile user view. Its fascinating.

  4. Jagannath mondal

    Thanks. it’s very helpful for me & my websites

  5. Rahul

    Hi Harsh ,
    Very nice post,this is a wonderful innovation.I have follow your instruction and successfully setup AMP Thanks for such a helpful content.

    Thanks.

  6. iliyas

    Awesome! Just now learned AMP!

  7. Atulmaharaj

    Thanks for the article Harsh, I’ve been trying to get the AMP working for my site too. You’ve mentioned in utmost easy manner, will surely do it.

  8. Nikhil Jain

    thanks for sharing this useful info about Google AMP plugin

  9. Vilas Nagare

    Hi Harsh,

    I am using AMP plugin after reading this post. It has boosted the site performance on Mobile. However, I am getting in Critical Errors in Webmaster that URL or Pages are not AMP valid. The error is the Prohibited or invalid use of HTML Tag (Critical issue) – The tag ‘?XML’ is disallowed.

    Can you please help on this?

  10. Danick

    Prohibited or invalid use of HTML Tag (Critical)
    Remove prohibited HTML tags, or fix attributes or values not supported by the AMP standard. AMP pages with prohibited or invalidly used HTML tags may appear in Google search results without AMP-specific display features. Learn more

    The attribute ‘xmlns:v’ may not appear in tag ‘div’.

  11. Arjun kumar

    Harsh sir, Is there anything in webmaster tool, I have to change after activated amp to all my site pages?

  12. Kajal Joshi

    Hello Harsh…

    Thanks for this information about AMP for wordpress.
    Just Installed this plugin.

    Thanks….

  13. Md Badshah Ansari

    Thanks Harsh sir ,

    Will Add Any Other Ads Network In AMP Advertising ?

  14. K.Karthik

    Awesome! Just now learned AMP!

  15. Aamir Inayat

    Hi Harsh,

    I am facing problem using AMP, already configured as you explained but it gives 404 page not found when I use it with my homepage like speakwmind.com/amp/
    All other post are working fine.

    Do you have any idea why its happening?

    1. Harsh Agrawal

      @Aamir
      This works only for single posts. It doesn’t work for homepage.

  16. DESSS

    Hi..,

    Also, are there any new Patents/Updates about AMP pages? I see that Google starts to show AMP pages on mobile devices, however, due to AMP design limitation those pages kind of look ugly. My concern here is the conversion rate when person would come to AMP page instead of regular mobile page that was created for conversions.
    Thanks

  17. Kratos

    Thanks for all your great Posts

    Just Installed Above mentioned AMP plugins.

    Which plugin is more effective seo Yoast or AMP .

  18. Danick

    Hi Harsh,
    AMP is completely new to me, but it is good to read about it and I will implement it in my blog today and see how it goes 🙂 Thank you for the advice.

  19. Azaqx

    Thanks for all your great Posts

    Just Installed Above mentioned AMP plugins.

    and Happy New Year Harsh

Leave a Comment

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

Scroll to Top
120 Shares