URL distinctes

Dans cette configuration, chaque URL du site pour ordinateur possède une URL équivalente qui permet d'afficher du contenu optimisé pour les mobiles.

Une configuration courante consiste à proposer des pages optimisées pour les ordinateurs sur www.example.com et des pages correspondantes sur m.example.com pour les mobinautes. Nous n'avons pas de préférence quant au format des URL tant qu'elles sont toutes accessibles par les user-agents de Googlebot.

Les URL mobiles distinctes affichent un code différent sur les ordinateurs et sur les appareils mobiles, voire sur les tablettes, via des URL différentes.

TL;DR

  • Indiquez la relation entre deux URL avec une balise <link> ainsi que les éléments rel="canonical" et rel="alternate".

  • Détectez les chaînes de user-agents et redirigez-les correctement.

Annotations des URL mobiles et pour ordinateur

Pour aider nos algorithmes à comprendre les URL mobiles distinctes, nous vous recommandons d'utiliser les annotations suivantes :

  1. Sur la page pour ordinateur, ajoutez une balise link rel="alternate" spéciale qui renvoie vers l'URL mobile correspondante. Cela permet à Googlebot de découvrir l'emplacement des pages mobiles de votre site.
  2. Sur la page mobile, ajoutez une balise link rel="canonical" qui renvoie vers l'URL pour ordinateur correspondante.

Nous acceptons deux méthodes pour intégrer cette annotation : dans le code HTML des pages elles-mêmes et dans les sitemaps. Par exemple, supposons que l'URL pour ordinateur soit http://example.com/page-1 et que l'URL mobile correspondante soit http://m.example.com/page-1. Dans ce cas, les annotations seraient les suivantes.

Annotations dans le code HTML

Sur la page pour ordinateur http://www.example.com/page-1, ajoutez :

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

Sur la page mobile http://m.example.com/page-1, l'annotation doit être la suivante :

<link rel="canonical" href="http://www.example.com/page-1">

Il est obligatoire d'utiliser cette balise rel="canonical" sur l'URL mobile qui renvoie vers la page pour ordinateur.

Annotations dans le sitemap

L'annotation rel="alternate" des pages pour ordinateur peut être incluse directement dans les sitemaps comme suit :

<?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/page-1/</loc>
<xhtml:link
rel="alternate"
media="only screen and (max-width: 640px)"
href="http://m.example.com/page-1" />
</url>
</urlset>

Toutefois, la balise rel="canonical" obligatoire doit quand même être ajoutée au code HTML de la page mobile.

Annotation en détail

Remarquez les attributs de la balise link sur la page pour ordinateur :

  • L'attribut rel="alternate" indique que cette balise spécifie une URL alternative à la page pour ordinateur.
  • La valeur de l'attribut média est une chaîne de requête média CSS qui définit les caractéristiques média indiquant dans quel cas Google doit utiliser l'URL alternative. Dans ce cas, nous utilisons une requête média qui est généralement utilisée pour cibler les appareils mobiles.
  • L'attribut "href" indique l'emplacement de l'URL alternative, à savoir la page sur m.example.com.

Cette annotation bidirectionnelle aide Googlebot à détecter votre contenu et permet à nos algorithmes de comprendre la relation entre vos pages mobiles et pour ordinateur, et de les traiter en conséquence. Lorsque différentes URL permettent d'afficher le même contenu dans différents formats, l'annotation indique à nos algorithmes que ces deux URL comportent un contenu équivalent et doivent être traitées comme une seule entité et non deux. Si les versions de la page mobile et pour ordinateur sont traitées séparément, les URL mobile et pour ordinateur peuvent toutes deux s'afficher dans les résultats de recherche pour ordinateur, et elles risquent d'être moins bien classées que si nous avions compris leur relation. En outre, voici certaines des erreurs les plus fréquentes pour cette configuration :

  • Lors de l'utilisation d'un balisage rel="alternate" et rel="canonical", conservez un ratio de 1:1 entre la page mobile et la page pour ordinateur correspondante. Évitez plus particulièrement d'annoter plusieurs pages pour ordinateur se rapportant à une seule page mobile, ou vice versa.
  • Vérifiez vos redirections : assurez-vous que vos pages pour ordinateur ne redirigent pas par inadvertance vers une seule page mobile sans rapport.
Si vous choisissez de créer un site mobile distinct, faites attention aux erreurs fréquentes telles que la création de redirections incorrectes pour les mobinautes.

Redirection automatique

Lorsqu'un site Web utilise des URL distinctes pour les ordinateurs et pour les mobiles, nous conseillons au webmaster de rediriger automatiquement les internautes vers l'URL la mieux adaptée. Si votre site Web redirige automatiquement les internautes, veillez à traiter tous les robots d'exploration Googlebot comme n'importe quel autre user-agent et à les rediriger correctement.

Techniques de redirection compatibles

Googlebot est compatible avec les deux types de redirection ci-dessous :

  • Redirections HTTP
  • Redirections JavaScript

Utilisation de redirections HTTP

La redirection HTTP est une technique fréquemment utilisée pour rediriger les clients vers des URL spécifiques aux appareils. Dans la plupart des cas, elle est effectuée en fonction du user-agent contenu dans les en-têtes de requête HTTP. La redirection doit être cohérente avec l'autre URL spécifiée dans la balise link rel="alternate" de la page ou dans le sitemap.

Pour ce faire, le serveur peut effectuer la redirection avec un code d'état HTTP 301 ou 302, mais le code 302 est préférable si possible.

Redirections JavaScript

S'il vous est difficile de mettre en œuvre la redirection HTTP, vous pouvez utiliser du code JavaScript pour rediriger les internautes vers les URL vers lesquelles la balise link rel="alternate" renvoie. Si vous décidez de l'employer, tenez compte de la latence provoquée par la redirection côté client. En effet, la page doit être chargée une première fois, et le code JavaScript analysé et exécuté avant que la redirection ne soit déclenchée.

De nombreuses méthodes permettent de mettre en œuvre une redirection basée sur du code JavaScript. Par exemple, vous pouvez utiliser du code JavaScript pour exécuter les requêtes média que votre site utilise déjà dans les annotations de lien de la page, à l'aide de la fonction JavaScript matchMedia().

Redirections unidirectionnelles et bidirectionnelles

Les stratégies de redirection varient en fonction des sites Web. Certains sites Web ne redirigent que les mobinautes visitant une page pour ordinateur (redirections "unidirectionnelles"), d'autres redirigent à la fois les utilisateurs d'ordinateurs et les mobinautes vers les pages optimisées pour leur appareil (redirections "bidirectionnelles").

Pour Googlebot, nous n'avons aucune préférence. Nous recommandons aux webmasters de tenir compte de leurs internautes lorsqu'ils choisissent une stratégie de redirection.Le plus important est de rediriger les utilisateurs correctement et de manière cohérente (c'est-à-dire de les rediriger vers le contenu équivalent du site pour ordinateur ou mobile). Si votre configuration n'est pas correcte, certains internautes risquent de ne pas pouvoir afficher du tout votre contenu.

Nous vous suggérons également de laisser aux internautes la possibilité de passer outre la stratégie de redirection, c'est-à-dire de permettre aux mobinautes d'afficher la page destinée aux ordinateurs et inversement.

Envoyer des commentaires concernant…