Configure WordPress Posts for AMP: Accelerated Mobile Pages

I just got around to configuring my site for AMP: Accelerated Mobile Pages. While it was pretty easy, I had to dig to find out how to get Google Analytics on my AMP pages. The following post describes how to configure WordPress Posts for AMP: Accelerated Mobile Pages.

If you’re not familiar with AMP, it’s Google’s technology to speed up page load time on mobile devices. Basically, the AMP format strips out a lot of formatting and bloat to create super fast loading pages. Unfortunately, it will also strip out most of your website styling. But like it or not, you probably need to use it because Google will favor AMP pages in search results.

Configure WordPress Posts for AMP: Accelerated Mobile Pages

Install the Plugins

1. If you don’t already have it, download and install the Yoast SEO plugin.
   This plugin has a LOT of settings. For help with the setup, see this setup guide for the Yoast SEO plugin.
   Click here for instructions on how to install WordPress plugins.
2. Download and install the AMP plugin. There are no settings for this plugin
   Click here for instructions on how to install WordPress plugins.
3. Download and install the Glue for Yoast SEO & AMP plugin.
   Click here for instructions on how to install WordPress plugins.
4. Go to Settings > Permalinks and click Save Changes. It is necessary to do this so your AMP urls will work.

Configure Glue for Yoast SEO & AMP plugin

The Glue for Yoast SEO & AMP plugin allows you to specify some basic styling like header color, link and text color, logo and default image.

1. From the WordPress admin screen, go to SEO > AMP.
   The Post types tab is displayed.
   
   By default, Posts are enabled. Leave these settings as is since there is no support yet in the AMP plugin for pages.
2. Click the Design tab.
   
   Here you can specify design colors. You also upload an AMP logo and default image that is used when the page or post does not have an image associated with it. With both images, pay attention to the image size specified for each of those images.
3. Click the Analytics tab. Here you can enter a special AMP analytics code.
   Important: You cannot use the standard Google Tracking Code. See Adding Analytics to your AMP pages for details.
   
   Below is the AMP analytics code you need to insert into the Analytics code field.
   Change UA-XXXXX-Y to your google property code

4. In order to get this code, go to your Google Analytics account and get the tracking ID for your Google Analytics Account. Google recommends that you create a new Property so you can specifically track AMP pages, but you don’t have to.
5. In order to get the AMP Google Analytics to work, you need to add the AMP Analytics script to the AMP template header. To do this, add the following code you your theme’s functions.php file:
   

   Click here for more information on modifying the AMP template.

6. Save the functions.php file.
7. If you have a cache plugin installed, clear your cache now.
8. To test a post for AMP styling, add /amp to the end of the post url; for example:
   https://writenowdesign.com/blog/wordpress/wordpress-how-to/change-wordpress-user-role-capabilities/amp/
   Below is an example of an AMP page on my site. Notice that I changed the header color, the header logo, the link and text color.
   
9. Go to https://validator.ampproject.org/ to test your AMP page and make sure it’s valid. You need to use the amp url structure; for example, http://mysite.com/new-post/amp
   For more details about validating AMP pages, see Validate AMP Pages