Le point sur le référencement des menus

[n00by]

J'aimerais vous faire part de plusieurs techniques de référencement de menu en images et voir votre retour sur "l'acceptabilité" de ces méthodes.

Tout d'abord un point sur les avantages des menus en images : choix de la typo pour les graphistes, plus grande liberté de formes, utilisation de couleur particulières, possibilité d'animation des .gif, gestion de la transparence en png ou gif (pour les navigateurs récents)...Bref pas mal de petites choses qui différencie d'un simple menu en Arial...

Maintenant place aux méthodes :

- Le cloaking : Affiché selon la provenance. Je ne m'aventurerai pas plus loin puisque cette méthode est à bannir.

- La méthode "display none" : Mettre l'image et mettre un texte en display none (balise CSS permettant de ne pas afficher le code)

- La méthode "text-indent : -9999px" : Déplacer le texte en dehors de l'écran. En gros le texte est dans le code mais il vous faudrait une résolution de plus de 9999px pour le voir.

- Le z-index : Mettre l'image au dessus du texte (incompatible avec tous les navigateurs)

Loin de moi la prétention d'avoir cité toutes les techniques, je trouve pour ma part cela assez border-line. Maintenant y a-t-il une autre solution qui permette une liberté graphique ?

D'autres techniques ? Des avis ? Des remarques ?

[captain_torche]

Personnellement, j'utilise le text-indent négatif, qui permet de ne pas surcharger la page de DIVs et SPANs inutiles.

Je ne trouve pas cela borderline, il n'y a aucune tromperie (le contenu "masqué" est celui que l'on lit dans l'image, par exemple).

[n00by]

Je pense la même chose mais cette phrase m'énerve :

http://www.google.com/support/webmasters/b...mp;answer=66353

Texte et liens cachés

Si votre site contient du texte ou des liens cachés, il risque d'être considéré comme peu fiable, car il présente aux moteurs de recherche un contenu différent de celui destiné aux visiteurs. Les contenus textuels (tels qu'un nombre excessif de mots clés) peuvent être cachés de plusieurs manières, dont les suivantes :

[...]

* utilisation d'une feuille de style CSS pour cacher du texte ;

[captain_torche]

Et c'est exactement là que je ne considère pas cela comme du texte caché; techniquement, le contenu proposé aux moteurs est identique à celui présenté aux visiteurs.

Ce qui est pénalisé, c'est le trop grand nombre de mots-clés masqués.

[n00by]

Je penses que tu as raison, as tu déjà essayé de jouer avec le CSS du logo de résultat Google ? Je pense que le "-25px" montre la voie de la bonne technique

Mais dans ce cas, est-ce plus efficace qu'un display:none ?

Modifié 30 Mai 2008 par n00by

[BaN]

Menu inséré dans un swf (intégré via swfObject) + et texte alternatif

ca marche très bien

[captain_torche]

Je penses que tu as raison, as tu déjà essayé de jouer avec le CSS du logo de résultat Google ? Je pense que le "-25px" montre la voie de la bonne technique

Mais dans ce cas, est-ce plus efficace qu'un display:none ?

Aucun rapport, c'est juste que google utilise une seule et même image dans toute sa page, le -25px sert juste à délimiter la zone à afficher.

[yep]

Sniff

Google tolère le contenu partiellement caché pour des raisons de mise en forme (c'est lui qui le dit dans un de ces billets).

Les techniques CSS ne sont donc pas border-line (excepté si et seulement les contenus masqués ne sont pas proposés aux utilisateurs donc à destination des outils de recherche = spam).

Maintenant en terme de déploiement, il est préférable d'utiliser une image avec son alternative textuelle ; toutes les autres techniques utilisant le CSS :

- dénaturent le contenu

- ne sont pas accessibles, en particulier si on désactive les images, le menu ne sera pas exploitable.

Pensez à vos utilisateurs (c'est d'ailleurs ce que Google préconise).

[Dadou]

A part le cloaking, aucunement border-line et Google le précise bien :

Si votre site contient du texte et des liens cachés conçus pour induire les moteurs de rechercher en erreur, votre site peut être retiré de l'index Google et ne plus être affiché dans les pages de résultats de recherche.

Hors, les liens cachés avec les différentes méthodes indiquées ci-dessus, ne sont pas pour induire les moteurs en erreurs mais bien pour améliorer l'accessibilité.

Google le confirme aussi lors d'une session de chat avec les internautes : http://blog.sitxpress.com/index.php?2008/0...-de-chez-google

59 - Webmaster : Je me demandais dans quelles conditions peut-on utiliser le display:none (en css) et si vous pouviez nous donner les bonnes pratiques

60 - Expert Google : Tant que l'utilisation du display : none n'est pas abusive mais se justifie pour montrer une sélection de contenu tandis que le robot voit l'intégralité de la page c'est bon.

[n00by]

_AT_captain : tu as surement raison,mais je disais ça car en remplaçant -25 par 15px, le texte apparaît...

Merci pour ces précisions, ça me retire l'épée de Damocles que j'avais au dessus du crane L'idée du SWF n'est pas mal non plus. Reste à savoir quelle technique est la plus efficace