Google AMP – How to Implement it in WordPress

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.

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.

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.

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.

Another reason to not use Google AMP –> You lose your brand 🙂 cc @HuffingtonPost you might want to think about it 🙂 pic.twitter.com/n3LEHIOEBZ

— Syed Balkhi (@syedbalkhi) January 19, 2017

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.

So @maileohye confirmed that in a situation where there is desktop and AMP, Google will index desktop for mobile first. #StateofSearch

— Jennifer Slegg (@jenstar) November 14, 2016

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.

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.

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.

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.

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.

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

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

Page Builder

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

Design

Under Design, you can launch the post builder or select from a pre-designed template. You can turn on 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;}

Single

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

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 (suggested reading: How to Add Google AdSense to WordPress).

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.

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.

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.

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.

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.

Contact Form

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

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.

Comments

Under the comments screen you can enable support for 3rd party commenting systems such as Disqus and Facebook 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.

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.

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

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.

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.

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.

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.

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.

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

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.

New Relic Monitoring with Google AMP

It is also important to note for customers using New Relic monitoring (license required), 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.

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.