Home page/SEO Guide/Type/Google AMP Accelerated Mobile Pages: the future of your mobile pages

The SEO landscape is changing every year at breakneck speed. Since about 2016, we have been hearing about the AMP (Accelerated Mobile Pages) format. Until now, it has been too restrictive to apply it to the majority of sites, especially e-commerce sites. But since some technical barriers have been lifted, AMP has become the format of the future for mobile pages.

Contrary to popular belief, this project was supported by Google but it doesn't belong to him. Indeed, in addition to the 160 advertising platforms that fund research, the GPA is also supported by the other drivers search engines like Bing, Baidu and Yahoo Japan. In 2018, Bing even developed its own AMP cache to improve the mobile experience of its users. AMP is available on several well-known CMS such as WordPress, Prestashop or Drupal and can be easily integrated with various plugins to install. The MPA has therefore rapidly become a major project, supported by major web players, who place the UX (user experience) at the heart of all their concerns.

Summary

What is an accelerated moving page?

AMP stands for Accelerated Mobile Pages. As the name implies, it is a page format specifically designed to load very quickly on mobiles. AMP pages, recognizable by a small lightning bolt in the SERPThe newer versions of AMP, offer a rather extraordinary user experience. Very light, they load instantly and offer a streamlined version of the content. Easy to read, quick to load: why is this format not generalized to all pages on mobile phones? Quite simply because in order to achieve such a result, it was necessary to reduce queries and other JS (JavaScript) that slow down loading duration. As a result, MPA is nowadays mainly used for press and content sites.

amp-image-illustration

Why did this format emerge?

The web has an exponential number of mobile users, i.e. Internet users surfing on the Internet with their smartphone. If optimizing a site for the desktop is relatively easy, optimizing it for the mobile is a different matter altogether. Indeed, mobile browsing generates many more technical constraints, both in terms of code and web design. In fact, it's rather easy to understand: to switch from the desktop to the mobile, you have to fit all the content and technologies present in the desktop, in a screen sometimes 10 times smaller! Google has therefore proposed this new format to help sites in their transition to mobile browsing. It goes without saying that the AMP format is somewhat related to the implementation of the Mobile First Index!

The different criteria of an MPA page

Simply put, an AMP page is a no-frills page. The AMP framework allows developers to build pages using three basic elements: AMP HTML, AMP JavaScript, and AMP CDN. 

The pages are coded in AMP HTML, i.e. an ultra simplified HTML code devoid of tags that can slow down its loading (such as image tags). JS (JavaScript) is no longer totally excluded, but predefined JS libraries are imposed. We are talking here about AMP JS. Finally, these pages are stored in Google's cache, the AMP CDN, which can further improve loading time.

Can AMP be used on all sites?

Today, all sites can use the AMP format. Nevertheless, its implementation generates a lot of sacrifices on the webdesign and UX side of your web pages. AMP HTML puts performance before aesthetics. Fortunately, multiple commands now allow you to modify AMP documents to make them more adapted to your SEO strategy and your brand image. It would therefore be a shame to deprive you of this, even if you have an e-commerce site. The Greenweez e-commerce site is a very good example of this. The majority of its landing pages are in MPA without disturbing the UX. We simply advise against MPA if you monetize your site. Indeed, you should know that MPA only allows one advertising tag per page. It is therefore to be avoided in this case.

amp-google-version-desktop

amp-google-version-mobile

What domain name or sub-domain to give to his AMP page?

You can keep your domain or even use a domain or a different sub-area. The only precautions to be taken are the relationships between pages. On the normal HTML version of your pages, you should tell Google that it is also available in MPA format. To do this, use an link rel=amphtml tag. Conversely, on the MPA page, you must indicate to the search engine that there is an official page. To do this, you will simply have to integrate the traditional link rel=canonical tag.

How to associate an image to its MPA page?

In AMP, you should not use the tag <img>to load images. Instead, use the</img> custom <img>element</img> <img><amp-img>because it manages the optimization of the loading of all the images on your page</amp-img></img>.

Where do the AMP pages appear?

MPA pages appear in mobile search results only. They are easily recognizable thanks to the small lightning flash next to the page title. Some of them are located in the AMP carousel at the top of the first results page. In this case, the AMP format offers immense visibility! Other AMP pages appear further down in the traditional results.

In which countries is the AMP Carousel present?

Only 12 countries currently benefit from search results with an AMP carousel: France, Brazil, India, Spain, Germany, the United States, Italy, the United Kingdom, Indonesia, Russia, Japan and Mexico. It is therefore an element to be taken into account if your site is multilingual.

How to install AMP?

amp-google-user

Installation on WordPress

There are several options for installing AMP on a WordPress site. You can use the plugin "AMP for WordPress”. Although the default version is quite limited regarding customization, your options can be extended by installing additional plugins. Second interesting plugin: AMP for WP - Accelerated Mobile Pages. In addition to providing a user-friendly and intuitive interface, this WordPress AMP plugin can be used with many other WP tools such as WooCommerce.

Installation on Joomla

The easiest way to install AMP on a Joomla site is to use wbAMP. This is a Joomla plugin that integrates the AMP project guidelines. The full version gives you access to many more parameters on your AMP pages.

Installation on Drupal

You can install AMP using the Drupal AMP module. This requires Composer Manager, which will enable packaging for PHP and allow you to install and configure the module. Drupal 8 uses a PHP autoloader, so you will not need to use Composer Manager. 

Technical questions

How do I appear in the AMP page carousel?

You must first make sure that your MPA pages are valid. To do this, use theGoogle Validation Tool available in the Google Search Console. Then associate an image with it and make sure you offer relevant content. For the rest, it's up to Google!

What structured data should be included in the MPA pages?

Google recommends using the same Structured data tags for the canonical and AMP pages. This means that you have to align the structured data of your AMP version with the canonical page. AMP Project suggests including these four schema.org properties to give your AMP pages a chance to be visible: content type (especially useful for news sites), title, publication date, and images (thumbnails). As with your canonical versions, the more you enrich your structured data, the easier it will be for Google to understand your content.

Is it necessary to tag its pages with the NewsArticle type of schema.org?

The Newsarticle section is really interesting if you have a press site or a blog. In the case of an e-commerce site or a showcase site that would publish a simple CMS page, the Newsarticle type of schema.org is useless.

What tags should be included to declare AMP on a separate mobile site?

To integrate AMP tags, you need to have some notions of development (unless you use an AMP plugin on your CMS). An AMP page can be broken down as follows:

        • A beacon <!doctype html>
        • A specific html tag : <html amp>: this is what will allow search engines to know that the page exists in MPA</html>.
        • A tag <head />and <body />: nothing exceptional so far, this is the basis of an html page.
        • A beacon <meta charset= »utf-8″ />: it's this chariotset here and no other one that will have to be used.
        • A tag <link rel= »canonical href= »#url » />that refers to the non-AMP version of the page. This tag is essential to avoid duplicate content.
        • A tag <meta name= »viewport » content= »width=device-width,minimum-scale=1″>, The initial attribute-scale=1 is recommended to control the layout of the content</meta>.

&amp;lt;span wg-1=&amp;quot;&amp;quot;&amp;gt;Le script AMP JS via la balise &amp;lt;script async src= »&amp;lt;/span&amp;gt;&amp;lt;a wg-2=&amp;quot;&amp;quot;&amp;gt;&amp;lt;span wg-3=&amp;quot;&amp;quot;&amp;gt;https://cdn.ampproject.org/v0.js&amp;lt;/span&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;span wg-4=&amp;quot;&amp;quot;&amp;gt;« &amp;gt;&amp;lt;/script&amp;gt; qui doit être implémenté à la fin du &amp;lt;head/&amp;gt;&amp;lt;/span&amp;gt;&amp;lt;span wg-5=&amp;quot;&amp;quot;&amp;gt;&amp;lt;br wg-6=&amp;quot;&amp;quot; /&amp;gt; &amp;lt;/span&amp;gt;

What is the impact of MPA on SEO?

Is this a criterion taken into account for referencing?

Google has stated that AMP pages are not a ranking factor. However, with the arrival of the Mobile First Index, many SEOs believe that the MPA is the future of the mobile browsing. But MPA is nothing without global On-site optimization. Today, this format can clearly be a plus in terms of visibility thanks to the carousel, but it is not magic.

Should the content of the MPA be different from the standard version?

The content of the MPA page should be similar to the canonical version. Indeed, some clever guys had fun to propose a different and over-optimized version to manipulate the robots and generate more traffic. But Google has very quickly put the hola and now requires that the pages MPAs are similar (or almost) to the canonical pages..

How to avoid duplicate content with the AMP version 

The rel=canonical tag, if properly implemented, protects you from duplicate content. Combined with the link rel=amphtml tag, you can be sure not to generate duplicate content. 

Conclusion

To sum up, the AMP format has many advantages but nevertheless generates a certain cost, which must be measured. Some websites, especially those specialising in news or highly competitive sectors, have a strong interest in implementing the MPA that would allow them to appear in the search results carousel. In this specific case, the MPA will very quickly prove to be cost-effective. If you plan to use the MPA for the sole purpose of reducing the loading time of your pages, be aware that it is a band-aid on a wooden leg. It is a strategy that will never pay off. It is much better to improve the overall performance of the site, take care of the content and implement structured data. MPA should therefore remain a "plus" for your site but should not replace a thorough work based on editorial, performance and netlinking.

   Article written by Louis Chevant

Complete your reading

The SEO Technical Audit Guide

Step-by-step method to perform a technical audit of your site.

Download for free