Tutorials

How to Implement Google AMP For Your WordPress Site?

Google introduced the AMP project back in October 2015. AMP is the shortened form of Accelerated Mobile Pages. With this project, Google wants to improve the mobile browsing speed and offer an enhanced user experience for the mobile internet users.

If you frequent SEO forums and internet marketing blogs, the chances are high that you have heard about AMP already. But have you applied this on your website? I know there are lots of people who are still confused by the term. They don’t have any clear idea about what AMP does, why it’s important, and how to implement it on a WordPress site.

Today’s tutorial is aimed at those people. After reading this detailed tutorial, you will have a clear idea about AMP and how to use it on your WordPress site.

Let’s get started by knowing what AMP is.

What is AMP?

Google AMP Project

As I said in the introduction, AMP project is aimed at ensuring the fastest loading speed possible for mobile devices. These days, most people access the internet from mobile devices. And what’s more, a significant number of these people are using slower internet connections. Therefore, the traditional pages take a long time to load on their devices.

Google AMP plans to change that by stripping out the fancy designs and applying other advanced techniques. However, the stripping down doesn’t involve the main contents. That means both the original version and the AMP version of a page will offer the same information. They will differ in presentation, content styling, sidebar location, media presentation, and obviously, in loading speed.

AMP has its lightweight framework named AMP HTML. The framework is specially developed and continuously being optimized to ensure the fastest possible page loading time for mobile devices. However, you won’t have to worry about the framework because there are dedicated plugins for using AMP on WordPress sites.

I’ll show you how to use AMP on WordPress in a minute. Before I do that, let’s find out why you need to use AMP.

Why is AMP Important?

Google is expected to provide more importance to the AMP pages in mobile search results. And that’s the most important reason why you need to use AMP on your website. It was already a fact that Google was promoting the mobile-optimized pages to the upper position for mobile visitors. And now with the AMP project, it has become more important than ever.

Theme Banner

Page Load Speed Importance

The faster page loading speed will also have a positive impact on your conversion rate and the overall user experience of the website. This is evident in a recent post by Google itself. According to that post, the average mobile landing pages take 22 seconds to load, while 53% of mobile visitors will leave a page if it takes more than 3 seconds to load.

Using Google AMP can help you deal with this problem in an efficient way. And to further sweeten the deal, you will get free caching from Google. The AMP Cache is a professionally developed CDN which continuously fetches the AMP pages and caches these for improving the website’s mobile performance. Thanks to the integrated validation system, you can rest assured that the pages will load perfectly every time.

How Do AMP Pages Look Like?

At this point, you have a clear idea of what AMP is why it’s important. But do you know how do AMP pages look like?

If you use your mobile device for browsing the internet, you might have noticed tiny flash signs along with “AMP” mentioned before the search results. These are the AMP pages.

In case you didn’t notice the AMP pages yet, search for “Google AMP” from your mobile device. The resulting page will include several AMP page like the following –

AMP Example

Any search result with the tiny flash and “AMP” text is following the AMP framework. These pages will load a lot faster than the other search results.

Want to have that blazing-fast loading speed for your website too? Check out the following sections, and you will find out the whole process.

How to Use AMP on WordPress?

There are two steps to using AMP on a WordPress site –

  • Install the AMP plugin and
  • Install other plugins for more options.

Let’s have a more in-depth discussion about these steps.

The first step is to install and activate the AMP plugin created by Automattic. Using the plugin is very simple. It couldn’t be simpler than this because you won’t have to do anything at all. Once you activate the plugin, it will automatically create the AMP versions of your posts.

Amp Plugin WordPress

You can check out the AMP versions of your posts by adding “/amp” after the post URL. Let me give you an example. Say, this is the URL of a post on your site –

http://www.yoursite.com/be-positive/

The URL of the AMP version of this page will be –

http://www.yoursite.com/be-positive/amp/

And if you are still using the plain permalink structure, you can find the AMP URL by adding “?amp=1” after the regular URL. That means the URL for the AMP version will look like this –

http://www.yoursite.com/?p=123?amp=1

That was the first step. Now, let’s take a look at the other plugins for managing the AMP pages.

Managing AMP with Plugins

Now that you have installed the AMP plugin, you are ready to use other plugins for managing the AMP options. There are several plugins available for that purpose. I will discuss the top 3 plugins among them.

1. Glue for Yoast SEO & AMP

Glue for Yoast SEO & AMP

Developed by the Yoast team, this plugin integrates AMP with the highly popular Yoast SEO plugin. Once you install and activate the plugin on your website, you will find the plugin’s settings options at the SEO -> AMP page.

Glue For Yoast Settings

The settings options are divided into three sections. The “Post Types” section allows you to control which post types should have AMP support. While regular posts will be enabled by default, you can enable custom posts types too.

The “Design” section allows you to set a default featured image and the colors for various elements like the title, text, post meta info, link text, link hover, and blockquote colors. You will also find separate fields for providing custom CSS and adding custom code to the header. The “Analytics” section includes a single field which allows you to add Google Analytics tracking code.

2. Custom AMP

Custom AMP is a complementary plugin which offers additional features to the original AMP plugin. The plugin will create a new menu item titled “Custom AMP Panel“, where you will find the available options.

Custom AMP

There are separate fields to upload the AMP logo and the metadata logo for the mobile visitors. You can perform other actions like adding featured images, displaying comments, showing related posts, adding right-to-left direction by using their respective checkboxes.

Custom AMP Settings

Custom AMP also allows you to show a custom content width for your AMP pages. Thanks to the menu selection feature, you can choose which menu should be displayed on the AMP Pages. There is a dedicated field for providing the Google Analytics code. Last but not the least, the plugin also makes it very easy to apply custom CSS and add custom HTML code to the footer.

3. Facebook & Google AMP Pages by PageFrog

Facebook & Google AMP Pages by PageFrog

The PageFrog plugin works independently of the AMP plugin. And as you can guess from the title, the plugin supports both Google AMP and Facebook Instant Articles formats.

To use the plugin, you have to enable the desired format(s) from the Mobile Formats -> Setup page. You will find the configuration options at the “Settings” page. You can choose to enable AMP for all the existing posts and the future posts. The plugin also allows you to show the featured image on the AMP pages.

The “Styling” page includes all the customization options. You can upload a custom logo, and select the fonts for title, article heading, body, quotes, and footer. It is also possible to choose the color for all of these fonts. After making all the changes, click the “Save Settings” button. The “Preview” section on the right will show a live preview of the changes.

The plugin comes with a handy preview feature. You can use this feature to check out how your posts will look as AMP and Instant Articles. The preview pane will be available on the right sidebar of the post editor.

The PageFrog plugin also allows you to show AdSense ads and enable Google Analytics, or other analytics on the AMP pages.

Over to You

In line with the current trend, it can be said that the future is mobile. That means website owners need to put more focus on making their sites as much mobile-friendly as possible. Enabling AMP could be a big step towards that goal.

Now that you have read this in-depth tutorial about setting up AMP on your WordPress site, you are ready to go. Install the necessary AMP plugins, configure them, and enjoy the nice boost in the mobile page loading speed.

How to Implement Google AMP For Your WordPress Site?
5 (100%) 11 votes

1 Comment

  1. Drew

    Great content WPDean, I will be using this valuable information on my websites.
    Thanks

Leave a Reply

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!