Google’s Accelerated Mobile Pages (AMP) project has been launched on 24 February 2016. With this launch, thousands of developers became active participants in the project. Countless websites now have AMP versions of pages, and many developers are learning to use AMP – in this case, learning to use AMP with WordPress.
Google takes AMP very seriously. It is one of their search engine ranking criteria as well. In that way, Google is making AMP almost a necessity for many sites. In this article, I am going to give you detailed information about Google’s Accelerated Mobile Pages project. This includes the steps for invoking it in your WordPress site.
What is AMP?
Some developers might not be all that familiar with AMP yet. It is a mobile-friendly framework that enables fast loading of your web page on mobile browsers. It is an open source technology designed to empower website publishers to efficiently improve the speed and user experience of loading content pages on mobile devices. And all of this enhancement occurs with zero effect on advertisement revenue.
If you’re an experienced developer, you can achieve a similar kind of enhancement through comprehensive page loading optimizations. However, Accelerated Mobile Pages make these optimizations very easy to execute without spending as much time and energy on mobile layout.
For websites who are already working double time for their SEO rankings, this just adds more tasks to their to-do list, of course, because AMP pages can also enhance the SEO ranking of your website. That is, perhaps, the main reason big enterprises are also adopting AMP.
AMP Project
AMP consists of three major components:
- AMP HTML
- AMP JS
- AMP Cache
AMP HTML
It is a subset of HTML with many restrictions, custom tags, and custom properties. Adapting to this is not complicated if you have a pre-existing familiarity with HTML. Yet if you find that you have any difficulty, I suggest you visit this link to learn more about how to create your AMP HTML page.
AMP JS
AMP provides a limited amount of JavaScript for mobile web pages. Now an important thing to bear in mind about JS in AMP is that third party JavaScript is not allowed with AMP.
AMP Cache
The Google AMP Cache is a CDN for delivery of AMP pages. You all know the core function of Content Delivery Networks – they distribute resource loading to servers nearer to your website’s viewers. For an AMP page, this CDN will allow for the minimum loading time due to distance latency that is possible.
The Relevance of the AMP Sign for SEO
Back in 2016, when Google was launching AMP, AdAge.com published an interview with Google’s senior director of news and social products, Richard Gingras. In that interview, he said that AMP usage would not directly correlate to your search ranking, as it is not a direct factor. He then added, “All of the other (search engine ranking) signals need to be satisfied as well.”
However, after this clarification, everything becomes more clear. He said, “If we had two articles that from a signaling perspective scored the same in all other characteristics but for speed, then yes, we will give an emphasis to the one with speed because that is what users find compelling.”
Even Google doesn’t deny the relevance of AMP website for SEO. Speed is always an influencing factor when it comes to search engine optimization. If an AMP page gets more clicks and less bounce rate due to faster loading, Google will definitely rank the website higher because of the better user experience.
How Can One AMP Their Website?
You have to maintain two versions of an article page on a website. The original article page, for default web user, and an AMP version for potential mobile users.
Also note that AMP doesn’t allow form elements and third party JavaScript. This means you cannot put a contact form or on-page comments in a standard implementation, as AMP is primarily for the delivery of content.
- I recommend rewriting the entire website template to cope with the restrictions. For instance, the CSS of an AMP page must be in line and the page size less than 50 kb. Also, due to the fast loading of fonts, they should be loaded with the help of the amp-font extension in order to efficiently load the page.
- It is advised that multimedia must be handled with special care. For images, you need to utilize the
element and precise width and height. Also, if your images are GIFs, then you will need to use the separate amp-anim extended component. - For videos, there are two choices. There is a custom tag for embedded videos called amp-video. However, if you want to embed a YouTube video, there is a specific tag for that called amp-youtube.
- For embedding slideshows, you can use amp-carousel. In addition to that if you want to add an image lightbox you can use amp-image-lightbox.
- For embedding social media platforms such as Twitter, Facebook, Instagram, Pinterest, and Vine, you can use each respective component.
- This point is very important. Now, once everything is set and you’re ready to go with your AMP page, you have to let Google know about your AMP website. You will have to add a tag on your main post page with information about your AMP page
<link rel="amphtml" href="http://www.yourblog.com/blog-post/amp/">
as well as a canonical tag on the AMP page with information about the main page<link rel="canonical" href="http://www.yourblog.com/blog-post/">
.
You can learn more about AMP tags and Schema.org metadata for AMP here. Schema.org metadata “is a requirement to make your content eligible to appear in the demo of the Google Search News carousel”. So, if you wish to achieve success through Google AMP, you have to get your schema right.
Does Google Analytics work on AMP?
Yes, of course, Analytics works on AMP. In fact, Analytics on AMP is quite smart as well. In order to prevent a website to slow down due to multiple analytics trackers, they work on the core philosophy of, “Measure Once, Report to Many”. Generally, there are two paths to enable Analytics with AMP for your website.
- The amp-pixel element: It is a simple tag to count a number of page views (similarly to a tracking pixel) by using a GET request.
- The amp-anayltics extended component: This component is more advanced than the
amp-pixel
. You can use it to measure any activity on an AMP page. It enables you to specify JSON config which provides details for what to measure and where to send the report.
How to Use AMP with WordPress Websites
One of the simplest ways to use AMP, in fact, is to implement it on your WordPress website. You can use the official plugin developed by Automattic/WordPress.
Step One: Install the WordPress Plugin
Let’s begin the installation! download the plugin from the above link and nstall the plugin on your WordPress site. After the installation, you just need to append “/amp/” to an article page. If you don’t have pretty permalinks enabled, you can try ?amp=1
.
Step Two: Validate & Tweak
Google search console picks up the AMP version of your article page from the metatag which will be appended by the plugin. However, the problem arises because it usually takes days to detect these kinds of changes.
So, now what to do? To handle these tricky situations, I recommend using a combination of the Chrome validation process and the search console. In order to use the Chrome validation process, visit any of your AMP pages in Chrome. Then at the end of the URL append #development=1
. Now hit Control+Shift+I
to open the Chrome developer tools.
Refresh the page, and either it will say, “AMP Validation Successful” or give you a detailed list of issues to be fixed.
You can see that installing a plugin is not enough alone. You have to validate every data by visiting the page and repeating the above steps in order to be benefiting from the Accelerated Mobile Pages.
Step Three: Validate Schema Markup
You’ve already learned that validating Schema Markup is very crucial for your AMP pages. I recommend Google’s Structured Data Testing Tool to test your pages for valid schema markup. However, I found some problems with WordPress over the display of logo. So, I made some modifications in order to overcome this issue.
Go to the Plugins, click on “Editor” and then select “AMP”. Change these lines in the editor to modify the plugin.
if ( $site_icon_url ) {
$metadata['publisher']['logo'] = array(
'@type' => 'ImageObject',
'url' => $site_icon_url,
'height' => self::SITE_ICON_SIZE,
'width' => self::SITE_ICON_SIZE,
);
}
to:
$metadata['publisher']['logo'] = array(
'@type' => 'ImageObject',
'url' => 'http://yourdomain.com/wp-content/uploads/logo-company.png',
'height' => 60,
'width' => 170,
);
Please make sure that in the URL, you specify the location where your logo is and specify the height and width accordingly.
Step Four: Integrate Google Analytics with the AMP WordPress Plugin.
Now, you are almost done. However, I prefer to use Google Analytics to track the stats. The AMP WordPress plugin did not proactively activate amp-analytics
, however, it is quite easy to execute.
In order to enable the AMP WordPress plugin to work in collaboration with Google Analytics, go to the Plugins -> Editor -> select “AMP” and add the following code to the end of it.
add_action( 'amp_post_template_head', 'amp_post_template_add_analytics_js' );
function amp_post_template_add_analytics_js( $amp_template ) {
$post_id = $amp_template->get( 'post_id' );
?>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<?php
}
add_action( 'amp_post_template_footer', 'xyz_amp_add_analytics' );
function xyz_amp_add_analytics( $amp_template ) {
$post_id = $amp_template->get( 'post_id' );
?>
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" ←(YOUR GOOGLE ANALYTICS PROPERTY ID)
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
<?php
}
Make sure that you change the value UA-XXXXX-Y
to your own Google Analytics Property ID!
After making this change, re-validate your AMP pages, and then your AMP pages will be trackable.
A Verdict on Google’s AMP Project
Google wants the AMP project to be a good experience for the users. Still, the question is whether or not AMP can make everything super fast. The answer to this question is pretty open-ended. If you optimize your website poorly, then AMP will result in some significant boost-ups.
However, Accelerated Mobile Pages are not magic bullets. Techniques to improve website’s speed have been available from the start. AMP is just an attempt to combine and eliminate all the major slow-loading factors and offer a better solution for the users.
What do you think of the AMP Project? Please share your views in the comments section below!
Frequently Asked Questions (FAQs) about Using AMP with WordPress
What is the main benefit of using AMP with WordPress?
The main benefit of using AMP (Accelerated Mobile Pages) with WordPress is to enhance the mobile browsing experience. AMP is a Google-backed project designed to make web pages load faster on mobile devices. It achieves this by stripping down the HTML and using a streamlined version of CSS. This results in a significant improvement in page loading speed, which can lead to better user engagement, retention, and improved mobile SEO.
How does AMP affect SEO?
AMP can significantly improve your SEO because page load speed is a ranking factor in Google’s algorithm. By making your web pages load faster, AMP can help improve your visibility in search engine results, especially for mobile users. Additionally, Google often highlights AMP pages in prominent carousels in the search results, providing further visibility.
Can I use AMP on my existing WordPress site?
Yes, you can use AMP on your existing WordPress site. There are several plugins available that can help you implement AMP on your WordPress site. These plugins help convert your existing posts and pages into AMP-compatible versions.
Does AMP affect the functionality of my WordPress site?
AMP restricts certain HTML, CSS, and JavaScript elements to ensure fast page load times. This means that some features of your WordPress site may not work as expected on the AMP version of your site. However, most AMP plugins offer options to add functionality back in a way that still complies with AMP standards.
How can I customize the appearance of my AMP pages?
The appearance of your AMP pages can be customized using CSS. However, because AMP restricts the use of certain CSS properties to ensure fast page load times, you may need to use a more streamlined approach to styling. Some AMP plugins for WordPress offer built-in customization options.
How can I check if my AMP implementation is successful?
You can check if your AMP implementation is successful by using the AMP Test tool provided by Google. This tool will analyze your AMP page and report any errors that might prevent it from being served as an AMP page in Google search results.
Can I use AMP without a plugin in WordPress?
Yes, you can implement AMP without a plugin in WordPress, but it requires a good understanding of web development and AMP standards. You would need to create separate AMP-compatible versions of your posts and pages, and add the necessary AMP HTML tags manually.
Does AMP support ads and analytics?
Yes, AMP supports both ads and analytics. However, because AMP restricts certain HTML, CSS, and JavaScript elements, you may need to use AMP-specific tags and scripts for ads and analytics.
Can I disable AMP for specific posts or pages?
Yes, most AMP plugins for WordPress offer the option to disable AMP for specific posts or pages. This can be useful if you have certain content that doesn’t work well with AMP restrictions.
Is AMP a replacement for responsive design?
No, AMP is not a replacement for responsive design. While AMP can enhance the mobile browsing experience by making pages load faster, it doesn’t replace the need for a website design that adapts to different screen sizes. It’s best to use AMP in conjunction with responsive design for the best mobile user experience.
Jason is a renowned WordPress development professional who works with WordSuccor Ltd. He is a passionate blogger who loves to write and share everything about WordPress and new web design technologies.