Optimizing a page for mobile speed? Not easy. Mobile search has come a very long way, especially since the Google Mobile Friendly Update, back in 2014.
Mobile optimization keeps evolving, and it happens fast. At first, we had separate mobile versions, then responsive designs, now we have Google AMP pushing strong. What AMP (accelerated mobile pages) is, if and how AMP can influence SEO and how it will impact your business – you can find the answers to all of these questions in the following article.
All this change, happening so fast, can get a little frustrating.
It’s difficult to implement Google AMP and you’re not sure if it’s worthwhile spending that time.
In this article, we’ll be taking a look at exactly what Google AMP is. We’ll find out if we need it or not, how to easily implement it the right way and if it’s really good, or just another Google attempt to monopolize itself over the web.
- What Is Google AMP and How Does It Work?
- How Can AMP Improve SEO?
- How to Implement Google AMP
- The Pros and Cons of AMP
You might be thinking:
My website loads fast enough on mobile! I already have a responsive design and a cache plugin! Why do I even need Google AMP?
Here’s the deal:
If your website is blazing fast on mobile, you’re definitely not part of the majority. Mobile pages are still slow! More factors than you might think are involved.
A study from DoubleClick by Google states that more than 50% of mobile users decide to abandon a webpage if it takes more than 3 seconds to load.
The study also states that 77% of mobile websites take longer than 10 seconds to load. The average load time of mobile sites on a 3G network is 19 seconds.
Yes, you read me right! It’s 19 seconds. And 4G only makes it 14 seconds, which isn’t all that great.
We, the marketers/publishers, might be OK with seeing pop-ups, ads, register forms, banners, videos, and so on. We profit from them. Sure, we optimize them for maximizing revenue and for performance, as well.
But think of it this way:
You’re now the reader. You’re standing at your desk, on your PC, looking for something on the internet. It’s not marketing related. Let’s say it’s a health-related issue, or some information you need on some legal problem. The first website you open takes 5 seconds to load. Your speakers are a little bit too loud, but you forgot. A video ad autoplays. You start searching for it on the screen while reaching for your speaker’s volume knob. You finally spot the video through the forest of ads. It’s on the top-right side of the screen. As you move your cursor up, an exit pop-up triggers. It’s full screen. The video still plays in the background. Are you mad yet? I sure am.
Now, all of this can happen pretty fast on a PC, at least if you have a decent computer and network connection.
On mobile, things are probably not so dramatic.
You know what happens?
People tap the back button. And boom! Just like that, the bounce rate jumps up high, and the dwell time goes down, as well as your rankings.
When you’re on the go, you either want to find some information REALLY fast, or you’re just browsing and won’t even bother waiting. A dozen of other articles are waiting out there.
We’ll dive into the details later, but first, let’s take a look at what Google AMP is, and how it works.
1. What Is Google AMP and How Does It Work?
Google AMP is short for Accelerated Mobile Pages. The project has been started by Google in partnership with Twitter, in order to make mobile browsing super fast.
In a nutshell, it’s a stripped-down version of HTML.
The developers claim that an accelerated mobile page is capable of loading up to 4 times faster than a regular HTML page.
One way or another, it’s a response to Facebook’s Instant Articles or Apple News. Although in many ways similar, an important difference is the fact that it’s open source.
AMP is built for speed. The main concept is readability. Special design, effects and features are not important in the accelerated mobile page.
When a valid Google AMP page is posted and indexed, Google will then cache it on its servers.
Once the page is cached, Google can rapidly fetch it for dispaly when someone tries to view it. The AMP version is already faster by itself, but through heavy caching, the loading of the page in mobile browsers seems instant.
Many third party applications will also cache the AMP version of your pages so that they can display it very rapidly.
Both versions of the AMP page (the hosted one and the cached one ) will contain rel=”canonical” which points to the original mobile webpage. In case the website is responsive, then the AMPs will point to that version.
I asked Will Critchlow, from Distilled, what he thinks about AMP, and if he thinks it will succeed in becoming a standard in the future.
|I think we have to acknowledge that it’s already a standard. There are reports that publicly list just how much AMP traffic some big publishers are getting.|
|CEO @willcritchlow / distilled.net|
Will also said that it’s been a long time since Google has been pushing anything so hard, and that we should expect more and more updates to come. Will helped me to better understand a few concepts about AMP, and I want to thank him one more time. So… Thanks, Will!
2. How Can AMP Improve SEO?
In the early days, before AMP was even released for the search engines, Google had speculated that it might impact SEO at some point.
They have not officially stated that AMP affects SEO in any way. In February 2016, John Mueller said in a Google Hangout that AMP isn’t a ranking signal.
AMP still isn’t officially a ranking factor in 2017. Here’s a tweet from John from early 2017:
AMP isn’t a ranking factor; if you decide to disable it, make sure to redirect appropriately.
— John ☆.o(≧▽≦)o.☆ (@JohnMu) January 25, 2017
However, there are a lot of indirect factors that might lead to SEO improvements, on mobile and desktop as well.
Keep in mind that most people use AMP as a second option for their website. If you have a responsive website, you will mark the original HTML page as the canonical version. This means that you will have a rel=canonical from the AMP to the original version.
In this case, your main website will be the responsive version of the website, not the AMP one. Google will then index the fully responsive version of your website, and use that to calculate the quality score of your page.
John states in the following video that if the AMP page is the canonical version, then it matters for site quality and user experience.
However, having an AMP page marked as canonical on a responsive website makes your AMP version the only indexable version.
If the AMP is canonical, then that’s the version that’s indexed (usually that means you only have AMP version, no other one).
— John ☆.o(≧▽≦)o.☆ (@JohnMu) May 31, 2017
At first, I thought that AMP was only for mobile. I mean… the name is Accelerated Mobile Pages, right? But John’s statement proves that you can have an AMP only website.
And guess what:
The AMP official website at ampproject.org is exclusively written in AMP HTML. There doesn’t seem to be any issue with rendering an AMP page on a desktop device. The site looks great. It even has nice animations on it. And of course, it is pretty fast.
A website can be built entirely on AMP HTML, as long as it’s built correctly. It will display well on both desktop and mobile devices.
We also know that Google is testing the mobile index first, so it makes sense now to have a strong mobile version more than ever. Mobile SEO will soon become the standard for desktop search results as well.
There are cases though where desktop versions were indexed first for mobile, even though an AMP version was available.
Jennifer Slegg wrote about this, back in November 2016, after the State of Search Conference. She also tweeted about it.
— Jennifer Slegg (@jenstar) November 14, 2016
This happens probably because in many cases, the AMP version is not only stripped off HTML but also off content. If Google indexed only the AMP version by default, then those pages would actually have a disadvantage.
2.1 Site Speed and Dwell Time
The speed of your site matters a lot. As mentioned at the beginning of the article, people tend to abandon slow loading sites.
Google has tested that many times, and results have been consistent. People who implement AMP get higher loading speeds, which results in better CTR and more conversions. If you read about the topic long enough, you will notice a lot of positive experiences with AMP. These experiences mention lower bounce rates and higher dwell time.
You see, informational websites usually suffer from higher bounce rates. This is because when people find the information, they usually click back or exit the page. It doesn’t mean that the page is bad or that it offered a bad user experience. It’s just the way things happen.
Content marketers usually resort to popups and forms in a try to get leads and keep their customers from bouncing. Although this works and many marketers commend it, it can negatively impact the speed of a website, which in turn will lead to the same problem: people leaving your website.
Google AMP tries to fix these problems. At first, people thought that because the limitations, sign-up forms might not be available anymore. AMP fixed this with recent updates and forms are now available.
As we stated in another article, dwell time is related to SEO and it’s like a brother to the other similar ranking factor, the bounce rate. The more people stay on your site and the less they bounce, the better your rankings will be.
Both bounce rate and dwell time are factors tracked through Analytics. We can use Analytics in Google AMP as well.
As stated on the Google Developers Website:
From the phrase above, we can understand that AMP Analytics data can blend with regular data, which might bring better mixed results over time. You can read more here.
2.2 The AMP Carousel, Cache and Third Party Apps
One of the most intriguing features of Google AMP is the possibility to be featured in a carousel. The carousel will only show AMP pages, and although it doesn’t always get triggered, it will show above the SERPS, therefore placing you at the top of the page.
Here’s a series of screenshots taken with my mobile phone. The screenshots show the AMP carousel in action. You can check it out yourself by accessing http://g.co/ampdemo on your mobile device. I simply searched for ‘Obama’.
The carousel has good parts and bad parts. It’s good to be featured at the top of the page, over the #1 spot, but at the same time, readers are one swipe away from leaving your website. Google AMP is very good for readers, but publishers and advertisers might not agree with every aspect of it.
As we can see, although Google stated clearly that Accelerated Mobile Pages don’t affect SEO directly, some indirect factors can lead to SEO improvements.
Google AMP doesn’t directly affect SEO, but indirect factors that result from AMP can.
AMP’s purpose is to improve the user experience. And from what we know, better user experience results in better rankings.
What’s really cool about AMP is that it cannot impact your rankings negatively. If you implement AMP and use rel=”canonical” to point it to your main version, Google will use that to calculate the quality score for ranking.
Remember: if you only have an AMP version of your website, then Google will use that version to rank you. If you build it well around the stripped HTML and are willing to accept all the current restrictions, you will have a faster website that offers a better UX.
3. How to Implement Google AMP
Ok, AMP looks cool. Now, how to get it?
Well, if you’re using one of the popular CMSs out there (WordPress, Drupal, Joomla) things are as simple as installing a plugin/module/extension, or whatever they are called.
3.1 How to Install AMP on WordPress
WordPress is the most popular CMS on the web. You’re probably using it. The WordPress development team already has an agreement with the team at AMP Project, so an easy implementation was expected.
If you wish to improve the experience, install this plugin. It comes with better reviews and more functionality. It already has Yoast support built into it, so you can directly optimize the AMP pages for search engine optimization. In order to work, this plugin requires the default AMP plugin mentioned.
The plugins can be installed in any order.
To install a WordPress plugin, login into your WP Dashboard, click on Plugins on the left and then on Add new plugin. Search for the plugin name, click Install and then Activate.
If you don’t know how to do this, take a look at this simple video from WP Beginner.
After installing them, you should be able to access the accelerated version of your pages by typing /amp after any URL on your WordPress website.
3.2 How to Install AMP on Drupal
Drupal also has its own plugin for AMP pages. If you wish to install it, you can get the plugin here. The archives with different versions of the module are towards the bottom of the page.
To install a plugin on Drupal, simply go to the Extend section on your Dashboard. Then, click Install new module. You can either download the tar.gz file from the link above and upload it into the Dashboard, or you can right click, copy link address, and paste it into the Dashboard.
If you’re having trouble installing a Drupal module, follow the steps in this video:
3.3 How to Install AMP on Joomla
Joomla also has a number of available extensions for implementing Google AMP. Head over to https://extensions.joomla.org/extensions/ and search for AMP.
There are multiple ways of installing the extension. You can download it from the website and then upload it into your Joomla Control Panel, click on Extensions and the Extension Manager.
All the methods of installing the extension of your choice can be found in the following video:
3.4 How to Install AMP on Concrete5
Even the new uprising Concrete5 has its own module for AMP pages. It is developed by hissy on GitHub. This module is still in beta. It should be tested on a development version of the website first.
Installing it is a little bit more complicated, as you will need access to your server’s command prompt. This can be done by logging into your cPanel and searching for SSH (Secure Shell). If you don’t have SSH access, your hosting provider may or may not provide you with it. Contact the hosting provider’s support department for information.
Then, simply run the following command lines into your command prompt. Enter the lines one at a time, and press the Enter key after each line.
$ cd ./packages
$ git clone email@example.com:hissy/concrete5-amp.git amp
$ cd ../
$ ./concrete/bin/concrete5 c5:package-install amp
After doing so, you can access the following URL from the dashboard:
Accessing it will lead you to the module setup page. Select the page types you want to activate AMP on. Then, insert your Analytics ID. This is optional. Click save, and you’re done!
If you wish to customize the AMP design template, you can copy the package and files from packages/themes/amp to application/themes/amp.
If you run into any trouble, you can get further support on the Concrete5 community forums.
3.5 AMP for Magento and OpenCart
The two most popular eCommerce CMSs also have their modules for the Accelerated Mobile Pages.
These are fairly complex plugins, and I have only been able to find paid versions in the top results of my searches.
3.6 Custom AMP Implementation
If you’re not using one of the popular CMS platforms there, things aren’t that easy. Ideally, you should outsource this to a group of experienced programmers. If you have a custom platform, you probably already have a team.
But if you’re willing to do this yourself, the whole documentation on the AMP Project Website is a must read.
In this article, we will cover only the most important parts, and the ones related to SEO.
Remember that the AMP HTML is a lot more limited. It has many restrictions. Elements must be placed in a very specific order, otherwise, the format won’t be valid.
Here is the most basic accelerated mobile webpage, the classic “Hello, World!”.