What's WP
Our everything is about WordPress - best choice of WordPress users!
How to Integrate the AMP Project with WordPress?

How to Integrate the AMP Project with WordPress?

Nowadays, there are an increasing number of people using smartphones, phablets, or tablets to get information. However, the page loading speed on these mobile devices is usually clunky and frustrating, which in return breaks readers’ browsing momentum as well as damages the interests of content providers.

That’s why Google comes to the rescue by launching the project of Accelerated Mobile Pages or AMP for short. In this post, we will provide an in-depth introduction to the AMP project and some detailed guidance for you to integrate it in WordPress if you are exactly running a website on this popular CMS platform.

What Is AMP?

AMP is a new open-source initiative launched by Google in October 2015 with the mission of dramatically improving the performance of the mobile web. It primarily consists of the following three parts.

  • AMP HTML: an HTML file with some AMP-specific tags, elements, and restrictions.
  • AMP JS: a JavaScript library aiming to ensure a fast rendering of your AMP HTML pages.
  • Google AMP Cache: a proxy-based content delivery network that can fetch and cache AMP HTML pages as well as make some performance optimizations automatically.

Similar to Facebook Instant Articles, the AMP project is designed to deliver rich content web pages along with smart ads in a fast and highly streamlined manner. However, while the former project is developed for the Facebook mobile application only, AMP can work smoothly on multiple platforms, making it possible for visitors to load the website contents instantly regardless what mobile devices they are using.

AMP is a project that Google stands behind. Despite the fact that the project is currently in its infancy, it can be predicted that Google will make the AMP optimization mandatory and even penalize those non-accelerated pages. Against this background, you will be obliged to integrate this project with your SEO strategies sooner or later.

How to Get Your WordPress Site AMPed?

Being widely favored by newbies and web professionals alike, WordPress is an excellent platform for you to get your hands dirty with AMP. To tell the truth, it is fairly simple to accelerate your WordPress web pages for mobile devices at the bare minimum by following the instructions below.

Step 1 – Initialize the official WordPress AMP plugin

The very first thing you need to do is logging into your WordPress site’s back end and install the AMP plugin by Automatic/WordPress through “Plugins” > “Add New”. Alternatively, you can visit GitHub, search for the plugin, and download its ZIP file to the WordPress site of your own.

AMP Plugin

When the plugin is enabled, it will create an AMP version for each of your WordPress posts. There are no more settings to configure. All you need to do is appending “/amp/” to the end of a post’s URL and you will see its AMP version. If you don’t have beautiful permalinks yet, add “? amp=1” instead.

Step 2 – Validate your AMP pages and their schema markups

Having multiple AMP pages being ready, you need to confirm whether they are guaranteed to work without depending on any external resources. In regular, this can be done with Google Search Console , the tool that can pick up the AMP versions of your WordPress posts through the rel=”amphtml” tag appended by the AMP plugin.

However, the problem is that Google Search Console usually takes up to several days for detecting and showing up the changes that you’ve made to your AMP versions. In this case, we suggest you use the tool above along with Chrome validation process.

Simply navigate to one of your WordPress AMP pages, open it in Chrome, and then append “#development=1” to the end of its URL. In the next, press “Ctrl+Shift+I” to open Chrome Developer Tools and hit the “Console” tab.

Here, you will see a message showing that the AMP validation is succeeded if everything is working alright or a list of issues to be fixed. If you are in the latter situation, check this page for addressing and fixing some common validation errors.

In addition, it is important to make sure that your WordPress AMP pages’ schema markups are valid for the search engine to return more informative results for its users. The tool that you need to utilize here is Structured Data Testing Tool. During the validation process, you may need to modify the class-amp-post-template.php file through FTP or the dashboard of your WordPress site if anything goes wrong.

Validate Schema Markup

Need More Juices?

As mentioned before, the official AMP plugin allows you to create bare AMP pages only. It does not add any styling or enable Google Analytics out of the box.Therefore, the one-plugin solution mentioned above will be not enough if you want to change the AMP pages’ styling slightly, make Google Analytics track these pages, or even display advertisements using Google AdSense.

Fortunately, there is a plugin designed right in line with your needs, that is, Facebook Instant Articles & Google AMP Pages by PageFrog. Since it is also free for use, you can install and activate the plugin directly from the WordPress dashboard.

PageFrog Plugin

Then, make Google AMP HTML ready and follow the instructions below to achieve any of the three goals we’ve analyzed before.

Make Google AMP HTML Ready

Change the styling of AMP pages

Go to “Mobile Formats” > “Styling”, select an article from the drop-down menu on the page’s right side, enable it for AMP HTML, and style the article head, body, and footer according to your preferences. Click on the “Save Settings” button when you are done.

Change the Styling

Enable Google Analytics

Head over to “Mobile Formats” > “Analytics” and click on “GOOGLE ANALYTICS”, “Enable Integration”, “Sign in with Google” buttons in several to connect your Google Analytics account with the plugin.

Enable Google Analytics

Integrate Google AdSense

Locate the item “Ads” under the “Mobile Formats” menu and click on it. Then, hit the “Sign in with Google” button once again to make the plugin connected with your Google AdSense account.

Integrate Google AdSense

Despite the fact that having too many plugins activated on a single WordPress website may cause some unpleasant problems, you may need to adopt another plugin named as Glue for Yoast SEO & AMP for the following two reasons.

  • The default set of metadata used by the official AMP plugin are not the most optimal metadata in some cases when you are using Yoast SEO, one of the most popular WordPress SEO plugins. Therefore, you need to bridge the two plugins to make sure that SEO will not be affected on your new WordPress AMP pages.
  • According to Yoast, users may experience risks like browser crashes when integrating the PageFrog plugin. To get around this, it is recommended to use a combination of the three plugins on your site.

Glue for Yoast SEO and AMP Plugin

Conclusion

To sum up, AMP is indeed an ambitious project aiming to create a sustainable ecosystem where publishers can get the maximum reach and users can enjoy a blazing-fast mobile web experience. Considering that Google may change the rules now and then, you can choose to integrate the AMP project right now or later with your WordPress site based on your own needs.

No matter you decide to accelerate your WordPress pages for mobile devices immediately or a few months later, it is wise to keep a close eye on the recent progress of the project as well as its connection to WordPress.

Author

Susan Rose is a freelance writer who has a deep knowledge about WordPress. She loves everything related to website building since the freshman year at Christopher Newport University, and loves to share her experience with people all over all the world. This girl is popular among our readers as she is outgoing and energetic. In the daily life, Susan loves detective novels as it can train her logical thinking and creativity.

Close

Want to Learn More About WordPress?

Get Our Free Themes, Plugins, Support, SEO Tips, and Other Tutorials!

Email *