web-dev-qa-db-fra.com

Liaison de pages de bureau et mobiles

Étant donné que je suis une personne non technique souhaitant entrer dans l’espace mobile, je voudrais demander quelques conseils et le code spécifique à ajouter à mes pages si possible.

Mon site de bureau est bilingue anglais/espagnol avec toutes les pages traduites par l'homme (par opposition à la traduction automatique). Partons pour un exemple:

  • www.example.com/new-york.html (anglais)
  • www.example.com/nueva-york.html (espagnol)

La version mobile sera:

  • m.example.com/new-york.html (anglais)
  • m.example.com/nueva-york.html (espagnol)

Les pages mobiles seraient probablement un peu plus petites que les pages de bureau, mais elles porteraient le même nom de fichier et le même contenu.

Je crois que cela s'appelle "la même approche d'URL", serait-ce correct?

Or, on m'a dit que pour aider Google à explorer les deux sites et à éviter les problèmes de contenu en double, je devais utiliser rel=alternate/rel=canonical pour relier des pages entre plates-formes - de bureau et mobile. Il semble qu'une sorte de lien bidirectionnel soit requis, de A à B et de B à A pour chaque page et langue.

J'apprécierais profondément votre contribution sur deux choses:

  1. Si ce que je viens de dire est correct et peut être mis en œuvre comme ça.

  2. Si cela est correct, pourriez-vous me donner le code exact à placer dans les balises <head></head> des pages de bureau et mobiles?

mobilerel-canonicalrel-alternatedesktop
2
Daniel

  1. En réalité, votre configuration est une URL distincte et non pas une "approche identique", car les URL sont différentes, elles se trouvent sur un sous-domaine. "même approche d'URL" signifie que votre contenu mobile est diffusé dynamiquement sur les mêmes URL que le contenu du bureau.

  2. Sur les pages de bureau, ajoutez une autre balise pointant sur les URL de mobile:

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

et sur les pages mobiles, ajoutez la balise canonique pointant vers les pages du bureau:

<link rel="canonical" href="www.example.com/new-york.html" >

Ces balises doivent être ajoutées au code source des pages à l'intérieur des balises <head></head> et doivent être utilisées sur toutes les pages dotées d'une version mobile.

Ces balises peuvent également être définies dans les fichiers sitemap.xml plutôt que dans le code source des pages.

Plus d'informations peuvent être trouvées ici Création d'un site Web optimisé pour les smartphones

Je pourrais aussi mentionner que la structure de votre site multilingue n'est pas idéale. Il est également recommandé d'ajouter différentes pages de langue dans un sous-dossier, telles que www.example.com/en/ et www.example.com/es/, plutôt que d'utiliser simplement des URL. Cela permet aux utilisateurs de mieux comprendre la langue de la page et vous permet également, si vous le souhaitez, de cibler géographiquement différents dossiers sur différents locaux de Google Webmaster Tools.

Plus d'infos ici: Sites multirégionaux et multilingues

1
Max

Ce n'est pas la même approche d'URL. Cela signifierait de n'avoir qu'une seule URL pour chaque contenu (et non deux: une pour les ordinateurs de bureau et une pour les appareils mobiles), quel que soit l'appareil utilisé. Ceci est généralement réalisé avec responsive web design .

Dans cette réponse, je suppose que vous avez déjà liens entre les traductions (en utilisant le type de lien alternate avec l'attribut hreflang.).

Cela dit, vous avez en fait deux questions:

  • Comment faire le lien entre les pages mobiles et de bureau?
  • Comment spécifier une page canonique?

Bureau ↔ Mobile

Pour créer un lien depuis une page du bureau vers la page mobile correspondante, utilisez le type de lien alternate.

Vous pouvez également spécifier l'attribut media pour indiquer les agents utilisateur pour lesquels le lien est intéressant.

Ainsi sur www.example.com/new-york.html, vous pouvez avoir l'élément link suivant:

<link href="http://m.example.com/new-york.html" rel="alternate" media="only screen and (max-width: 640px)"> 
<!-- instead of "only screen and (max-width: 640px)", use the criteria you want for devices that should visit the separate mobile page -->

Et la même chose (sans attribut media) pour le lien de mobile à bureau.

Canonique

Sauf si les pages ont un contenu différent (ce qui n'est pas le cas dans votre exemple), vous devez indiquer que l'une des pages (mobile ou ordinateur de bureau) est canonique.
Typiquement, la variante de bureau est choisie pour être la page canonique.

Ainsi sur m.example.com/new-york.html, vous pouvez avoir l'élément link suivant:

<link href="http://www.example.com/new-york.html" rel="canonical">

(Vous pouvez également avoir cet élément link sur www.example.com/new-york.html lui-même.)

Et au lieu d’avoir deux éléments link avec la même valeur href, vous pouvez les combiner. Exemple: sur m.example.com/new-york.html:

<link href="http://www.example.com/new-york.html" rel="alternate canonical">
0
unor