SEO pour sites mobiles - autres appareils

Tablettes

Lorsque les webmasters réfléchissent à la manière de configurer leur site Web pour les mobinautes, ils pensent notamment aux utilisateurs de tablettes. Bien que nous n'ayons aucune recommandation spécifique à faire en matière de conception de sites Web optimisés pour les tablettes et les moteurs de recherche, voici quelques conseils qui peuvent être utiles lors de la conception de sites Web destinés à la fois aux utilisateurs de tablettes, de smartphones et d'ordinateurs.

Responsive Web Design

Nous vous recommandons d'utiliser un Responsive Web Design. Dans ce cas, votre site Web utilise le même code HTML pour tous les appareils, et différentes règles de styles CSS sont appliquées afin d'optimiser l'interface du site sur les ordinateurs, les smartphones et les tablettes.

Si votre site Web utilise un Responsive Web Design, testez-le sur plusieurs tablettes afin de vous assurer que son contenu s'affiche correctement. En effet, à l'instar des smartphones, les tablettes sont proposées dans diverses tailles et résolutions d'écran.

Diffusion de contenu en fonction de l'appareil

Un site Web peut afficher des pages différentes (avec du contenu HTML, CSS, JavaScript distinct, etc.) en fonction de l'appareil utilisé. Ces pages sont accessibles via une seule et même URL dans le cas d'une "diffusion dynamique", ou via plusieurs URL distinctes dédiées.

Si votre site Web n'est pas optimisé pour les tablettes, mais que vous disposez d'une version adaptée aux ordinateurs et d'une autre adaptée aux smartphones, nous vous conseillons, par expérience, de proposer aux utilisateurs de tablettes les pages optimisées pour les ordinateurs plutôt que les pages optimisées pour les smartphones.

Si votre site Web possède une version optimisée pour les tablettes, ces consignes peuvent vous aider à le configurer :

  • Diffusion dynamique : dans cette configuration, les mêmes URL sont utilisées pour les utilisateurs d'ordinateurs, de smartphones et de tablettes, avec des contenus HTML et CSS différents en fonction du user-agent. Comme indiqué dans nos recommandations destinées aux webmasters de sites Web pour smartphones, nous vous suggérons vivement d'utiliser l'en-tête HTTP "Vary".
  • URL distinctes dédiées aux tablettes : dans ce cas, nous vous recommandons vivement d'autoriser l'exploration par Googlebot des URL pour tablette et d'utiliser un attribut rel="canonical" pour chacune d'entre elles afin de renvoyer vers l'URL équivalente du site pour ordinateur.

Feature phones

Nous recommandons aux webmasters de sites consultés par des utilisateurs de smartphones de recourir à un Responsive Web Design dans la mesure du possible. Toutefois, étant donné que les feature phones ne peuvent pas suivre les requêtes médias CSS, les webmasters qui souhaitent diffuser leur contenu sur ce type de téléphone doivent configurer leur site de manière à utiliser soit la diffusion dynamique, soit des URL distinctes.

Nous recommandons également d'inclure dans chaque page conçue pour les feature phones la balise <link rel="alternate" media="handheld">, comme décrit ci-dessous.

Cette rubrique explique comment mettre en œuvre chacune de ces configurations.

Diffusion dynamique

Pour que votre serveur affiche de manière dynamique les contenus optimisés pour les feature phones via la même URL que celle utilisée pour les autres appareils, la mise en œuvre est la même que pour les smartphones. Le serveur doit comporter l'en-tête de réponse HTTP "Vary: User-Agent" et vous devez éviter les pièges courants lors de la détection des user-agents. De plus, pensez à ajouter la balise suivante à votre page :

<link rel="alternate" media="handheld" href="[current page URL]" />

URL distinctes

Il existe trois configurations possibles pour afficher du contenu sur les ordinateurs, les smartphones et les feature phones via différentes URL. Ces configurations font appel aux annotations que nous avons précédemment décrites dans le cadre de la conception de sites optimisés pour les smartphones et les feature phones.

Configuration avec URL dédiées

Dans cette configuration, les URL sont de type :

  • http://www.example.com/page-1 pour les ordinateurs ;
  • http://m.example.com/page-1 pour les smartphones ;
  • http://phone.example.com/page-1 pour les feature phones.

Dans cette configuration, nous vous recommandons d'ajouter les annotations suivantes pour que le lien entre les pages équivalentes sur différents appareils soit bien intégré dans nos algorithmes :

Pour www.example.com/page-1, ajoutez :

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

Pour m.example.com/page-1, ajoutez :

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

Pour phone.example.com/page-1, ajoutez :

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

Configuration avec URL dédiées aux ordinateurs et URL dédiées à tous les appareils mobiles

Dans cette configuration, le contenu du site Web pour ordinateur est diffusé via une URL, et le contenu pour tous les appareils mobiles, c'est-à-dire les smartphones et les feature phones, est diffusé via une autre URL. Exemples :

  • http://www.example.com/page-1 pour les ordinateurs ;
  • http://m.example.com/page-1 pour les smartphones et les feature phones

Dans ce cas, l'annotation de l'URL http://www.example.com/page-1 est la suivante :

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

Pour la page m.example.com, ajoutez :

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

La balise rel="canonical" doit être ajoutée, que les pages soient optimisées ou non pour les smartphones ou pour les feature phones.

La réponse du serveur doit inclure l'en-tête HTTP "Vary: User-Agent". Cet en-tête indique aux caches Internet et à Googlebot que la réponse du serveur peut varier selon le user-agent. Googlebot utilise ce signal pour l'exploration.

Configuration avec URL dédiées aux feature phones

Dans cette configuration, le Responsive Web Design ou la diffusion dynamique permettent de diffuser le contenu du site Web pour les ordinateurs et pour les smartphones via la même URL, et une URL distincte est dédiée aux feature phones. Exemples :

  • http://www.example.com/page-1 pour les ordinateurs et pour les smartphones
  • http://m.example.com/page-1 pour les feature phones.

Dans ce cas, l'annotation de l'URL http://www.example.com/page-1 est la suivante :

<link rel="alternate" media="handheld" href="http://m.example.com/page-1" />

L'annotation de l'URL http://m.example.com/page-1 est :

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

Redirections et en-tête HTTP "Vary"

Sachez que si votre site redirige automatiquement les mobinautes vers le site mobile lorsqu'ils accèdent au site pour ordinateur, ou inversement, vous devez veiller à ce que l'en-tête HTTP "Vary" soit inclus dans la réponse de votre serveur.

Sitemaps

Nos recommandations concernant l'utilisation de sitemaps pour les feature phones et de sitemaps pour les autres URL dédiées aux smartphones restent les mêmes.

Envoyer des commentaires concernant…