If you’ve been following the latest SEO trends rigorously, you may know that Google Accelerated Mobile Project (AMP) is quickly gaining traction amongst website owners.
Google Accelerated Mobile Project is an open source initiative by Google that is geared towards speeding up the mobile browsing experience to a great extent on the open web. You might be aware of various page speed boosting tactics already, but AMP stands out from the rest.
AMP is an effort to step toward a faster mobile rendering experience. Unlike other page speed tactics that focus on optimizing your current responsive page to boost speed, AMP serves your web page using a separate lightweight and stripped down template specifically built for boosting speed.
With AMP, the files are stripped down only for the sake of boosting page speed. This is due to the fact that no JavaScripts are allowed. CSS files are streamlined, and images are made lazy loaded.
While the primary goal of AMP is to speed up mobile web, AMP is not intended to replace responsive design at all. Additionally, AMP pages are not served directly when someone visits your website from a mobile device. Instead, it is handled by consumers like Google Search.
For instance, when you do a Google search on a mobile device, you have probably seen those ‘lightning’ symbols beneath the results, which indicates the page is AMP.
This symbol tells you that by clicking on it, you will be directed to a streamlined version of the article that opens on your browser almost instantly, regardless of your internet connectivity.
Now that you know what AMP is, it’s time to look at how to implement AMP on your WordPress website.
Step 1: Simply Install The WordPress AMP Plugin By Automattic.
This step is a very obvious one.
Jump to the plugins menu in WordPress admin, find the AMP plugin and install it on your WordPress website; no additional configuration is required.
Once you have installed it, all posts will generate AMP-compatible versions without any further configuration. AMP pages will be accessible by appending /amp/ to the end of your post URLs. If pretty permalink is not enabled, the AMP pages are accessible by appending ?amp=1.
For example, AMP pages of your blog post will look like this…
Blog post URL: http://example.com/blog-post/
AMP page of your blog post: http://example.com/blog-post/amp/
AMP page if pretty permalink is not enabled: http://example.com/12345?amp=1
Step 2: Validating With Browser Developer Console
With the availability of the free WordPress AMP plugin, AMP implementation may seem like an easy task. While installing the AMP plugin creates a basic AMP template for your website, unless you optimize the template, expect to receive tons of errors in the Google search console in the next few days after installation.
This is because currently, the AMP initiative is in its infancy, and Automattic’s official AMP plugin isn’t mature enough to work perfectly out-of-the-box. While it provides basic AMP functionality, it is not enough if you’re looking to get the AMP pages of your website indexed on a Google search.
Because AMP pages are served by AMP consumers like Google search, unless the AMP pages are indexed on search engines by fixing all the SEO issues, implementing AMP on your WordPress website is a waste of time.
For tweaking your AMP template, one of the first things you need to do is to validate AMP pages with a browser developer console.
Here is how to validate AMP pages on your browser console.
In your browser, visit your AMP page
Append “#development=1” to the end of the URL, for example, http://example.com/blog-post/#development=1.
Open the Chrome DevTools console and check for validation errors. You can find common AMP validation errors here.
Step 3: Fixing Issues And Customizing AMP Pages
By now, you have tested issues on your AMP pages with the browser console. You know what’s working and what’s not.
So far, so good. Now it’s your turn to customize your AMP template to fix most of the SEO issues you may have.
The easiest way is to install the Pagefrog plugin, which lets you make almost any customization on your AMP templates.
However, if you’re already using the Yoast SEO plugin on your website, instead of the Pagefrog plugin, you may need to install Glue for Yoast SEO & AMP, which fixes most of the issues.
Once you have installed the Glue plugin, go to the Design tab by navigating to SEO -> AMP settings menu and make any customizations that you’d like.
For instance, by default, the AMP plugin does not display the featured image, but after installing Glue you can set featured images on your AMP pages.
Step 4: Schema Markup
Kissmetrics defines schema markup as ‘code (semantic vocabulary) that you put on your website to help the search engines return more informative results for users.’
When schema markup is implemented on your website, it helps users to easily find them in the SERPs; like what a website is all about, where they are, what they do and many more.
Enough said! Now, let’s take a look at how to validate schema markup for your AMP pages and what errors are being shown while testing.
Go to Google’s Structured Data Testing Tool, fetch your AMP URL and run the test.
You may now find errors on your AMP pages. So, the next step you’ll need to take is to fix them.
This read me page from Github discusses most of the things needed to solve issues regarding WordPress AMP pages. If you have any other difficulties, you may use WordPress official support forums for the AMP plugin.
Step 5: Adding Google Analytics Tracking To AMP Pages
So far we’ve looked at installing AMP plugin and fixing most of the SEO issues. But still we haven’t installed Google Analytics tracking on AMP pages.
From step 2, if you’re already using PageFrog plugin on your site, all you need to do is to connect Google Analytics by navigating to Mobile formats> Analytics. Select Google Analytics and follow the on screen instructions.
So that’s what you should do if you’re using PageFrog. But what if you’re not using PageFrog or any other plugin that supports Google AMP analytics tracking? Just follow the instructions below.
Navigate to functions.php file.
Add the below script at the end of the file.
add_filter( ‘amp_post_template_analytics’, ‘xyz_amp_add_custom_analytics’ );
function xyz_amp_add_custom_analytics( $analytics ) {
if ( ! is_array( $analytics ) ) {
$analytics = array();
}
// https://developers.google.com/analytics/devguides/collection/amp-analytics/
$analytics[‘xyz-googleanalytics’] = array(
‘type’ => ‘googleanalytics’,
‘attributes’ => array(
// ‘data-credentials’ => ‘include’,
),
‘config_data’ => array(
‘vars’ => array(
‘account’ => “UA-XXXXX-Y”
),
‘triggers’ => array(
‘trackPageview’ => array(
‘on’ => ‘visible’,
‘request’ => ‘pageview’,
),
),
),
);
return $analytics;
}
Code credits
In the above code, make sure you replace UA-XXXXX-Y with your Analytics tracking ID. Once done save the file.
Verify if the tracking code is working properly by visiting an AMP page on browser (refer step 1) and checking it on Real-time Analytics.
I hope now you get a detailed idea about how to implement AMP on your WordPress website. If you have any concerns, feel free to share it with us by dropping a line below in the comments section.
