Google AMP – How to Implement it in WordPress

Updated on September 13, 2017

The web is constantly evolving and for a lot of business owners this means the need for staying on top of all the changes with Google. If you don’t adapt it means you could get left behind. Google AMP, their mobile initiative to speed up the web, is now approaching it’s one-year anniversary. Since it is a lot more stable now than it was 6 months ago, we thought it would be a good time to share with you some steps on how get started with Google AMP in WordPress, as well as some of the pros and cons of this new platform.

What is Google AMP?

Google AMP (Accelerated Mobile Pages Project) was originally launched back in October 2015. The project relies on AMP HTML, a new open framework built entirely out of existing web technologies, which allows websites to build light-weight webpages. To put it simply, it offers a way to serve up a stripped down version of your current web page.

 

From day one, a key focus for AMP has been speed.  It is arguably one of the most frustrating things about the mobile web — borne out by recent Google research that shows that 53% of people will leave a site that fails to load in three seconds or less. That’s the worst of all worlds for users, businesses, publishers, websites and the mobile web as a whole. — David Besbris, AMP project lead at Google

According to the latest State of the Online Retail Performance report by Akamai, every tenth of a second matters. Even a slight increase in page load time to 2.8 seconds, saw a 2.4% drop in conversion rate.

conversion rates on mobile

Correlation to speed and conversion rates on mobile

A lot of large companies have adopted Google AMP over the past year, this includes WordPress, Reddit, eBay, Pinterest, Washington Post, Wired, Gizmodo, etc. According to Google, Slate saw a 44% increase in monthly unique visitors and a 73% increase in visits per monthly unique visitor.

When a page is served via AMP in Google it will have the AMP symbol next to it as seen below in the New York Times demo. Note, you must be on a mobile device to test this. You can also use the device emulator in Chrome devtools. Structured data markup allows Google to present your content more prominently in search results. For example, AMP articles that include the appropriate markup properties may get the coveted carousel spot in SERPs as shown below.

google amp example

Google AMP carousel

And here is an example of what an AMP page looks like on The New York Times website. As you can see it is very basic and simplistic, which is the goal of AMP. This ensures that it loads fast and offers better usability.

google amp single page example

Google AMP page example

As with any new platform you should weigh the pros and cons and decide if it is the right move for your business and or website.

Pros of Google AMP

  • AMP is free and open source.
  • AMP can definitely improve the load times of your WordPress site. And remember that speed is a ranking factor.
  • Better placements in SERPs with carousel possibility for better CTR. In one implementation with a popular publisher, Google AMP resulted in a 600% in CTRs!
  • Google AMP forces a lot of recommended web performance practices such as prevention of large CSS and JS frameworks.
  • Could impact your conversions in a positive way.
  • A lot of improvements have been made over the past year and advertising options are now readily available in Google AMP. This means magazines and new publications can retain or even increase their AdSense revenue.
  • Automatic image optimization (even conversion to WebP format!)
  • AMP Lite introduces further optimization for slow network connections. Google saw a combined 45% reduction in bytes.

Cons of Google AMP

  • AMP isn’t currently a ranking factor, but it could be in the future. This could be seen as both a pro and con.
  • AMP can be difficult to implement and test if you’re not a developer. However, thankfully the WordPress platform is a little easier than others.
  • Introduces an entirely new separate platform and functionality you have to worry about. Whatever happened to simply optimized our mobile sites?
  • Could hurt or affect your conversions in a negative way.
  • There has been reports of Google AMP messing up stats in Google Analytics.
  • Some have seen worse engagement and higher bounce rates.
  • Still 3rd party scripts and applications that might not be supported.
  • No support from some older browsers such as Internet Explorer 11. They have stated that in general they will support the 2 latest versions of major browsers like Chrome, Firefox, Edge, Safari and Opera. And they support desktop, phone, tablet and the web view versions of the respective browsers.
  • Read Jan Dawson’s opinion why Google AMP is making it harder, not easier, to publish to the web.
  • Read Alex Kras’ article on some of the problems with Google AMP, along with a response from the tech lead on AMP project at Google.
  • Tim Kadlec share’s his opinion on Google AMP and the need for a better alternative: content performance policies.

As of February 2017, Google AMP has begun to show direct publisher’s URLs. Previously it only showed Google’s version that is serving from cache. This presented concerns from people from a branding perspective. Thankfully Google realized this as well and made a change. Now, the URL field of a browser will continue to show a Google URL. However, the AMP header area will display a link or chain icon, what it calls the “anchor” button. Clicking on this will make the publisher’s direct URL appear, so that it can be easily copied and pasted. This is still not a perfect solution, but it’s better than nothing.

Here is another example of losing branding.

It is also important to note that if the only mobile version page that exists is an AMP version, Google will still use the desktop version for indexing, even when Google switches their index over to the mobile first index.

How to Setup Google AMP in WordPress

Thankfully it is a lot easier now to implement Google AMP in WordPress than it was 6 months ago. A lot of progress has been made on WordPress plugins and the platform as a whole. Remember though, your code must validate with Google to show the AMP version of your site in SERPs. A plugin will turn your post into an AMP version but it is Google that decides to show the AMP version instead.

Basically how it works is that your WordPress post gets a different URL assigned to it. This is all handled by the WordPress plugin automatically. Typically /amp or /?amp is appended to your current post. Here is an example:

Original Blog Post URL: https://domain.com/blog-post
AMP Blog Post URL: https://domain.com/blog-post/amp/

Google AMP WordPress Plugins

There are currently 2 popular WordPress plugins in the repository that can help you get setup with Google AMP. The first one is the free official AMP plugin, which is actually developed by the team over at Automattic.

google amp wordpress plugin

Official Google AMP plugin by Automattic

As of writing this, it currently has over 200,000 active installs with a 3.5 out of 5 star rating. You can download it from the WordPress repository or by searching for it within your WordPress dashboard under “Add New” plugins.  You can customize the appearance a little bit under the “Appearance AMP” editor (as seen below). However, your options are pretty limited with the plugin and it relies on you knowing how to implement additional filters for features such as AdSense or Analytics.

wordpress amp customize appearance

WordPress AMP styles

It is also important to note that it only supports posts, not pages. Although they have announced that they are working on adding this feature. Below is example of what our WordPress post looks like after installing the plugin.

wordpress amp post

WordPress AMP preview

If you are wanting an easy way to add additional features then this is where the free AMP for WP plugin comes into play. This is basically a more advanced version of the official AMP plugin and gives you additional features and support. It’s developed by Ahmed Kaludi and Mohammed Kaludi who also run a successful WordPress theme shop.

amp for wp plugin

AMP for WP WordPress plugin

As of writing this, it currently has over 70,000 active installs with a 4.6 out of 5-star rating. You can download it from the WordPress repository or by searching for it within your WordPress dashboard under “Add New” plugins. This plugin allows you to customize a lot more with your Google AMP setup. Also it does support pages. Below we will dive into the customizations and features available from within the AMP plugin settings in your dashboard.

We are actually using this plugin here at Kinsta! You can see AMP running on this post if you go to https://kinsta.com/blog/google-amp/amp/. (Update: As of early September, we are no longer running AMP on our site. Check out our case study on why we chose to disable Google AMP) And you can see an example in SERPs of a Kinsta blog post below. You can see the AMP logo.

kinsta blog AMP in SERPs

Example of Kinsta AMP in SERPs

General

Under the general screen you can add a logo, customize the size, and also choose whether or not you want AMP enabled on pages. Depending upon your site and traffic, you might only want to enable AMP on your blog (post types).

accelerated mobile page general options

Accelerated mobile pages general options

Homepage

Under Homepage you can enable or disable homepage support, override the homepage thumbnail size, and choose what you want to happen when users click on the logo (go to AMP version of non-AMP version).

AMP homepage

AMP homepage

Page Builder

Under Page Builder, you can enable it to allow for AMP widgets to be used.

AMP page builder

AMP page builder

Design

Under Design, you can launch the post builder or select from a pre-designed template. You for HTTPS for search and also add a call now button. There is then an option for custom CSS. On our site for example, we add the following code to customize the color of the header:

.amp-wp-header {background-color:#5CC0C0;}
AMP design

AMP design

Single

Under Single, you can enable social icons, disable links, show author bio, and even change options for related posts.

AMP single post

AMP single post

Advertisement

Under the advertisement screen you can enable AdSense and choose the placements. This plugin is one of the easiest ways to add AdSense with Google AMP. For those of you that rely on advertising to run your sites, this can be a very useful feature.

AMP advertisement

AMP advertisement

AMP Menu

Under Menu you can choose whether or not to add /amp/ at the end of the menu URLs. Perhaps you want your visitors to stay on your AMP enabled site, if so, then you would want to enable this.

AMP menu

AMP menu

Social

Under the Social menu you can add which social networks you want to show up on mobile for sharing purposes. For Facebook, you will need to register a free App ID.

AMP social

AMP social

SEO

The SEO screen is probably one of the most important, as this pertains to how Google will see and rank your AMP content. We recommend enabling the “Meta Description” option. If you are using the Yoast SEO plugin, then we also recommend enabling the “Meta Tags from Yoast” and “Yoast Description in ld+jason” options.

AMP seo options yoast

AMP SEO options

Analytics

The Analytics screen allows you to add your tracking scripts for Google Analytics, as well as Google Tag Manager. You will want to do this to ensure you keep your reporting data up to date.

AMP analytics

AMP analytics

It also supports Segment Analytics, Piwik Analytics, Quantcast Measurement, comScore, Effective Measure, StatCounter, HitStats Analytics, Yandex Metrika, and Chartbeat Analytics.

Structured Data

The structured data screen lets you customize the default structured data logo and post image.

AMP structured data

AMP structured data

Contact Form

The contact from screen simply lets you enable Contact Form 7 support.

AMP contact form

AMP contact form

Notifications

Under the notifications screen, you can enable it to show a cookie warning. This can be useful for those in countries with more restrictive privacy laws.

AMP notifications

AMP notifications

Comments

Under the comments screen you can enable support for 3rd party commenting systems such as Disqus and Facebook comments.

AMP comments

AMP comments

Advanced Settings

Under the advanced settings you can enable mobile redirection. Remember that by default only AMP will be enabled for mobile users that click it from SERPs. If a mobile user browses directly to your site, they won’t get the AMP enabled page unless you enable redirection. You can also enter custom HTML on this screen and change the footer link action.

AMP advanced settings

AMP advanced settings

Extensions

The developers also have premium extensions which you can purchase to even further extend the AMP plugin. Some popular ones you might want to think about is Email options, CTA buttons, and custom post type support.

AMP extensions

AMP extensions

And here is how our post looks with the AMP for WP plugin running on the Kinsta blog.

AMPforWP example

AMPforWP example

The same developers of AMP for WP also recently released a new plugin, AMP WooCommerce, which allows you to enable AMP on your e-commerce store.

amp woocommerce

AMP WooCommerce plugin

Validating Your Google AMP Code

After you get Google AMP setup on your WordPress site you will want to make sure that your code validates. If it doesn’t Google won’t show the AMP version in SERPs. You can run your WordPress site through Google AMP Validator tool. It will show you at the bottom if you pass or fail.

google amp validator

Google AMP validator

You can also download the free Chrome AMP extension which will validate each page. If it shows up as red you can click it and quickly see the errors or warnings on the page.

amp validator chrome extension

Google AMP errors

If it doesn’t pass validation, you might see an error like this: “Not a valid AMP page.” In this example below, it was due to the use of old and no longer supported HTML tags, <deltime> and <instime>. You can see a full list of AMP supported HTML tags. Invalid AMP pages will not have AMP-specific features in Google search results.

Not a valid AMP page

Not a valid AMP page

You can also check your site for AMP issues in Google Search Console under the “Search Appearance” section. It is important to note that a lot of users have reported large delays with AMP reporting in Google Search Console. This is most likely because it is still a fairly new platform and crawling isn’t as frequent.

google search console amp

Accelerates Mobile Pages report in GSC

If you have errors Google will notify you via email that you need to add required structured data to your AMP pages.

amp errors google search console

AMP errors – GSC

Google AMP SEO

Another aspect you might be wondering about is the SEO side of things because you now have two copies of the same page or post. You don’t need to worry about duplicate content because both of the plugins above use canonical tags with AMP. Canonical tags tell Google that the original content is your desktop version. Google will automatically detect AMP pages on your site as your original page is served with a header tag directing Googlebot to your AMP page.

Example on your original page:

<link rel="amphtml" href="https://domain.com/amp/">

Example on your AMP page:

<link rel="canonical" href="https://domain.com/">

The AMP for WP plugin mentioned above also works great with the Yoast SEO plugin in order to add your meta and OG tags for SEO and social purposes. See example below.

Google AMP meta tags

Google AMP meta tags

New Relic Monitoring with Google AMP

It is also important to note for customers using New Relic monitoring, which we also use here at Kinsta, that the Google AMP validator might fail due to a 3rd-party script error:

The tag 'script' is disallowed except in specific forms.

This is because HTML pages formatted for Google AMP aren’t allowed to contain any third-party JavaScript. The AMP for WP plugin mentioned above fully supports New Relic. But if you need to disable New Relic Browser on AMP pages, follow the instructions in Disable Browser monitoring for specific pages. There is also a free WordPress plugin, Disabled NewRelic For AMP, which you can install.

Enabling AMP for External Links With Cloudflare

Cloudflare has a new feature they launched recently which allows you to enable accelerated mobile links for external links that have AMP running. One of the benefits of it for your site is that AMP content is loaded in a viewer directly on the site that linked to the content. Which means after the reader is done consuming the content, they close the viewer, and it returns them back to your site. So in a sense, it could increase time on your site overall. You can enable this within the Cloudflare performance dashboard.

cloudflare accelerated mobile links

Cloudflare Accelerated Mobile Links

Summary

So as you can see there are some easy ways to get Google AMP up and running on your WordPress site. Should you jump on Google AMP right away? It really depends on the type of WordPress site you have running. If you are a magazine or news site it might make sense to implement this right away and start testing AdSense positions. If you are SaaS business it could end up hurting your conversions if you aren’t careful. Google AMP is definitely a major change, especially if you already get a lot of mobile traffic. Our advice is to start testing as that is the only way to know if your business will see positive or negative results.

Have any other tips about using Google AMP with WordPress? If so we would love to hear about them below in the comments! Also make sure to check out the official AMP roadmap.

This article was written by Brian Jackson

Brian focuses on our inbound marketing efforts; everything from developing new online growth strategies, content creation, technical SEO, and outreach within the WordPress community. He has a huge passion for WordPress, has been using it for 8+ years, and even develops a couple premium plugins. Brian enjoys blogging, movies, bike rides, and flipping websites.

Hand-picked related articles

  1. Gravatar for this comment's author
    Mohammed Kaludi October 24, 2016 at 11:18 pm

    Hi Brian,

    Great article on how to get started with AMP, there is one thing that I like to mention is if you are using “AMP for WP” plugin, it fully supports New Relic Monitoring and there is no need to use extra plugin for that.

    Thanks,
    Mohammed Kaludi

    1. Gravatar for this comment's author
      Brian Jackson October 25, 2016 at 10:27 am

      Oh great, thanks for the heads up Mohammed! I have updated the post above now with that information. Keep up the great work with AMP for WP.

    2. Gravatar for this comment's author
      Tarun October 26, 2016 at 10:16 am

      Im personally using AMP for WP on Telecomtalk.info thanks to developers like Ahmed and Mohammed from ampforwp.com being a news website and having a small team it was difficult for us to install and monitor the issues from day 1. Ahmed was in touch with me and he was just a call away he configured each and everything and made sure telecomtalk passes all validation issue still he keeps and eye.

      Right now our amp pages are doing very good :)

      1. Gravatar for this comment's author
        Brian Jackson October 26, 2016 at 2:25 pm

        Glad to hear the AMP for WP plugin worked out good for you Tarun!

      2. Gravatar for this comment's author
        Mohammed Kaludi October 27, 2016 at 12:49 am

        Thank you Tarun for your feedback, I’m glad our plugin helped and Very good luck with TelecomTalk

  2. Gravatar for this comment's author
    Hitesh Sahni October 31, 2016 at 1:16 am

    Thanks for the heads up Brian. This is a great overview on all that’s going on with AMP so far. But given Google’s history of introducing new stuff and then shutting it down (remember author markship?), I am still on the fence about jumping into the AMP bandwagon. Do you think every big and small website owner should start taking action on this?

    1. Gravatar for this comment's author
      Brian Jackson October 31, 2016 at 9:41 am

      Hey Hitesh,
      Yes, I think a lot of business owners are in the same position. If you are a news site, it is a no brainer. I think magazine and news sites will definitely see instant increases in traffic and CTR. Especially if you get that carousel position in SERPs. But when it comes to a normal business website which needs to generate leads, I can only say, you would need to test.

      We haven’t implemented AMP on Kinsta’s website yet due to the fact we haven’t had time to test how it affects our conversions on mobile. I am personally not a big fan of AMP as I think website owners should be optimizing mobile sites better, there is no need for a separate platform. But we have to live by what Google does unfortunately :)

      The best advice I can give is to test it. If you are recording your conversions/goals on mobile in Google Analytics, you could easily install/setup AMP, monitor for a week, and see what the data says.

      1. Gravatar for this comment's author
        Hitesh Sahni November 10, 2016 at 2:49 am

        Great points. Thanks Brian.

  3. Gravatar for this comment's author
    Kingsley Felix November 11, 2016 at 3:14 pm

    Well it turns out the AMP has refused to TURN ON on my site

    1. Gravatar for this comment's author
      Brian Jackson November 23, 2016 at 12:34 pm

      Did you get any errors Kingsley?

      1. Gravatar for this comment's author
        Kingsley Felix November 23, 2016 at 12:44 pm

        well after few research i found out the AMP only works when your website show up on google search

  4. Gravatar for this comment's author
    NDemoni January 1, 2017 at 7:44 am

    Why not make amp a built-in functionality to wordpress software so it will not ruin our blogs theme. Thats my concern

  5. Gravatar for this comment's author
    Tudo Sobre Psicologia January 20, 2017 at 9:15 am

    Thankyou i have implement in my website now. https://www.escolaninjawp.com.br

  6. Gravatar for this comment's author
    Brian Jackson July 7, 2017 at 9:59 am

    Great, glad it was helpful!

Leave a Reply to NDemoni Cancel reply

Use WordPress?

Join 20,000+ others who get our FREE weekly newsletter with WordPress tips on how to drive more traffic and revenue to your business!

You have Successfully Subscribed!

Send this to a friend