The SEO landscape is changing every year at a rapid pace. Since 2016 or so, we have been hearing about the AMP (Accelerated Mobile Pages) format. Until now, it was too restrictive to apply to the majority of sites and especially e-commerce sites. But since some technical barriers have been removed, AMP has become the format of the future for mobile pages.
Contrary to popular belief, this project has been supported by Google, but it does not belong to it. In fact, in addition to the 160 advertising platforms that fund search, AMP is also supported by other search engines like Bing, Baidu and Yahoo Japan. In 2018, Bing even developed its own AMP cache to improve mobile experience for its users. AMP is available on several reputable CMS like WordPress, Prestashop or Drupal and can be easily integrated with different plugins. AMP has therefore quickly become a major project, supported by big web players, who place the UX (user experience) at the top of their priority list.
Contents
What is an accelerated mobile page?
AMP stands for Accelerated Mobile Pages. As the name suggests, it is a page format specifically designed to load very quickly on mobile devices. AMP pages, recognizable by a small lightning bolt in the SERPs, offer a rather extraordinary user experience. Very light, they load instantly and offer a sleek version of the content. Easy to read, fast to load: why isn't this format generalized to all pages on mobile? Simply because to achieve such a result, it is mandatory to reduce requests and other JS (JavaScript) that usually slow down loading times, as much as possible. As a result, AMP is now mainly used for media and content sites.
Why did this format appear?
The web has an exponential number of mobinauts i.e. Internet users surfing the web with their smartphone. If optimizing a site for desktop is relatively easy, optimizing it for mobile is a completely different matter. Mobile browsing involves many more technical constraints, both in terms of code and web design. In fact, it's quite easy to understand: to go from desktop to mobile, you have to fit all the content and all the technologies used for 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 AMP 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, which means an ultra simplified HTML code without tags that can slow down its loading (like image tags). JS (JavaScript) is no longer totally excluded, but predefined JS libraries are imposed. We speak here of AMP JS. Finally, these pages are stored in Google's cache, the AMP CDN, which improves loading times even more.
Can we use AMP on all sites?
Today, all sites can use the AMP format. However, its implementation requires a lot of sacrifices on the web design and UX side of your web pages. AMP HTML puts performance before aesthetics. Fortunately, there are now multiple commands that allow you to modify AMP documents to make them more adapted to your SEO strategy and your brand image. So it would be a shame to miss out, even if you have an e-commerce site. The e-commerce site Greenweez is a very good example. Most of its landing pages are in AMP without disrupting the UX. We simply don't recommend AMP if you monetize your site. Indeed, you should know that AMP allows only one ad tag per page. It is therefore to be avoided in this specific case.
What domain or subdomain name should I give to my AMP page?
You can keep your domain or even use a different domain or sub-domain. The only precautions to take are the relationships between pages. On the normal HTML version of your pages, you must tell Google that it is also available in AMP format. To do this, use a tag rel=amphtml tag. On the other hand, on the page in AMP format, you must tell the search engine that there is an original page. To do this, you will simply integrate the traditional tag rel=canonical tag.
How to associate an image to its AMP page?
Dans AMP, vous ne devez pas utiliser la balise <img> pour charger les images. Utilisez plutôt l’élément personnalisé <amp-img> car il gère l’optimisation du chargement de toutes les images de votre page.
Where do AMP pages appear?
AMP pages appear in search results on mobile only. They are easily recognizable by the small lightning bolt right next to the page title. Some of them are located in the AMP carousel at the top of the first page of results. 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, United States, Italy, United Kingdom, Indonesia, Russia, Japan and Mexico. So it's something to take into account if your site is multilingual.
How to install AMP?
Installation on WordPress
You have several options to install AMP on a WordPress site. You can use the "AMP for WordPress” plugin. 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 like WooCommerce.
Installation on Joomla
The easiest way to install AMP on a Joomla site is to use wbAMP. It 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 AMP module on Drupal. 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 won't need to use Composer Manager.
Technical questions
How to appear in the carousel of AMP pages?
First of all, you have to make sure that your AMP pages are valid. To do this, use the Google Validation Tool in the Google Search Console. Then, associate an image to it and make sure to propose relevant content. For the rest, Google decides!
What structured data to include in AMP pages
Google recommends using the same structured data tags for both canonical and AMP pages. This means that you should align the structured data in 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 for your canonical versions, the more you enrich your structured data, the easier it will be for Google to understand your content.
Should I tag my 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.
Which tags to include to declare AMP on a mobile site separately?
To integrate AMP tags, it is necessary to have some notions of development (unless you use an AMP plugin on your CMS). An AMP page breaks down as follows:
-
-
-
- Une balise <!doctype html>
- Une balise html spécifique : <html amp>: c’est elle qui permettra aux moteurs de recherche de savoir que la page existe en AMP
- Une balise <head /> et <body />: rien d’exceptionnel jusqu’ici, c’est la base d’une page html.
- Une balise <meta charset= »utf-8″ />: c’est ce charset là et aucun autre qu’il faudra utiliser
- Une balise <link rel= »canonical href= »#url » /> qui renvoie vers la version non-AMP de la page. Cette balise est essentielle pour éviter le contenu dupliqué.
- Une balise <meta name= »viewport » content= »width=device-width,minimum-scale=1″>, L’attribut initial-scale=1 est recommandé pour contrôler la mise en page du contenu.
-
-
Le script AMP JS via la balise <script async src= »https://cdn.ampproject.org/v0.js« ></script> qui doit être implémenté à la fin du <head/>
What is the impact of AMP on SEO?
Is it a consideration for SEO?
Google has stated that AMP pages are not a ranking factor. Yet, with the advent of the Mobile First Index, many SEOs believe that AMP is the future of mobile browsing. But AMP is nothing without a 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 AMP page be different from the standard version?
The content of the AMP page must be similar to the canonical version. In fact, some clever people have had fun proposing a different and over-optimized version to manipulate the robots and generate more traffic. But Google quickly put the hola and now requires that AMP pages are similar (or almost) to the canonical pages..
How to avoid duplicate content with AMP?
The rel=canonical tag, if implemented correctly, protects you from duplicate content. Combined with the link rel=amphtml tag, you are assured not to generate duplicate content.
Conclusion
To summarize, the AMP format has many advantages but nevertheless generates a certain cost, which must be measured. Some websites and especially those specialized in news or highly competitive sectors have every interest in implementing AMP which would allow them to appear in the carousel on search results. In this case, AMP will quickly prove to be profitable. If you are planning to use AMP only to reduce the loading time of your pages, be aware that it is a band-aid on a wooden leg. It's a strategy that will never pay off. It is much better to improve the overall performance of the site, to take care of the content and to put in place structured data. AMP should therefore remain a "plus" for your site but should not replace an in-depth work based on editorial, performance and netlinking.
Further reading
The complete guide on the referencing of e-commerce sites
The 6 key steps to follow to correctly optimize your e-commerce site with a good natural referencing.