Google accepte expressément la configuration avec des URL séparées pour les versions Bureau et Mobile du même Site, mais conseille d'utiliser quelques annotations pour permettre à ses algorithmes de les interpréter correctement. En particulier, Google demande que :
| ▪ | Dans la Page pour Bureau soit ajoutée la balise link rel="alternate" qui dirige à l'URL correspondante pour les dispositifs mobiles. |
| ▪ | Dans la Page pour Mobile soit ajoutée la balise link rel="canonical" qui dirige à l'URL pour Bureau correspondante. |
Ce type d'annotations indique aux algorithmes de Google que les deux URL ont des contenus équivalents et qu'elles devraient être considérées comme une entité unique et non pas comme deux entités distinctes. Ce point est très important car si les versions Bureau et Mobile de la Page sont considérées comme deux entités distinctes, aussi bien l'URL bureau que l'URL pour dispositifs mobiles s'afficheront dans les résultats de recherche. Dans ce cas, par ailleurs, pour les deux Pages, le classement pourrait chuter à cause d'une pénalisation éventuelle due à la présence de contenus dupliqués.
Lors de la configuration de ces annotations, il est ensuite nécessaire de faire attention à :
| ▪ | conserver un rapport 1:1 entre les Pages pour Bureau et les Pages correspondantes pour Mobile. En particulier, il faut éviter d'insérer des annotations dans de nombreuses Pages Bureau qui se réfèrent à une même Page Mobile (ou vice versa). |
| ▪ | configurez les redirections uniquement entre des Pages réellement liées. |
En travaillant avec WebSite X5, la manière la plus simple de procéder est de créer le Site pour la version Mobile comme une copie exacte du Site pour la version Bureau : ainsi, les deux Sites ont exactement les mêmes Pages (fichiers avec le même nom) et la configuration du rapport 1:1 entre elles est simple.
En reprenant l'exemple précédent et en supposant donc de devoir insérer les annotations requises par Google pour gérer les versions Bureau, Tablette et Smartphone d'un Site Web, il faut :
| ▪ | Dans le champ Code personnalisé sélectionnez l'option Avant la balise de fermeture </HEAD> et écrivez les annotations suivantes : |
<link rel="alternate" media="only screen and (max-width: 480px)" href="http//www.monsite.fr/smartphone/[CURPAGE]">
<link rel="alternate" media="only screen and (min-width: 481px) and (max-width: 1024px)" href="http//www.monsite.fr/tablet/[CURPAGE]">
|
Après avoir enregistré les modifications effectuées, vous pouvez procéder au travail sur le Site correspondant à la version Tablette :
| ▪ | Dans le champ Code personnalisé sélectionnez l'option Avant la balise de fermeture </HEAD> et écrivez l'annotation suivante : |
<link rel="canonical" href="http//www.monsite.fr/[CURPAGE]">
|
| ▪ | Répétez les opérations effectuées pour le Site pour Tablette également pour le Site pour Smartphone: l'annotation à insérer reste inchangée. |
Pour mieux comprendre le fonctionnement du processus décrit ci-dessus, considérez que :
| ▪ | en configurant les annotations avec la fenêtre Statistiques, SEO et code, celles-ci sont automatiquement insérées dans le code de toutes les Pages des Sites. |
| ▪ | Dans les annotations, l'URL de la Page sur laquelle vous travaillez doit être insérée comme valeur de l'attribut href : en utilisant la chaîne [CURPAGE], le nom du fichier correspondant à la Page est identifié et inséré automatiquement par le Programme. |
| ▪ | Dans les Pages de la version Bureau du Site, il faut utiliser la balise link rel="alternate" pour déclarer toutes les alternatives disponibles: dans ce cas spécifique, l'opération a été répétée 2 fois pour relier aussi bien la version pour Tablette que celle pour Smartphone. |
| ▪ | Dans l'annotation de la balise link rel="alternate", il est nécessaire de déclarer également le moment où, à la place de la version Bureau, la version Smartphone ou Tablette d'un Site doit être proposée. Dans le code d'exemple proposé, les chaînes de requête média définissent que pour des définitions inférieures à 480px Google doit proposer l'URL de la version Smartphone, tandis que pour des définitions comprises entre 481px et 1024px, il doit proposer la version Tablette du Site. |
Si les Sites des versions Bureau, Tablette et Smartphone ne contiennent pas exactement les mêmes Pages et/ou contiennent des Pages correspondantes mais avec des noms différents, il est nécessaire d'intervenir manuellement sur le code de chaque Page pour insérer correctement les annotations nécessaires.
| ▪ | Ouvrez le Projet du Site pour la version Bureau. À l'Étape 3 - Plan sélectionnez la Page sur laquelle vous souhaitez travailler et cliquez sur le bouton Propriétés. |
| ▪ | Dans la fenêtre Propriétés de la page ouvrez la section Avancées et placez-vous dansle champ Code personnalisé . |
| ▪ | Sélectionnez l'option Avant la balise de fermeture </HEAD> et écrivez les annotations suivantes : |
<link rel="alternate" media="only screen and (max-width: 480px)" href="http//www.monsite.fr/smartphone/page-1.html">
<link rel="alternate" media="only screen and (min-width: 481px) and (max-width: 1024px)" href="http//www.monsite.fr/tablet/page-1.html">
|
Où http//www.monsite.fr/smartphone/page-1.html et http//www.monsite.fr/tablet/page-1.html sont les URL des Pages du Site respectivement de la version Mobile et de la version Tablette correspondant à celle du Site de la version Bureau sur lequel vous travaillez.
| ▪ | Répétez ce dernier passage pour toutes les Pages du Site afin d'insérer dans chaque Page les annotations avec les URL des Pages correspondantes pour Smartphone et pour Tablette. |
Un travail analogue doit être effectué pour les Pages du Site de la version Smartphone et de la version Tablette. Dans ce cas, l'annotation à insérer est la suivante :
<link rel="canonical" href="http//www.monsite.fr/desktop/page-1.html">
|
Où http//www.monsite.fr/desktop/page-1.html est l'URL de la Page du Site de la version Bureau correspondant à celle du Site de la version Smartphone ou de la version Tablette sur laquelle vous travaillez.
|
