SEO Considerations when Implementing Accelerating Mobile Pages (AMP) – #CrawlingMondays 11th Episode

When should you implement AMP? Which are the different types of configurations you can choose from? Which are the most common optimization challenges? In the 11th episode of Crawling Mondays Aleyda will go through the most important SEO related aspects to take into consideration to implement AMP for success.

You can also watch this video and leave a comment over YouTube. To follow more updates on Crawling Mondays, subscribe to the YouTube channel and follow to @CrawlingMondays in Twitter.

Video Transcription

I’m very happy to announce today that after 10 episodes, we have reached more than 1,000 subscribers in You Tube, so I’m very very happy and thankful. It means a lot, thank you very much. And if you see me around and want to support Crawling Mondays even further or would like one of these awesome speakers here for your laptop or backpack or whatever, just let me know whenever you see me around. I’ll be more than happy to give it to you. Thank you very much.

Today’s Crawling Monday’s episode is going to be about AMP, accelerating mobile pages, which is a topic that I have spoken already about a bit. It has been already a while since it was released, launched in 2015 at the end of the year as you can see. When they released AMP a few years ago, it was targeted mainly for publishers and media sites to improve the speed experience that they get on mobile results. Mostly by using this pre optimize resources, AMP HTML, which is HTML with a few restrictions for better performance. The same AMP JS these are JavaScript libraries are again optimized to render better speed experience and by using the AMP Cache as a CDN, pretty much, the goal was to use all of this technology and resources in order to make the mobile version of many websites that were not delivering the best possible speed experience, to make them very very fast. In fact, Google at that point made AMP a requirement to be included in the top stories, so for example, if right now I search for something like Brexit, right, we can see that all of the results here in the top stories carousels. We can see the little AMP logo over here, because it is a requirement and most of the media sites of course they had to implement AMP in order to be able to continue to be shown there.

Realistically though, Google also gave preferences to the AMP versions of any websites so in case. If a website had an AMP URL for any specific page, that will be the URL that will be shown in search results.

As with everything, AMP has its pros and cons. One of the things people didn’t like about is AMP is whenever we clicked on any page result, AMPage result, the URL that we can see here is the gold cache URL, instead of the original one.

Google already confirmed last year, we can see over here, that at some point they were going to change this, that they were going to start showing the original URL, however, this was already in 2017 and this hasn’t happened yet, so I am really looking forward when this happens. They also shared that at some point they were not going to require to use AMP in order to be included in the top stories carousel. But what they will be doing is to require to have a certain speed in order to be included in the top stories carousel and making the speed the requirement instead of the AMP technology itself. Which was one of the aspects that a lot of people had complaints about. This particular change hasn’t been yet released AMP is still a requirement in the top stories carousel.

So in today’s episode what I would actually like to do is to share with you which are the main scenarios where I can see that AMP can be profitable, actually beneficial to implement from an SEO perspective. Which are the different types of configurations that you should take into consideration when accessing the different ways to implement AMP and the ones that makes more sense for you, based on your own characteristics and restrictions and roles. And we chart most common challenges that I have seen that happens in organizations. And then again a few tools that you can use in order to facilitate implementation and identify opportunities within AMP. The idea and the goal should be that you know AMP, it is there, but when and how it actually much more profitable for you to use it in your own project to maximize the SEO benefits.

So let’s start by answering the most typical question that I get, the most common one, and reasonable one. “Is AMP actually relevant for me” and usually it might be in three different scenarios, the first one is when you have serious speed issues, if you have especially mobile speed issues. And you cannot improve your current website, you cannot optimize it because maybe in a few months you are going to migrate it towards a new platform, or because you have some sort of restrictions in resources or because of many many many other reasons. However, there’s visibility and flexibility to implement an AMP version for your website. So that will definitely be the first scenario to consider AMP for.

Then of course there’s the scenario that you need to be included in Google’s top stories carousel as soon as possible and you cannot wait any longer. Especially if you’re a news, media site or if you have a blog, if you have a news section and you’re website see there’s top stories, there’s the news carousel and you’re not yet there. And you would like to be, and the only way to be there is by having an AMP version to be included in the carousel, and you really, really want to make it happen as soon as possible, so that is another scenario where definitely AMP will be a requirement and potentially beneficial and the way to go.

And then a third scenario is that you’re building a website from scratch and we are going to see that there are many, many ways to implement AMP, and to create an AMP version within your website and potentially you have identified that you want to implement certain functionality that is much harder for you to do. Then AMP provides an easy to implement way to do it. That might be also an option.

Last year when I was in Amsterdam for the AMP conf, there was a set of announcements that actually positioned AMP, and I’m going to show you now, as a way to build websites. Building the future web, together. And actually AMP stories were this close at that point and they were released. So we can see that is a very nice looking visual story telling format for the upper web indeed. So maybe you really want to redesign your website and you can see that AMP is the technology, the platform that will allow you to implement the experience you want in a much more straightforward way.

So actually AMP, thought it wasn’t born as that, now provides so much different type of functionally and options to implement many many of the most common functionalities on the web that will likely help you to accelerate the process or to help you to implement the process in a much more easier way. That you know that will also be optimized from a speed perspective, so that can be also another option and alternative. What it is important to take into consideration is that if you are in any of these three scenarios where AMP will be actually relevant and useful, is that you validate and you verify that you can actually replicate your current design, your current functionality or the design functionality in your AMP version, because in many many many occasions now a days, we can see that there are even plug-ins or templates that are automatically generated that unfortunately they don’t allow you to actually replicate your current web experience, which is actually a pity because you do really want to, yes, use AMP to not only attract users, but also to keep your users happy and provide the best possible experience.

And what you should definitely try to avoid is being in one of these type of scenarios like this case study that they shared with us how a some point they implemented AMP, and they ended up actually losing instead of winning, or earning or proving. Because on one hand they were already pretty fast on mobile so they actually didn’t need an AMP version to become faster. On one hand, and then on the other hand, they don’t publish news, so they didn’t actually need AMP in order to attract much of extra visibility or to keep their visibility, because they would actually leverage much of that to be included in the top stories carousel.

So it is very very recommended to come here to the AMP project guide, tutorial references and actually check if the components that are available within AMP, and you verify and validate also with the AMP example website. That is something that actually on one hand your developers they have the capacity to implement. On one hand by using them, and then on the other hand that if all the functionality that you have right now in your website is actually replicable by using any of these AMP components that already exist. So this I will say that should be the first step, to validate that it actually also a viable option for your after you have found yourself in any of these three scenarios.

Something critical when implementing AMP, is to validate, really verify, if it is possible for us to implement the same type of interface and provide all of the features, and functionalities that we are providing with our original mobile pages in our AMP versions. Most of the issues that I have seen related to this is, websites are providing a navigation in their original mobile pages, like in the case of Verge here, and then we go to the AMP version of that same particular URL, we can see that there is no navigation, there is only a logo at the top. The same for here in the other case the Independent here, we can see a hamburger here, no hamburger menu in the AMP version and across many different other websites here. Another example, the Atlantic.

Validate at the beginning before implementing anything that we are able to replicate as much as possible and provide the same type of functionality to not hurt the engagement of the users, we want that the switch between AMP and non AMP URLs is seamless.

It’s interesting because Google has already specified as a good practice, and something that we should actually follow to be validated as AMP compliant and to be shown in their AMP results is that we should show the exact same content in the AMP versions as the non AMP ones, the original canonical ones where the d’s are different. And for example here, and these again are results from a bit of a time ago, we can see how Reddit, for example, they were generating landing pages or top information of some of their channels here, in an AMP version and then if you wanted to look more information, they will feature and include a button to go to the original URL of this page that will have the complete information. Google has already specified that this is not correct. They wanted we show the exact same information with our Amp and non AMP URLs in order to provide the best possible experience to the user and I will say that we shouldn’t only take this as a good practice from accounting perspective but also from a functionally and navigation.

So if you’re reason to implement AMP or to consider AMP is because you want to be included in the top stories carousel, it is important that you verify first if actually Google is showing the carousel for your related, relevant top terms at least. Because worse if Google is not showing the top stories carousel for your queries, you will end up implementing AMP for nothing. You don’t want that. So the easiest, straightforward way to validate this is to go to Ahrefs or or some SEMrush or Cstreet, any of the competitive tools and check for your domain and the domains of your competitors or top players in your industry and check for which terms the top stories carousels is being shown. It is important that you validate this first for domain and then when doing key word research validation, it is important that you check for which of your targeted terms that maybe you are not getting.

You are working on ranking, you know they are important for you and part of your actual process goal, for which of them also the top stories carousel is being shown. And for this, I love the Keyword Magic Tool from SEMrush because I can include, and here, and verify this for any query, for any topic, here in the case of backpacks, and I can select here in the filters, show me those queries, those terms that are actually showing top stories in their SERP features here and I’m being shown here, for example, for backpack in general there is local pack, top stories, images and views. Or for Nike backpacks, I see also top stories. By doing this, we can also validate that potentially it might not necessary to implement AMP for every single category page of our website, but maybe yes, for certain areas, maybe yes for certain types of pages, maybe yes for our news section or blogs.

After verifying that it is actually beneficial for us to go ahead with an AMP implementation, the next step is to validate which is the best way to implement AMP within our website structure, and of course that will depend a lot on our own resources, our capacity, our flexibility and so on. We can that there are definitely different types of implementations nowadays. At the beginning, they type of implementations that we had, its like this one, like the BBC, for any given page, that was usually also already responsive page like this one. You can see, it was already wall friendly, or for each one of these pages, a new version was generated that was made with AMP. An AMP version for each one of these stories. So we can see here, this particular news has a an AMP alternate here, that is included under and AMP sub-directory.

The same we can see across many different websites and sub-domains or with a sub-directory. It will generate this AMP compliant alternate, new versions here that you can see that if I come and check what the Chrome extension. I just switched to Chrome to show you here, it will be shown in green or we could also go to the AMP validator here, from the AMP project, and it will also pass the validation, this alternate version. For each one these, they will need to point out, for example, each one of these regional URLs will need to point out to their AMP versions, like this. With the AMP html tag. And then the other way around, the AMP versions will need to point out where the canonical, you can see here, to their original versions. So the actual page in this case that is indexed is not the AMP URL, the content that is actually indexed is the one of the original page.

And then, of course, there was much more capacity, websites that started to be redesigned once that AMP started to evolve and provide many more functionalities and components and resources. So for example, Tasty here, is completely designed and enveloped with AMP. So if we go to the source code, we can see that the whole Tasty html is AMP html and that if we actually go and validate the Tasty html, here of the homepage, it will pass the validation. So of course in this particular case, you don’t need to point out to another URL as the original one, because this is the original one, the canonical one, because the whole design, the whole website, has been been built with AMP.

And in the case of the BBC, we could see how their desktop URLs were the same than the mobile URLs because they were responsive right. So the content, the html, is the same, it is only changed through CSS and they generate a new URL for the AMP versions of each one of them. However, this can become a little bit much more complex if you do have any dependent mobile website already. For example, in the case of Wiki how, you can see in the screen, they have desktop URLs, they have also mobile URLs under the m. sub domain and they generate also an AMP version for each m. URL. So they ended up generating for each page three versions. So that can be a lot and again you can choose if at some point you are not able to redesign your independent mobile web version to become AMPed directly which will be likely much more straightforward.

So for example, Ali Express here, we can see that they have an m. sub domain version that is mobile friendly and they have made that version AMP compliant. Well it has an error here. Anyway, but yes, its made with AMP directly. Right, so instead of generating three URL versions for each page, they just have two because they have, you can see AMP html here, because they have reused and redesigned their m. version here with AMP. So it’s important that you verify this very well and validate this very well to understand all the implications. It’s not only about, yes it’s great to target all of these queries and be included in the carousel now, or to improve the speed in case you were not providing the best possible speed already with your website, but also to understand all the implications, understand if it is actually beneficial for you, and if so, for which area of your website, for which query, for which content you should be prioritizing really and it will be much more meaningful to do it. In which way you can make sure to provide the best possible experience, and with which type of configuration it will be much easier for you to maintain AMP.

I hope that these types and criteria will help and facilitate and simplify the implementation process for you of AMP. And if you have any other questions, unrelated questions that have to do with SEO, please do let me know in the comments, I will be more than happy to clarify and help you to implement any type of AMP requirement in a much more straightforward way.

Thank you very much, and see you on the next Monday.