Que pouvez-vous attendre de cet article ?

Lorsque vous avez deux sites internet séparées pour votre version mobile et ordinateur vous avez besoin de montrer clairement la relation entre les deux pour les moteurs de recherche, pour les aider à comprendre quel site montrer à vos utilisateurs et éviter des problèmes de contenu dupliqué. Dans cet article, nous allons voir comment le faire.

Qu’est-ce que l’attribut rel=”alternate” mobile ?

Lorsque les gens parlent de rel=”alternate” mobile, rel=”alternate” media tag ou rel=”alternate” media attribute, ils se réfèrent à :

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.exemple.fr/">

Pour le rendre plus simple, nous allons l’appeler l’attribut mobile à partir de maintenant.

Cette relation du lien est utilisé pour indiquer une relation entre un site pour ordinateur et un pour mobile aux moteurs de recherche. Si vous avez un site différent pour les utilisateurs ordinateurs et ceux mobile, et vous faites attention à votre référencement SEO, vous devez utiliser l’attribut mobile.

Quand devrais-je utiliser l’attribut mobile ?

Si un pourcentage important de vos visiteurs sont des utilisateurs mobile, il apparaît logique d’optimiser leur expérience avec un site mobile dédié.Notez que ceci est différent à avoir “un site au design réactif”. Avec un site au design réactif, il ya seulement un seul et même site avec un design qui s’ajuste automatiquement en fonction du dispositif sur lequel il doit s’afficher, alors qu’avec un site dédié vous aurez un site séparé avec ses propres URL.

Dans ce cas, lorsque vous avez deux sites distinct pour chaque appareil vous voulez que les moteurs de recherche affichent le bon. Lorsque les utilisateurs sur un ordinateur utilisent un moteur de recherche et que votre site apparaît vous voulez que ce soit la version pour les ordinateurs qui s’affichent, s’ils utilisent un mobile vous voulez que ce soit la version mobile.

Comment incorporer l’attribut mobile ?

Utilisez l'attribut mobile pour indiquer la version mobile d'une page.
Utilisez l'attribut mobile pour indiquer la version mobile d'une page.

L’attribut mobile peut être implémenter dans votre HTML ou à travers le fichier sitemap XML.

Implémentation dans le HTML

Pour la page bureau
Dans le code source de votre page bureau, définissez la version mobile de votre page :

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.exemple.fr/">

Cela signifie que le site internet dédié au mobile doit être affiché quand la largeur de l’écran de l’appareil de l’utilisateur est inférieur à 640 pixels.

Pour la page mobile
Dans le code source de votre page pour mobile, définissez la version ordinateur de votre page :

<link rel="canonical" href="http://www.exemple.fr/">

L’URL canonique empêche tout contenu dupliqué. Elle indique aux moteurs de recherche qr la page bureau doit être indexées

Implémentation dans le fichier sitemap XML

Google supporte aussi l’attribut mobile à travers le fichier sitemap XML.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <url>
        <loc>http://www.example.com/</loc>
        <xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/" />
    </url>
</urlset>

Veuillez noter qu’il est toujours important d’avoir l’URL canonique sur la page mobile, pointant vers la page bureau.

Bonnes pratiques pour l’attribut mobile

Références bi-directionnelles

Afin que les moteurs de recherche comprennent la relation entre les pages ordinateurs et mobiles, les pages ordinateurs ont besoin d’avoir l’attribut mobile et la page mobile “confirme” la relation en utilisant l’URL canonique.

Relations exclusives

Chaque page pour les ordinateurs doivent seulement avoir la même en version mobile et vice versa.

Évitez les redirections

Éviter d’avoir rel=alternate mobile et rel=canonical tags qui pointe vers une URL qui redirige vers d’autres pages. Cela rend confus les moteurs de recherche.

Utilisez des URL absolues

Even though it’s not against the specification of the link tag, the general consensus is not to use relative URLs when defining mobile attribute. Relative URLs are more likely to be interpreted wrong by search engines. The same best practice applies to other uses of the link tag : URL canoniqueattributs hreflang et attributs de pagination.

Testez l’optimisation pour les mobiles

Utiliser l’outil de Google pour tester si votre site est optimisé pour les mobiles.

Questions fréquentes à propos de l’attribut mobile

  1. Pourquoi les moteurs de recherche ignorent mon attribut mobile ?
  2. J’ai un site avec un design réactif. Devrais-je également utiliser l’attribut mobile ?
  3. Mon contenu est différent sur les pages pour ordinateurs et celle pour mobile. Est-ce un problème ?

1. Pourquoi les moteurs de recherche ignorent mon attribut mobile ?

L’attribut mobile est plus considéré comme un signal plutôt qu’une directive. Les moteurs de recherche ne sont pas obligés de suivre votre définition de vos attributs de pages, mais très souvent ils le font.

2. J’ai un site avec un design réactif. Devrais-je également utiliser l’attribut mobile ?

Non, si vous avez un site avec un design réactif vous n’avez pas besoin d’utiliser l’attribut. L’attribut est seulement destiné à être utilisé lorsque vous avez deux sites séparés avec des URL différentes pour la version ordinateur et la version mobile.

3. I’m serving different content on my desktop and mobile pages. Is that a problem ?

Les moteurs de recherche sont toujours orientés pour les bureaux, donc votre site pour les bureaux mènent lorsque les moteurs de recherche déterminent la pertinence pour les recherches. Cependant Google, a annoncé que cela risque de changer au cours de l’année 2018 pour eux : les versions mobiles auront leur préférence, ils ont appelés cela “mobile-first index”

Contrairement à une croyance populaire, les utilisateurs mobiles ne souhaitent pas voir moins de contenu et moins de fonctionnalités, donc il apparaît logique de leur offrir le même, mais en utilisant une version optimisée pour mobile.

Sources

ContentKing Academy Content Team
Steven van Vessum
Steven van Vessum

Steven est le Chef de l’expérience client dans l’entreprise ContentKing. Cela signifie qu’il s’occupe de tout lié avec les clients et avec l’inbound marketing. C’est là où il veut être. Il aime améliorer le référencement des sites web dans les moteurs de recherche et parler de l’inbound marketing.

Vojtěch Zach
Vojtěch Zach

Vojtěch is ContentKing’s Customer Support & Localization Manager. He is the one who will answer your questions when you reach out to us. He is a studied translator, so apart from making our users happy, he also loves to take on our localization challenges.

Vincent van Scherpenseel
Vincent van Scherpenseel

Vincent est le directeur en chef de ContentKing. Le management de produit le passionne et il aime particulièrement son travail lorsque le design, le développement et le commerce s’entremêlent. Ce qui fait de ContentKing un challenge idéal pour lui.

Commencer votre essai gratuit de 14 jours

Vous pouvez commencer en 20 secondes

Insérez un nom de domaine valide, s'il vous plaît (www.exemple.fr).
  • La carte de crédit n'est pas requise
  • Aucune installation requise
  • Sans engagement