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.
- 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.
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.
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.
Then, make Google AMP HTML ready and follow the instructions below to achieve any of the three goals we’ve analyzed before.
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.
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.
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.
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.
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.