How To Set Up AMP Pages For WordPress
by John Saunders •
Are you familiar with the initials AMP? If you have a mobile site, you should be.
In this post, we’ll get into what AMP pages are and how to set them up in WordPress. Let’s dive right in.
What Is AMP?
AMP stands for Accelerated Mobile Page, which is a way make your website(s) load faster on mobile devices. Since most people are browsing online with their phones these days, having faster-loading websites can greatly improve your user experience and lead to more site traffic.
Reading on the web can be slow for many mobile users, especially on pages that have a lot of rich content, which may take several seconds to load before they can be viewed. This even in spite of the fact that you’ve done everything you can to optimize the speed of your web pages. Google created AMP to help do the work for you.
Google’s AMP is an open-source initiative that is part of their mobile-first index. It greatly improves your mobile experience by dramatically speeding up the load time of your website.
Most strategies to improve your page speed involve optimizing your existing website, but Google actually creates a separate, lightweight version of your URL to serve your web page on mobile.
Google’s AMP helps to speed up your website for mobile by stripping out the fluff and using bare-minimum HTML and limited Javascript. This process allows for your site to be hosted on the Google AMP cache. The cached version can then be served to a web browser instantly if they click your link in search results, eliminating the time they’d otherwise spend waiting for the page to load, and giving them a better user experience.
When your page loads instantly, it creates a good relationship with the site visitor. The only problem is, these AMP mobile pages don’t automatically display to your visitors when they are browsing on their phone. Google Search will control them in results. You may even notice that some search results will have an AMP symbol beneath them, which indicates that you will be viewing a streamlined version of the original site.
Google AMP is similar to Facebook Instant Articles but is not limited to a single platform, whereas Instant Articles can only be accessed via Facebook’s mobile app. Beyond Google, AMP is currently being used by sites like Twitter, LinkedIn, Reddit, and more.
Related: AMP Pages: Why They Matter
Why You Should Set Up Google AMP For Your WordPress Site
AMP can be extremely effective if your blog is hosted by WordPress, as it helps make your content much more easily readable on mobile. This is important because as we mentioned, it’s likely that most people are reading your content on their phones.
There are several potentially positive effects of having a page load faster on mobile. The first potential benefit is driving more organic traffic to your site. While Google AMP is not yet a ranking factor, it can still boost your search engine rankings by giving you more impressions in results, which can affect your rankings. By enabling Google AMP, your site will be more likely to be placed above the fold in the results page on mobile, making it more likely people will click on your page rather than having to scroll down to find you.
Having a faster mobile website also reduces how often people will abandon your page while waiting for it to load. Page abandonment is directly related to a reduction in revenue. If your mobile pages take too long to load, people will change their minds about buying something from your site. So it pays to have the extra speed!
But Google’s AMP isn’t without a few limitations. For instance, because it strips so much out to make for a faster experience, it means certain widgets and dynamic scripts won’t work on your new slimmed-down mobile version. AMP is also only supported by Google Analytics, and will not work for any other analytic platforms. The same goes for advertising platforms, as AMP only allows a few. If you depend upon advertising for revenue, this may be a major hang-up for you. However, overall, AMP greatly improves your page speed and can boost SEO, which outweighs its potential cons.
Related: Google AMP Update for 2018
How To Set Up AMP Pages For WordPress
Thankfully, the AMP set-up process is fairly straightforward.
Step 1: Install & Activate Your AMP Plugin(s)
The first thing you’ll need to do in order to enable Google AMP is to install the AMP plugin on your site. You’ll find the plugin listed as AMP plugin by Automattic. This is the base plugin to make the whole thing work.
Once installed, the AMP plugin will automatically generate AMP-compatible versions of your posts. You can access the AMP version of your posts by adding /amp/ to the end of any of your URLs. You should note here that we are saying posts, and not pages, because only the posts will be AMP-compatible with the base plugin. You need to install the additional AMP for WP plugin to gain more functionality with your pages. This add-on has Google AdSense Integration, a drag and drop page builder, and allows you to create AMP content that will differ from standard mobile pages.
It’s also a good idea to install and activate the Glue for Yoast SEO & AMP plugin in addition to the AMP plugin. You can get the AMP plugin without it, but the Yoast plugin is vital if you are serious about maximizing your SEO. This plugin will allow you to make your posts, pages, and media within the pages AMP-compatible, and ensure the correct metadata is pulled. This also will allow for further customization of your AMP mobile pages.
Step 2: Set Up Google Analytics
To set up your new AMP pages for Google Analytics tracking, log in to Google Analytics, and locate your tracking ID. You’ll find this by clicking the gear icon at the bottom left, then Admin —> Account —> Property —> Tracking Info —> Tracking Code. Here you’ll find your tracking ID, which should begin with UA. Copy this code, the log in to WordPress and go to AMP —> Analytics, and paste your tracking ID where you see “Google Analytics.” Save your changes and you should be all set.
Step 3: Configure Your Plugin Settings
Next, you’ll want to set up your plugins to get the most use out of them. If you have chosen not to install Glue for Yoast SEO you can skip this step, but again, you really should add this plugin to maximize your SEO.
The Yoast SEO plugin will help you to customize how your AMPs will look and feel, and also enable AMP support. You can choose what types of posts you want to be AMP compliant, apply CSS styling, apply a custom AMP icon, and more. You can also edit your automatically-created standard meta tag to let people know they are on an AMP page.
Step 4: Test Your AMP Setup
To make sure your AMP URLs are working properly, you’ll want to test out all of your new links. This is extremely important because if they aren’t correctly configured, they won’t show up in Google search results. This does protect you against displaying an AMP page that doesn’t work, but since your intention is having a functional page, it allows you to fix any issues you have.
As we mentioned earlier, you can add /amp/ to the end of any of your associated pages to test them out, or Google even provides a test site to make this process easy on you. Go to https://search.google.com/test/amp drop in your URL, then click “Run Test,” to see whether it comes back valid or invalid.
If you’re browsing with Google Chrome, you can also test your AMP pages using the developer console. Here, you’ll open your page, then add #development=1 to the end of the URL. Then open your Chrome Dev Tools Console, which can be found in Menu —> More Tools —> Development Tools —> Console. You can then check for validation errors.
A third option is to use the AMP Validator at https://validator.ampproject.org/. Here you’ll paste your AMP URL in the URL field and click “Validate.” The tool will then highlight any errors with the page and flag them for you in the HTML code.
When you run the test through Google, you should be able to submit your more important pages to Google for indexation.
Step 5: Test Your Page Speed
Once you’ve gone through to troubleshoot your pages for errors, you can test your page speed to see if your work has paid off. You can use a page speed tool like WebPageTest to run your pages and compare the results.
And that should be it! Adding AMP to your pages can be a huge step to improving your speed on mobile, as well as boosting your SEO. As page speed moves closer to becoming a mobile ranking factor in Google’s mobile-first index, you’ll want to make sure your pages are moving up the results and providing the optimal user experience, rather than being shuffled down the pile.
