Google AMP – How to Implement it in WordPress

By , Updated: March 2, 2017

google amp

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

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

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

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.

google amp publisher URL
Img src: Google Developer Blog

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

As of writing this, it currently has over 100,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

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

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 an extension of the official AMP plugin and gives you additional features and support. It is developed by Ahmed Kaludi and Mohammed Kaludi who also run a successful WordPress theme shop. Note: Running the official AMP plugin is required to use this.

amp for wp plugin

As of writing this, it currently has over 10,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.

General

Under the general screen you can customize the Logo, add Google Analytics, change the color scheme and tweak the text.

accelerated mobile pages options-1

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.

google amp notifications

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.

google amp adsense

Single Post Options

Under the Single screen you can toggle on or off information like post meta, featured images, pagination, comments, and social icons.

google amp single post options

Structured Data

Under the structured data screen you can change options that Google uses for SERPs and validation such as the default post image, logo, and image heights and widths.

google amp structured data

Custom CSS

And last but not least they have a custom CSS editor where you can easily customize your styles.

google amp custom css

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

amp for wp post

And here is an example of the blog home page.

amp for wp blog index

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

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

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

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

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

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/">

There is one more plugin however that you might consider installing. That is the free Glue for Yoast SEO & AMP plugin, developed by the Yoast SEO team.

yoast seo google amp

If you are already using Yoast SEO on your WordPress site you will want this plugin to retain your titles, meta descriptions, etc. As of writing this, it currently has over 10,000 active installs with a 4.2 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.

seo amp

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.

Disqus Comments with Google AMP

As of September 2016, Disqus comments are now compatible with Google AMP. Unfortunately there is no easy WordPress integration yet, but you can implement Disqus by using the amp-iframe component in your AMP page template. For complete details of the installation steps, check out the documentation on Github: https://github.com/disqus/disqus-install-examples/tree/master/google-amp.

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

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.