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.
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 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 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.
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.
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.
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
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.
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 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 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 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.
Example of Kinsta AMP in SERPs
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 pages general options
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).
Under Page Builder, you can enable it to allow for AMP widgets to be used.
AMP page builder
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:
Under Single, you can enable social icons, disable links, show author bio, and even change options for related posts.
AMP single post
Get the next article in your inbox
Industry news, WordPress tips and Kinsta Blog updates included
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.
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.
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.
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
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.
The structured data screen lets you customize the default structured data logo and post image.
AMP structured data
The contact from screen simply lets you enable Contact Form 7 support.
AMP contact form
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.
Under the comments screen you can enable support for 3rd party commenting systems such as Disqus and Facebook comments.
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
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.
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
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.
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
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.
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 – 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:
Example on your AMP page:
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
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.
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
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.
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.
Kinsta is a premium hosting platform optimized specifically for WordPress, created by WordPress professionals.