Written by Jose Vicente
Table of contents
AMP (Accelerated Mobile Pages) is an open-source initiative promoted by Google, and supported by a great number of media outlets and technological partners all around the world. It was born as a response to the undeniable fact that traffic from mobile devices is ever-growing and has already surpassed that of desktop devices, in addition to the awareness of how frustrating mobile browsing can be for users when websites aren’t always correctly adapted to be browsed on smaller screens. And so, AMP was created to improve the download speed of mobile websites.
AMP’s checklist to optimise a website’s performance on mobile devices is primarily based on the following elements:
- AMP HTML: this technology is based on web components, whose goal is to generate web pages with lighter HTML. Use of HTML is restricted to tags specified in the documentation. There are certain tags that use an amp equivalent, such as the img tag, which is replaced by img-amp, but other tags, such as object or frame, are completely forbidden.
- AMP cache: use of CDN provided by the platform enables the server to get AMP pages, check that their implementation is correct and if it is, save the response to serve it to users. In order for a page to be validated, we mustn’t use external resources, because the goal is that all resources are served from the same origin through HTTP 2.0.
In principle, this idea might look like an evolution of responsive design, which we are well familiar with. However, in reality, it goes much further, because it uses the project’s CDN to cache the content and serve it from there. Plus, the implementation must follow very strict rules, using components provided by AMP project.
Let’s not forget that the goal of this entire project is to provide users with simple and optimised pages, to speed up the response on mobile devices and improve user experience. To achieve this, WPO implementation techniques are used. To name a few examples:
- Size of static HTML elements: First, AMP downloads the HTML code in its entirety, and after that the remaining necessary resources, like images, fonts, etc. Size of static HTML resources must be specified, so that AMP can optimise their download.
Despite the apparent simplicity and rigorous restrictions, AMP HTML provides tags for a good number of elements that enrich the content, including images, videos, or ads by networks supporting this kind of implementation. Moreover, new components continue to be developed, and with them will come new functionalities.
Setting up AMP for SEO
During the implementation of an AMP version of our content, we must keep in mind that it remains a copy of the pages we already have for desktop devices. This means that the SEO configuration on AMP is similar to that of content which is displayed on separate mobile URLs.
To see this more clearly, we’re going to do it with an example. Let’s try making a quick implementation using the AMP plugin for WordPress. Thanks to this plugin we can generate a basic version of our posts. Google expects other CMS to join this project and provide either native AMP support or through plugins. Once installed and activated as any other WordPress plugin, we only need to add /amp/ to the URL address of any of our posts, and we will be able to see its AMP version.
For example, the AMP version of http://www.vicentesabuco.com/que-es-el-seo/ will be http://www.vicentesabuco.com/que-es-el-seo/amp/. As we can see on the following screen capture, the AMP version (on the right) has a much simpler design than the one presented by the responsive version (left), and it skips navigational elements, namely the hamburger menu icon.
In this particular case, we’ve customised the logo and the top strip to maintain the colours of the main theme. For the time being, this module is very basic, and all customisation has to be carried out through code, which means we would lose all our design improvements with every plugin update.
As we’ve said previously, we must use tags to establish the correlation between the original and the AMP versions. This means that every page of our website with an AMP version must include the link rel=”amphtml” tag, its href being the URL of the AMP version. If we use the previous example, http://www.vicentesabuco.com/que-es-el-seo/ must include the following code:
<link <span class=”html-attribute-name”>rel</span>=”<span class=”html-attribute-value”>amphtml</span>” <span class=”html-attribute-name”>href</span>=”<a class=”html-attribute-value html-resource-link” href=”http://www.vicentesabuco.com/que-es-el-seo/amp/” target=”_blank”>http://www.vicentesabuco.com/que-es-el-seo/amp/</a>” />
On the other hand, on the AMP version we must also specify with a canonical tag the URL where the desktop version is located. In our example, http://www.vicentesabuco.com/que-es-el-seo/amp/ will have to contain the following code:
<link <span class=”html-attribute-name”>rel</span>=”<span class=”html-attribute-value”>canonical</span>” <span class=”html-attribute-name”>href</span>=”<a class=”html-attribute-value html-resource-link” href=”http://www.vicentesabuco.com/que-es-el-seo/” target=”_blank”>http://www.vicentesabuco.com/que-es-el-seo/</a>” />
Through these elements we are suggesting to Google that it shouldn’t index the AMP version URL, to stop it from being considered duplicate content of the desktop version. Thus, we have to remember that it’s not just about generating alternative pages, but we must also use the appropriate tags and AMP HTML programming rules for the implementation to be valid.
If we analyse the HTML code of the page we will see how AMP HTML tags are being used, where, for example, html tags are followed by the amp particle, or that img tags become img-amp. If you want to see more official usage examples proposed by the platform, you can access the specially designated page to create your first AMP page.
What happens with responsive design?
Initially, responsive design was developed with the idea of making content of any website accessible from any device. Several years in, however, developers started to suffer from the headache that comes with having to adapt a website to each different type of device. In many cases, the problem lies exactly in adapting an existing website to mobile devices, without following the mobile-first design methodology, which, in turn, doesn’t always make for an optimal navigational experience on desktop devices.
With the arrival of new devices, namely wearables or multimedia devices like Smart TVs, the problem was exacerbated and it’s become evident that it’s rather complicated to adapt the same content to different devices, especially when different users have different needs with regards to the same page. This means that our website’s design must be constantly updated to meet our users’ accessibility needs, keeping in mind new emerging frameworks. In many cases this will increase the size of the code, which will have a negative impact on the download speed of our website, and on the WPO as a result. It comes to prove that responsive design is not a miraculous solution and that AMP comes to fill the void left uncovered by this web development and design philosophy.
AMP in the SERPs
Google displays AMP pages in the SERPs using a horizontal news slider for search requests made from mobile devices. Just as it happened after introduction of Google News block in the organic results, this slider pushes down the organic results, displaying only media outlets that have adopted this new technology. This should cause a decrease in clicks and impressions, even in the scenario that one particular media outlet manages to appear above the news slider, because the slider will always include an image of the news story, an element that provides an increased visibility to this kind of results.
When we click on one of these links, we will access the story without leaving Google, because the content is served from the CDN of the AMP project, using an iframe and keeping the blue bar at the top of the page, the purpose of which is to provide a shortcut that takes users back to the search results. From the news story we can access all other articles contained within the slider by means of a horizontal scroll, which favours navigation towards related news published on websites of the competition. If we click on any other link on the page, the new content will be opened in a new window, and in this case the content will be loaded from the server owned by the content creator.
This approach improves download speed, which only reaffirms Google’s claim that faster websites are much better liked by users, but this also poses certain limitations that most likely will not be well-received. For example, the fact that content is served from Google’s servers, being entirely out of the media outlet’s control, in addition to decreased (current) possibilities of traffic data analysis if we use an analytic system that isn’t associated to the project.
For the time being, Google hasn’t issued a confirmation that AMP are going to be used in the remaining Universal Search modules, so at the moment it’s exclusively focussed on media outlets and their integration through the Google News modules. Nevertheless, if at some point in the future there’s a possibility of extending its use to other modules, every other medium getting traffic through them will be inevitably forced to implement this technology on their websites, if they want to maintain their current level of visibility.