Quick Guide for Setting up AMP on WordPress

In today’s world, everybody has a mobile device. If it’s not a phone, it’s an iPad, or some variation of. Having pages on your site that load quickly are essential to keep up with this trend. Slow page speed has even been shown to have an effect on overall revenue and an increase in page abandonment.  Users expect mobile sites to load quickly, just as quickly as when using a desktop computer. Amazon has even done a study that shows as little as one second slower page load accounted for a $1.6 billion dollar decrease in revenue.

AMPs or Accelerated Mobile Pages have become the standard for how a fast loading page should be built. AMPs are able to load 15%-80% faster than standard mobile pages and they do not sacrifice functionality.  With that in mind, here is a quick guide to enable AMP for WordPress.

The first step is to install and activate your AMP plugin or plugins. This plugin will automatically generate AMP compatible versions of all you posts. It is important to note that only your posts and not your pages will be AMP compatible with this plugin. You will need an additional plugin such as:

AMP for WP — Accelerated Mobile Pages

Or

Glue for Yoast SEO & AMP

The second step is to set up Google Analytics. To do this you will need to find your tracking ID. Log into Google Analytics and click the gear icon at the lower left. This will bring up the Admin panel. Select the ACCOUNT and PROPERTY from the drop-down menus and then click on Tracking Info under the PROPERTY column. Then click Tracking code to see your tracking ID which will begin with UA.

After copying this ID, log into WordPress. On the left hand menu find AMP ANALYTICS and paste your tracking ID here. Finally hit SAVE CHANGES.

The next step is to configure plugin settings. Using these recommended configurations will allow you to customize the look and feel of your AMP pages and also enable support for various content types.

Go to Yoast SEO>AMP>Post Types. You can now select the types of posts that should be AMP compliant.

On the second tab, DESIGN, you can customize the look and feel of your AMP pages. Apply CSS styling, customize content and colors, upload and AMP icon or set a default image for pages that don’t already have an image are among the functions you can utilize here.

The 4^th step is to test your AMP setup. It is important to make sure that these URL’s are working properly. If they are not configured correctly Google will not display them in search results. There are a couple of solutions to test your pages:

• Go to https://search.google.com/test/amp
• Drop your URL in here and click “Run Test,” then note the outcome (valid/invalid).

Another option is to use the Developer Console.

• Open the AMP page in your browser
• Append #development=1 to the URL
• Open Chrome Dev Tools Console (in the Chrome Menu, select More tools> Development tools, and then click the “Console” tab) and check for validation errors.
• If everything is correct, validation should be successful.

A third option would be to use AMP validator.

• Go to https://validator.ampproject.org/
• Paste the AMP URL in the “URL” field and click “Validate.”
• This tool will highlight any errors and flag them in the HTML.

Step #5 is to submit your most important AMP URL’s for indexing. If you happen to be using the AMP test in your Google Search Console then you can click the ‘Submit to Google’ button once you have run the test on the page. You can search for “submit to Google” and submit the URL directly within the Google search results. It is not required to submit your AMP pages to Google, but if you don’t Google will only index your AMP page if it is internally linked to or listed in the XML sitemap.

Step 6 is to use the Google Search Console to look for errors.

• Log in to Google Search Console.
• Under Search Appearance, click Accelerate Mobile Pages.

From here you will be able to see how many of your AMP pages are being indexed and if any have critical issues. If any do have issues, you can troubleshoot them using the tools in the previous step.

The last step, #7, is to test page speed. This is where you can see that your work has paid off. Use a page speed tool such as WebPageTest and compare the results.

Page speeds are getting closer to becoming a mobile ranking factor. By using the above steps you can quickly and easily enable AMP pages for your WordPress site.

Need help setting up AMP on your WoordPress site?  Get in touch with us today.