Improve User experience with AMP (Accelerated Mobile Pages)

AMP can make your WordPress website load faster on smartphones, resulting in a great user experience, increased traffic and improved search rankings. This post highlights how you can create AMP (Accelerated Mobile Pages) in WordPress.

What is Google AMP?

Google AMP is an open source initiative supported by leading technology companies like Google, LinkedIn, Reddit, Twitter etc. The goal of AMP is to make website pages load faster for mobile users. Despite several performance measures taken to improve website speed, many content-rich web pages still end up taking several seconds to load.

AMP Pages use minimal HTML and limited JavaScript by making the content to host on Google AMP cache. With that, when users search for something on Google Search and see your page then Google will serve AMP cached version of your page. These are similar to Facebook Instant articles but with difference that any unregistered user can read them and can be accessed from any web browser on a mobile phone.

Because AMP uses a limited set of HTML, CSS, and JavaScript; you cannot add additional features or widgets in your AMP Mobile Pages. Also, AMP supports only Google Analytics and not any other analytics platform. Same goes for advertising platform which is restricted to Google.

Creating AMP pages in WordPress

It’s fairly easy to create AMP pages in WordPress. First, install and activate AMP plugin. Then, go to Appearance >> AMP page to see how your webpages will look on mobile devices.

You can change Header background and text color on the mobile page. The header background color you choose will also be used for the link. The plugin can also help you to add logo or icons if your theme supports it. After making required changes, click on the Save button.

To see how your pages will look like, append /amp/ at end of page URL. To see the page http://www.walkwel.in/blog/app-store-optimization/, type it as http://www.walkwel.in/blog/app-store-optimization/amp/.

View the source code of your AMP page, press “CTRL + U”. The AMP code will look something like this

<amp-img src=”http://www.example.com/blog/wp-content/uploads/2017/04/loho.png”></amp-img>

If you don’t see an AMP page and instead are getting a 404-page error, then here’s what you need to do.

 1. Open WordPress Admin

2. Click on Settings

3. Click on Permalinks page

4. Click on Save Changes. Kindly don’t change anything here, just click on Save button. This will refresh your permalink structure.

AMP Pages in Google Search Console

You can easily track the performance of your AMP pages in Google Search. Login to your Google Search Console Panel, click on Search Appearance and then click on Accelerated Mobile Pages. Here’s a screen shot of our blog.

Google Search Console AMP

Google indexed 35 AMP Pages of our blog. It’ll be more/less for your blog depending on no. of articles. If you don’t see any AMP pages indexed in Google Search Console than don’t worry, it will take some time to index. You can also see AMP pages with critical errors in Google Search Consoles.

Customizing AMP Pages

The AMP plugin for WordPress comes with some basic customization options, which can be increased by installing some WordPress plugins. You can add entities such as related posts, footer widgets, social media icons etc. to your AMP pages.

If you are using the popular Yoast SEO Plugin than you can use Glue for Yoast SEO and AMP plugin for customization of AMP Pages. After installation of plugin is complete, go to Yoast SEO and click on AMP.

Click on Design tab to change AMP icon, default image, add extra CSS and extra code in <head> tag. You can also add Google Analytics Id on Analytics Tab. After all the changes have been done, click on the Save button.

End Note

When you’ve made all the changes, don’t forget to validate your AMP Page using the official Google tool: https://search.google.com/test/amp

You can also read more about AMP on its official website: https://www.ampproject.org/

Summary
Improve User experience with AMP (Accelerated Mobile Pages)
Article Name
Improve User experience with AMP (Accelerated Mobile Pages)
Description
Looking to get started with Accelerated Mobile Pages (AMP)? This article explains AMP and create AMP Pages in WordPress by using official AMP Plugin.
Author
Publisher Name
Walkwel Technology
Publisher Logo