Setting up WordPress for AMP (Accelerated Mobile Pages)

Posted on November 10, 2016 by Tesla in WordPress | 4 comments | 4136 Views

In terms of technology and living digitally, we are living in the era of WordPress.

And when talking about WordPress, speed is the number one requirement. Every website owner wants to accelerate their web pages as much as they can, and it’s all because people nowadays expect websites to load within seconds.

From choosing the best WordPress hosting to using the recommended plugins for WordPress, there are hundreds of tricks that can speed up your website.

Let’s assume that you have an optimized WordPress website and it works perfectly on desktop devices. However, you must be worried about mobile phone visitors on your website. No one can deny the fact that smartphones are essential nowadays. Almost everyone owns one with internet connectivity, either through WiFi, 2G or 4G, etc. But how do you cater the people whose connectivity may not be strong or reliable enough?

If the thought has crossed your mind, then worry not. We’re going to answer this important question for you today!

Facebook Instant Article, anyone?

We’re sure you must heard about Facebook Instant Articles, a project designed specifically for the Facebook app. If you have installed FBIA on your WordPress website, your visitors will see a new screen pop up immediately with your site’s content.

It boosts the page load performance for mobile users by hiding unnecessary content from your site and displaying only the required content.

Sounds awesome, right?

But, don’t forget that it only works if someone visits your site from the Facebook app on mobile devices only.

Accelerated Mobile Pages

Google, the search engine giant, also started a similar project in October 2015, named AMP (Accelerated Mobile Pages).

Automattic, the agency behind WordPress.com, also started contributing to make WordPress compatible with AMP. AMP works like FBIA, albeit with a few differences.

In contrast to FBIA, AMP works on all mobile phone devices. When a user searches from a mobile device using Google search, the search engine prioritizes websites integrated with AMP.

AMP’s core elements is now broken down into three sections after the overhaul of their core elements that define how the website structure their pages. Here they are:

AMP HTML:  This redesigned HTML version has a new set of AMP custom commands.

AMP JS: The new Javascript allows loading external resources separately.

AMP CDN (Content Delivery Network): This will quicken your delivery of your AMP optimized content by caching it.

TL’DR for FBIA & AMP

FBIA, developed by Facebook, is the new mobile format that delivers your content swiftly if someone visits your site from the Facebook app.

AMP, developed by Google, is another mobile format that swiftly delivers content if someone is accessing your site from Google, Twitter, Pinterest, and LinkedIn, etc.

Setup WordPress for AMP

Let’s get started on how you can easily integrate AMP on your WordPress!

Install AMP on WordPress

There’s no need for technical knowledge to integrate AMP on WordPress. All you have to do is install the AMP plugin on your WordPress from the WordPress directory.

Login to your WordPress Dashboard, and from the left pane, navigate to Plugins -> Add New, and search for AMP. Click on Install and activate it.

You know what? You’re done!

installing amp on wordpress

By default, the AMP plugin dynamically generates another version of your posts, so you don’t need to configure the settings. Just install it and your WordPress site is ready to support AMP. It will create another URL of your post adding /amp at the end. If pretty permalinks are not enabled, add ?amp=1

For example:

If your URL looks like https://example.com/post, then your AMP URL will be https://example.com/post/amp. You can also verify this by visiting the URL to see if it’s working or not.

Without AMP

without accelerated mobile pages

With AMP

accelerated mobile pages

Customization in AMP version posts

AMP, once installed, is ready to start working on default settings of your AMP version post. You do, however, have the option to customize it a bit by navigating to Appearance -> AMP.

customize accelerated mobile pages

Seems like the plugin doesn’t give you a lot of options to customize, though, as you may want to add few more functionalities to your AMP version. Not to worry! Here is an outstanding plugin in the WordPress repository named “Accelerated Mobile Pages” that cuts down AMP standards and allows you to customize AMP versions of your posts according to your own needs.

The default AMP version might not be compatible with your theme. You can, however, ask your theme provider to make it compatible with AMP. Here are the features that Accelerated Mobile Pages plugin can give you:

Setting up accelerated mobile pages

Apart from the ones shown in the image above, here are the additional features listed below:

Features:

  • NEW – Related posts below the post
  • NEW – Recent Comments list
  • Automatically integrate AMP to your website.
  • Google Adsense (AMP-AD) Support with 4 different Ad slots across the layout! The First Plugin to have this capability.
  • 7 Advertisement sizes
  • Google Analytics Support.
  • User Friendly Theme Options Panel.
  • Unlimited Color Scheme.
  • Image Logo Upload.
  • Supports Posts and Pages.
  • Proper rel canonical tags which means that Google know the original page.
  • Overlay Navigation Menu bar.
  • Social Sharing in the Single.
  • Separate WordPress Menu for AMP version.
  • Page builder & Shortcodes Compatibility.
  • Carousel support for Gallery.
  • Better Image stretching and resizing.
  • Youtube Video Embed Support.
  • Vine Embed Support.
  • Twitter oembed Support.
  • Instagram Embed Support.
  • Facebook Video Embed Support.
  • RTL Support
  • Custom AMP FrontPage
  • Notifications
  • Great Support & Active Development

Sounds good? I know it does!

To install, go to your WordPress Dashboard and from the left pane, navigate to Plugins -> Add New, and search for Accelerated Mobile Pages. Install and activate it.

installing accelerated mobile pages

SEO friendly:

You may have read or heard that Google favors websites that load faster. Aside from optimizing your website for desktop, you should also keep your mobile audience in mind since they are increasing in number day by day. If you have AMP on your site, Google will prefer your domain over others when someone searches for a keyword relating to your article. This way, AMP will help you rank higher in Google Engine Results dramatically!

You can fulfill your SEO needs with plugins like Google Analytics, and advertising with Facebook Instant Articles and Google AMP Pages etc. It can be used for FBIA and AMP both.

Features:

  • Increase traffic and discoverability
  • Boost engagements and shares
  • Content Optimization
  • Quality Assurance
  • Branding and Styling
  • Analytics and Insights
  • Ads and Monetization

The installation and activation process is the same as other plugins. After successfully installing and activating, you’ll have a new panel in your WordPress Dashboard named Mobile Formats. Navigate there and customize according to your own requirements.

Since we have already integrated AMP, you’ll see that it’s Ready.

accelerated mobile pages

This plugin has a special feature to Preview posts. When you are adding a new post, it will generate a preview once the post is saved as draft. As you can see in the image below, it also generated a unique URL that can give you a preview on your mobile phone.

accelerated mobile pages formats

Styling:

There are other options as well to customize your posts the way you want to. From the left pane under Mobile Format, select styling and you’ll see a page similar to the one shown below. You can customize from here too. You can also see a preview of your posts once changes are made. Don’t forget to save all changes once you’re done!

AMP for WordPress

Analytics:

Beneath styling, you’ll find the tab for Analytics. This feature lets you connect your WordPress to Google analytics or a tool of your choice. Here are the options that are available:

accelerated mobile pages analytics

Monetizing:

You might be worried about not being able to show advertisements on AMP posts. The solution is already integrated within the plugin. Just go to Ads under Mobile Formats and connect your Google account with it. Follow the on-screen instructions to advertise on your AMP version blog posts. Easy as pie!

accelerated mobile pages monetizing

Just below Ads, you’ll see the Settings tab that describe the settings below. Just remember one thing we’ve already told you about; Currently, AMP does not support Pages and Archive. They’re working on it and it will be available soon. Don’t get confused with pages in the settings below.

accelerated mobile pages mobile html

Conclusion

Google emphasizes on user readability and experience. For that, speed is becoming more important for Search Engine Results Page day by day. In order to stay on top of your game, we recommend that you optimize your WordPress website as much as you can. It will help you in ranking higher in search engine results on desktop devices. For mobile users, install AMP, and you are good to go!

Google has also provided a complete document on how to get started with AMP. If you have any query, feel free to discuss by using the comments section below.

Author Bio:

Mustaasam Saleem

Mustaasam Saleem is a WordPress Community Manager at Cloudways – A Managed WordPress Hosting Cloud Platform, where he actively works in learning and sharing knowledge with the WordPress Community. When he is not working behind his computer screen, you can find him playing squash with his friends, or defending in Football and listening to music. Connect with him on Twitter:  or Email.