Indexation avec fil d'ariane composé de menus déroulants css

[Valky]

Bonjour,

Je ne sais pas si je poste dans la bonne section, mais dans le cas présent l'indexation est liée à la présentation...

Ne souhaitant pas ajouter un fil d'ariane en entête du site, car le menu reprend déjà toutes les infos, je me demande quelle technique adopter pour que les moteurs de recherche (gg en l'occurrence) interprètent correctement la "navigation".

Voici un exemple de la logique du menu déroulant (voir le fiddle ici : http://jsfiddle.net/9MuSP/1/) :

Toutes les rubriques <-> Toutes les catégories

Chacune affichant une liste de liens :
- Toutes les rubriques : Rubrique 1, Rubrique 2, Rubrique 3...
- Toutes les catégories : Cat 1, Cat 2, Cat 3...

Une fois des sélections effectuées, la page est chargée et le menu indique par exemple pour la page http://www.monsite.com/rubrique-1/cat-3/ :
Rubrique 1 <-> Cat 3
La balise <title>Rubrique 1 > Cat 3</title>

Mais comment indiquer clairement aux moteurs que la page en cours est "Rubrique 1 > Cat 3" ?

Habituellement j'aurais mis <h1>Rubrique 1 > Cat 3</h1>, mais ici on est dans un menu du type :

<ul>
  <li><a href="/rubrique-selectionnee/">Rubrique sélectionnée</a>
    <ul>
      <li><a href="/autre-rubrique/">Autre rubrique</a></li>
      <li><a href="/autre-rubrique/">Autre rubrique</a></li>
      ...
    </ul>
  </li>
</ul>

Comment mettre en évidence que "Rubrique sélectionnée" est le "titre dur" de la page courante ?

Est-ce que la solution suivante pourrait nuire au référencement du site ?

<ul>
  <li><a href="/rubrique-selectionnee/"><h1>Rubrique sélectionnée</h1></a>
    <ul>
      <li><a href="/autre-rubrique/">Autre rubrique</a></li>
      <li><a href="/autre-rubrique/">Autre rubrique</a></li>
      ...
    </ul>
  </li>
</ul>

<ul>
  <li><a href="/cat-selectionnee/"><h2>Catégoriesélectionnée</h2></a>
    <ul>
      <li><a href="/autre-cat/">Autre cat</a></li>
      <li><a href="/autre-cat/">Autre cat</a></li>
      ...
    </ul>
  </li>
</ul>

Ou avez-vous une autre idée ?

Merci d'avance

 

[Valky]

Bon, après maintes recherches, il semblerait que la meilleure solution soit de déclarer des microdata du type "breadcrumb" (fil d'ariane).

Comme je suis sympa, voici la solution :

<ul>
  <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="/rubrique-selectionnee/" itemprop="url"><span itemprop="title">Rubrique sélectionnée</span></a>
    <ul>
      <li><a href="/autre-rubrique/">Autre rubrique</a></li>
      <li><a href="/autre-rubrique/">Autre rubrique</a></li>
      ...
    </ul>
  </li>
</ul>

Plus d'infos ici : http://support.google.com/webmasters/bin/answer.py?hl=en&answer=185417

 

[WebRankInfo]

je n'ai jamais vu d'impact très fort par contre... sans doute que peu d'internautes les utilisent (pour ma part ça ne m'est jamais arrivé de cliquer sur ces fils d'ariane dans les SERP)

 

[Valky]

On peut imaginer que l'impact visuel est incontestable pour l'internaute. Donc davantage un effet psychologique (qu'on pourrait estimer positif), qu'un impact en terme de trafic.

Enfin à la base je voulais juste faire mon titre de page avec des boutons et me voilà avec un fil d'ariane qui affichera un complément dans GG, c'est pas si mal...

 

[zeb]

Bon, après maintes recherches, il semblerait que la meilleure solution soit de déclarer des microdata du type "breadcrumb" (fil d'ariane).

Si c'est juste l'effet SERPs "sympa" que tu cherche avec ton fil d’Ariane c'est pas la peine de surcharger ta page avec des microdatat un simple :

<a href="..." title="....">Accueil</a> &gt; <a href="..." title="....">cat 1</a> &gt; <a href="..." title="...">.cat 2</a> etc ...

est largement suffisant.

 

[Valky]

Euh, t'as pas bien regardé la tronche du fil d'ariane, il fait également office de menu... d'où l'intérêt des microdata pour que les moteurs s'y retrouvent

Mais ça ne solutionne pas mes H1, je ne sais vraiment pas quoi y coller :/ (en évitant la "triplette")

 

[zeb]

Un fil d’Ariane c'est une suite de lien qui va de la racine a l'élément visité . Si c'est pas de ça que tu parle c'est que ce n'est pas un fil d'Ariane.
D’ailleurs pour la petite histoire si Ariane avais confié à Thésée autre chose qu'un simple fil unique qui allait du point d'entré du labyrinthite du Minotaure à là où se trouvait le héros cela n'aurait servi a rien.
Bref, des micro data dans un menu (puisqu'on parle pas de fil d'Arriane) c'est un peut "beaucoup" non ?

Après concrètement c'est pas a toi de dire au moteur où il se trouve mais de structurer ton site pour que ce soit évident et pour ça les urls sont un bon moyen. http://www.example.com/dossier/sous-dossier/page.html ...(les moteurs comprennent parfaitement cela depuis des lustres)

Ensuite pour les h1 je comprend pas trop ton souci ni d'ailleurs la différence entre une "rubrique" et une "catégorie" quoi qu'il en soit si ces éléments sont nommés et que c'est important (en terme de KW) ou est le souci ?

edit 1 -> je comprend peut être pas bien l'histoire aussi !? mais ça m'a interpelé car ça m'a semblé compliqué pour rien.

edit 2 ->

je ne sais vraiment pas quoi y coller

Tu aurais pas une page du site en exemple ? ça serait plus simple pour partager des idées.

 

[Valky]

Hello Zeb,

Merci pour le rappel mythologique !

Pas possible de vous montrer pour l'instant, j'ai bloqué avec htpasswd tant que cela n'est pas lancé.

Je t'ai fait 3 exemples de pages ici : http://jsfiddle.net/9MuSP/5/

La navigation est bilatérale, sous forme de filtres :
- Rubrique (type de publication)
- Catégorie (thème)

Avec les relations suivantes :
- Rubrique 1,n <---> 1,n Catégorie
- D'où Rubrique 0,n <--> 1,1 Publication 1,1 <--> 0,n Categorie

Et encore pour simplifier je ne te parlerai pas des Tags, qui sont une sorte de sous-catégorie. (Publication 1,5 <--> 1,1 PUBLICATION_TAG 1,1 <---> 1,n TAG), où on a /rubrique/categorie/tag1+tag2+tag3/

Bref, je ne vais pas rédiger le cahier des charges complet ici...

Donc, comme j'affiche dans le "fil d'ariane/menu/titre" : "nom_rubrique > nom_cat" (oublions la présentation et le côté drop-down), je ne vois pas bien quoi mettre en <h1> si ce n'est répéter "nom_rubrique > nom_cat". Du coup je me pose la question de l'utilité de cette h1 qui va alourdir le design en dupliquant juste le "fil d'ariane".

Sachant que dans une page de publication, ex : /rubrique/categorie/titre-de-la-publication_id.html, j'affiche logiquement <h1>Titre de la publication</h1>, juste en dessous du "fil d'ariane".

 

[Valky]

Bon, ça ne change pas grand chose, mais correction des cardinalités :
Rubrique 0,n <---> 0,n Catégorie
Publication 1,5 <--> 1,1 PUBLICATION_TAG 1,1 <---> 0,n TAG

 

[zeb]

Sachant que dans une page de publication, ex : /rubrique/categorie/titre-de-la-publication_id.html, j'affiche logiquement <h1>Titre de la publication</h1>, juste en dessous du "fil d'ariane".

Ok je comprend mieux. dans ma logique a moi une page (publication) le <h1> prend le titre lié au contenu mais ta question porte pas la dessus si j'ai bien compris. Tu te pose en revanche la question de "quel titre choisir" pour ce que moi j'appel les "indexs" CAD les page catégories ou rubrique (peut importe le mot) qui regroupent toutes tes publications.

Perso je compose un title et une h1 spécialement pour l'histoire. car le nommage de ces pages est important et que généralement le nom de la catégorie (plus rubrique éventuellement ou l'inverse) est significatif.

Dans tons cas pour prend l'exemple des Animaux ça pourrait être "toutes les discussion sur les animaux" ou "les annonces pour les animaux" etc ... Et cela serait simple a composer dynamiquement.
En revanche oublier la h1 au profit d'une ul / li me semble faire l'impasse sur un truc important vue le poids SEO de la h1 ce qui m'incite a dire de la composer dynamiquement pour quand même l'afficher. Après si c'est juste a côté de la navigation c'est vrai que ça va pas être visuellement top surtout pour l'utilisateur est il alors possible de jouer avec CSS pour que la répétition visuelle soit moins lourde ?

 

[Valky]

Ouep, donc pas possible de faire l'impasse sur la h1.

Je connais bien l'importance de cette balise, on ne va pas revenir dessus, mais tu vois dans ce cas, je trouve qu'on est typiquement dans la sur-SEO : on affiche une h1 pour les moteurs alors que les utilisateurs savent pertinemment où ils sont grâce au menu star wars.

Effectivement ça ne mange pas de pain :

".$rubrique->title." sur ".$category->title."
Avec $category->title="les animaux"

Enfin je pense plutôt mettre "à propos" ou "traitant", car "Les événements sur les animaux" c'est limite au niveau syntaxe. :roll:

Bon, reste à trouver une idée en css, pour que ça ne prenne pas trop la tête aux utilisateurs lol

 

[zeb]

mais tu vois dans ce cas, je trouve qu'on est typiquement dans la sur-SEO : on affiche une h1 pour les moteurs alors que les utilisateurs savent pertinemment où ils sont grâce au menu star wars.

menu star wars -> excellent c'est en effet dans le ton.

Je partage pas trop ton avis sur le "sur-SEO", perso je mettrait plus ça sur un défaut d'ergonomie car dans le principe chaque page a un titre et c'est justement faire preuve d'une forme de respect que de l'afficher clairement.

Après c'est peut être pas adapté mais n'as tu pas moyen de faire le contraire ? CAD de poser clairement ton titre en regard du contenu et de faire en sorte que ta navigation soit flottante (genre qui suit le scroll sur le bord de l'écran). En rendant une des deux informations mobile tu minimise l'impact visuel de répétition et tu donne peut être une ergonomie plus grande.

 

[Valky]

Bon, je te montre parce que t'es sympa :lol:

Là on dérive davantage vers une discussion sur l'ergonomie, mais c'est assez lié à la future indexation...

Si tu as des critiques ou idées je suis ouvert.

 

[zeb]

Bah là sincèrement le doublon graphique me choque pas du tout ! D'une part il y a l'effet relief graphique qui coupe court a une comparaison écrite et la h1 se justifie bien dans le contexte ...