Google AMP: What Is It and Is It Right for Your WordPress Website?

Google AMP: What Is It and Is It Right for Your WordPress Website?

If you’re the kind of person who frequents the Bynext blog, we probably don’t need to impress upon you the importance of fast loading pages. Long loading times impact your bounce rate, and are one of the leading causes of people getting angry at their smartphones and cursing their internet providers.
There are literally hundreds of tricks and tools you can use to optimize your loading times for mobile, but the AMP Project is one of the most promising and ambitious methods aiming to tackle both this issue, and establish some basic design guidelines in order to make pages created with it be as accessible as possible.

The AMP Project stands for Accelerated Mobile Pages and today we’re going to talk a little bit about its history, guidelines, and how to create AMP pages using WordPress.

What Is the AMP Project?

A screenshot of the AMP Project homepage.

The AMP Project is an open-source initiative launched by Google in October of 2015 as a way to improve the overall performance of mobile websites. The project boasts its own lightweight framework – AMP HTML – and was designed to build super light web pages, thus cutting down on loading times.

While the AMP Project is by no means the only lightweight framework developed specifically for this purpose, it’s pretty safe to say that with Google’s backing, they’re in an enviable position. For example, sites developed using the AMP framework will be cached directly by Google at no cost to their developers (although they’re free to use other caching services if they choose to do so).

If lighting fast loading times and free caching aren’t enough to sweeten the deal, AMP-enabled pages also enjoy a boost in Google’s mobile results. The project also has the backing of other big name companies such as Twitter, Pinterest, Adobe Analytics, LinkedIn, and WordPress.com itself – who’ve all stated their plans with regard to AMP integration.

The downside to making your pages AMP friendly is that in order to do so, they must adhere to a number of strict guidelines, which may not be acceptable for everyone. If your website is already optimized for mobile browsing and was developed with best practices in mind, it should be pretty speedy already, so you may not see such a big benefit in that regard.

On the other hand, if you’re willing to take the plunge, the AMP Project guidelines are pretty well-documented, and making the switch isn’t that difficult – especially for WordPress users thanks to the magic of plugins.

How Does AMP Work?

Now the introduction is out of the way, let’s get into how AMP pages actually work.

As we mentioned earlier, the project uses its own framework, and this only allows for a limited set of technical functionalities, in order to cut down on bloat and fulfill its promise of speed.

AMP pages must follow a specific set of styling and layout rules to be considered compliant with the project’s guidelines and enjoy the perks offered by Google. As far as styling goes, AMP pages rely solely on CSS (with no external style sheets) – so you can’t use inline style attributes, and some kinds of animations are disallowed as well, in order to avoid performance issues.

 

While not allowing external style sheets can be considered a bit of a hassle, the project specifications explain that the performance increase gained by just including your CSS within the head tag is significant, and with AMP, every millisecond counts.

In order to add styles to a page you must use the <style amp-custom> tag, as seen in the example below.

<html>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html" >
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
/*Your CSS goes here */
body {
background-color: white;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello from the Elegant Themes team!</body>
</html>

There are a lot of default components to AMP pages that can be found on the AMP Project’s GitHub page of pre-made CSS styles. While the framework itself isn’t difficult to learn, some enterprising WordPress developers have already taken it upon themselves to develop plugins capable of taking your pages and converting them to the AMP approved format. Let’s give these plugins a look.

How to Integrate AMP With WordPress

The AMP plugin – discussed shortly – is pretty much the best choice for adapting your pages to the AMP standards at the moment. The alternatives listed below work as complements to the AMP plugin and offer additional functionality, which we will cover in their respective sections.

AMP

The AMP plugin header.

The AMP plugin automatically creates AMP versions of all your posts once enabled, and its setup process couldn’t be easier. It literally couldn’t, since there aren’t any customization options available once the plugin is activated. All you have to do is add /amp/ to the URL of any of your posts in order to access its AMP version – like this http://www.example.com/insert-an-imaginative-title-here/amp/ – et voila!

Depending on your permalink customization, you can also use ?amp=1 as an alternative to access the AMP versions of your post. This plugin limits itself to creating the AMP pages, but if you want your mobile users to be able to access them, you’ll need to make them discoverable by Google beforehand, which is a process we’ll cover in a bit.

While this plugin does only one thing (and it does it well) it also doesn’t allow for any customization, which can be a turn-off – and that’s where our next plugin steps in.

Custom AMP

The Custom AMP plugin header.

In order for this plugin to work properly, the AMP plugin must be installed and activated, since it changes some of the default configurations for generating AMP pages.

To be more specific, using the Custom AMP plugin will do the following:

  • Enable you to modify your site’s logo as it will appear on mobile devices
  • Add featured images to your posts
  • Show your WordPress comments section
  • Include related posts
  • Set a custom content width
  • Show a navigation menu
  • Set up Google Analytics
  • Add custom code to your posts’ CSS and footer.

Facebook Instant Articles and Google AMP Pages

The Facebook Instant Articles and Google AMP Pages plugin header.

While discussing the AMP plugin, we mentioned how despite handling the actual process of conversion to AMP standards, it didn’t set those pages to be viewed by mobile users by default. This plugin takes care of the submission process to Google for AMP pages and Facebook Instant Articles – but for now, we’ll just focus on the former.

As with Custom AMP, in order for this plugin to fulfill its duty, you must already have AMP-compliant pages, so we recommend using it together with the AMP plugin. Once you’ve installed it, you’ll need to head over to the Mobile Formats tab on your dashboard to complete the configuration process. The first thing you’ll see inside is a list of publishing choices including Facebook Instant Article, Google AMP HTML, and Apple News formats, which will be implemented soon. If you’ve already installed the AMP plugin, you’ll see a ready checkmark on the Google AMP HTML option:

A screenshot of the publishing formats included within the plugin.

The checkmark signifies that your content is ready to be sent to Google and appear in its search results, but the plugin also offers a lot more options that you may want to check out beforehand. For example, you can change your logo and modify the fonts used on your AMP pages in the Styling tab:

A screenshot of the Styling tab.

As you can see, this section also includes a handy little preview to show you how your pages will be displayed following the AMP protocols. All you have to do is choose which page you want to preview from the corresponding list:

A screenshot of the settings page.

Moving on, although the Custom AMP plugin can handle integration with Google Analytics, we recommend using this plugin to do so, since its interface is much more pleasant to work with. All you have to do is head over to the Analytics tab and link your account in order to enable it for your AMP pages:

A screenshot of the Google Analytics option included with the plugin.

The plugin also enables you to choose which kinds of publications (posts, pages, and projects) should work with AMP. By default, the AMP plugin only works with posts unless you use this plugin to configure it otherwise:

A screenshot of the settings page.

There is also an option for forcibly disabling plugins from AMP pages, which shouldn’t be necessary unless the AMP plugin isn’t working due to some compatibility issue with one of your active plugins. Finally, you can also enable AdSense integration for your AMP pages from within the plugin by linking your account from within the Ads tab.

Glue for Yoast SEO & AMP

The Glue for Yoast SEO & AMP plugin header.

Our last spot for this list of WordPress AMP plugins goes to Glue for Yoast SEO & AMP. This simple little plugin weighs only a few kilobytes and fulfills a simple, yet important function: that of making sure your AMP pages use the correct Yoast SEO metadata.

There is no complicated setup process either – all you have to do is set up the plugin and continue configuring your Yoast SEO options for each of your posts as usual, then let AMP and all the other plugins we’ve covered do their jobs in the background.

Conclusion

While integrating AMP into your WordPress website may seem like a bit of a hassle, with only a plugin or two, the process becomes incredibly easy and enables you to reap the rewards without hardly any work. And aside from the obvious benefits, it’s always a good practice to stay on top of the latest technologies to remain ahead of the competition.

All you need to do in order to successfully integrate AMP pages into your WordPress website is:

  1. Get acquainted with the basics of the AMP Project.
  2. Install the AMP plugin.
  3. Install the Custom AMP plugin and configure the style of your AMP pages.
  4. Set up Facebook Instant Articles and Google AMP Pages to make your AMP pages discoverable by Google.

What are your thoughts on the AMP Project, and is it worth all the fuss? Subscribe and share your opinions with us in the comments section below!

Bhardwaj Brothers
Founder
Hey Readers, Welcome to my blog ByNext. I'm Akash Bhardwaj, a professional-blogger from New Delhi, India.

I started ByNext as a passion and now it's empowering more than 500,00+ readers globally and helping them to make money with their blog.

Here at ByNext I write about Starting & managing a blog, WordPress, Social-media, SEO and Making Money online.

Leave a Reply

Your email address will not be published. Required fields are marked *