Add AMP Pages to Your WordPress Site

How to Add AMP Pages to Your WordPress Site

If you have a moderately sized blog (50-100 articles), the process of adding AMP pages to your blog articles should take an hour or two – barring any issues. Let’s get right into the steps.

Add AMP Pages to Your WordPress Site

There are a few requirements here to follow the instructions below. First, you’ll need to be using the following plugins for this to work properly:

  1. Google Analytics for WordPress by MonsterInsights
  2. Yoast SEO for WordPress

You can use the free versions of each plugin to successfully install AMP Pages on your website.

The below items should be taken care of before adding any new plugins. You wouldn’t want to add a plugin configured for the latest version of WordPress without using that version and risk breaking your site.

  1. Create a Backup of your Site and Database.
  2. Ensure your version of WordPress is up to date – if not, update it.
  3. Ensure all of your plugins are up to date – if not, update them.
  4. Clear your cache.
  5. Ensure your website is functioning properly.
  6. Create another backup once all is seen to be working properly.

Finally, Installing AMP Pages…

After making sure your site is up to date and backed up properly, follow the steps below to add AMP pages to your site. The Yoast and MonsterInsights plugins work seamlessly with the plugins listed below.

  1. You’ll want to download each of these plugins to your local file directory and then upload them to your website.
    1. “AMP” by Automattic
    2. Glue for Yoast SEO & AMP
  2. Once they’ve been uploaded to your website, activate them both.
  3. Choose which type of content you’d like to be in AMP format. We chose “Posts” only since we’re not a news site and have a mobile optimized experience already for our main site pages.
  4. Update the styling of your AMP headers and content to match your branding.
    1. These settings can be found in the “SEO” navigation item in your left navigation of the backend of your WordPress website.
  5. AMP Icon: Add a 32 x 32 image that will show in the upper right hand corner of your page. Don’t use your favicon. We tried this and it doesn’t look very nice at all.
  6. Default Image: Create and add your default featured image (minimum 696 px wide) that will be added when no featured image has been added to a blog article.
  7. Tracking Code in <head>: If you’re using MonsterInsights, you shouldn’t have a need for extra tracking code unless you have a more advanced Google Analytics setup like cross-domain tracking.
  8. Extra CSS: You can add more styling elements if you so choose.
  9. Proofing: From a mobile device, go to a blog article and add “amp/” at the end of the URL. If all went well, you should see your AMP formatted blog articles.

The great thing about this plugin configuration is that based on the type of pages & posts you choose to be AMP pages, the configuration that Google Search Console requires is automatically added in the head of your chosen pages and posts.

AMP & the Google Search Console

Once you have your setup complete and have checked a few pages on a mobile device, you’re ready to submit your AMP pages to the Google Index.

  1. Make sure you’re logged into the Google Search Console with the email associated with your website.
  2. Choose the version of your site that Google is indexing from your list of websites.
  3. In the left navigation choose “Search Appearance > Accelerated Mobile Pages”
  4. You should see a blue button that says “Get Started with AMP”. Click this button.
  5. Once you’re on the help page, you’ll see the steps you need to take – start with “Validation”. Or you can get to the AMP Validation Test here.
  6. Enter your AMP URL (post that ends with “/amp/” into the validator and click “Run Test”. If you’ve setup the plugins and configuration correctly, you should see something like this:

Submitting AMP Pages to Google Console

To see how your page will show in search results, click “PREVIEW SEARCH RESULT”. If you don’t like how the featured image shows or want to change the title, do it now. Once you’re happy with how this looks, click “SUBMIT TO GOOGLE”.

After doing this process to a few of our blog articles, it took 2 days to start seeing AMP pages being indexed by Google. Since we have a lot more than 6 blog articles, we’re going to submit a few pages each day, yet Google will eventually recrawl the whole site and all should be detected properly.

If you do see any issues, click the double chevron on the right side of the row for Google to tell you what the issues are.

Things We Don’t Like About this AMP Setup:

Disqus doesn’t work with it. If a user wants to leave a comment, they’re redirected to the original site page for the article and have to scroll to the bottom to leave a comment.

Loss of Navigation. There’s no way to direct them deeper into your site – except for the small 32 x 32 image at the top of the page which takes them to your site homepage.

User Setup. If you don’t have an author setup properly and are just using the “Admin” login, it will show “Admin” as the author of the article and a blank spot instead of your author image.

Powered by WordPress link at bottom of page. We’re not sure why this was added, yet if you are handy with editing basic PHP, this is an easy fix. Simply go to “Plugins > Installed Plugins” and click the “Edit” button under the “AMP” plugin. The second Plugin file down is “amp/templates/footer.php”. Click on the hyperlink for this file in the right navigation in this view. You should see this. We outlined the link that needs changed below.
remove wordpress link from AMP plugin
We decided to change this link to drive users to our contact page by changing the following code in that link:
change wordpress link in AMP plugin footer
Remember, in order for this to resolve properly, clear your cache after making the code change and clicking “Update File”. And Voila! Our AMP pages now drive users to our main call to action instead of off the site.
updated wordpress link in AMP plugin footer

If you need a hand with the AMP setup for your website, please feel free to reach out to us. We’re always glad to be of assistance!