Liste déroulante et référencement

Ce post vous est proposé par Bastien de l’agence Nexxpix, spécialiste de la création de site ModX

Illustration SelectrefBien qu’utilisé initialement dans le cadre d’un formulaire html, l’élément SELECT est régulièrement contourné par les webmasters pour proposer un accès rapide à d’autres pages ou d’autres sites Internet (liste de fournisseur, blogroll, listing de références, etc.).

Pratique, la liste déroulante html SELECT permet de réaliser un listing d’éléments sans pour autant changer les habitudes des utilisateurs puisque chaque navigateur a sa manière de présenter cet objet.

Même si son contenu textuel peut être pris en compte au sein d’une même page, les liens, souvent présents dans l’attribut « value » ne sont malheureusement pas suivis comme il le faudrait par les robots des moteurs de recherche.

Afin de palier ce problème tout en respectant le confort des utilisateurs, je vous présente un petit javascript permettant de joindre l’utile à l’agréable.

Le principe est simple :

Un appel du javascript dans le code source :

<script type= »text/javascript » language= »javascript » src= »selectref.js »></script>

Un listing sous forme UL / LI, par exemple, la blogofriends de ce blog (oui, il y a un site en plus, j’en profite pour faire discrètement ma publicité 😛 ), avec l’id qui va bien :

<ul id= »selectref »>
<li><a href= »http://www.leblogduwebmaster.com/ »>Acidifié</a></li>
<li><a href= »http://blog.himselfprod.com »>Blog référencement</a></li>
<li><a href= »http://blogopub.tv »>Blogopub</a></li>
<li><a href= »http://www.ajblog.fr »>Création et formation – AJblog</a></li>
<li><a href= »http://ecoms.fr/blog »>Ecoms Consulting</a></li>
<li><a href= »http://www.outil-referencement.com »>Outil Référencement</a></li>
<li><a href= »http://www.snipeo.fr »>Snipeo, trafic ciblé</a></li>
<li><a href= »http://www.seoplayer.com/ »>Stratégies de visibilité</a></li>
<li><a href= »http://www.nexxpix.fr/ »>Création site modx</a></li>
</ul>

Et pour finir, en fin de code source (juste avant </html>), on appelle la fonction avec pour paramètres, l’id qui va bien et un petit titre pour s’y retrouver (il est possible d’en utiliser plusieurs sur une même page) :

<script type= »text/javascript » language= »javascript »>
var select01 = new selectRef.init(‘selectref’, ‘Blogfriends’);
</script>

Voici ce que donne le listing donné en exemple :

Pour télécharger le javascript avec une petite démo, c’est ici.

Edit du 02 Février 2010 :
Suite aux retours de JeanMOULIN54, des modifications ont été apportées :
– Ajout d’une option de Target lors de l’appel de la fonction où vous pouvez définir celui qui vous intéresse (_self, _parent, etc.) avec par défaut : _blank
– Prise en charge de IE 8

Pour appeler la fonction :
<script type= »text/javascript » language= »javascript »>
var select01 = new selectRef.init(‘selectref’, ‘Blogfriends’,’_self’);
</script>

La nouvelle version, toujours avec une petite démo, est téléchargeable ici

Les tests revenus pour les OS et navigateurs :
Windows 7 :
IE 8 : Ok
IE 7 : Ok
FF 3.6 : Ok
Chrome 4 : Ok
Opéra 10.10 : Ok

N’hésitez pas à faire part de vos tests en commentaire, je mettrai à jour.

Bastien

Après près de 7 années d'expérience en référencement et une expérience continue de bientôt 10 ans dans le développement de site Internet, je m'occupe actuellement de l'agence internet Nexxpix.

50 commentaires

  1. Nico   •  

    J’utilise ce principe depuis 2 ans, c’est la meilleure implémentation possible (tu pourrais même externaliser le lancement de la fonction et utiliser un gestionnaire d’événement pour y faire appel au chargement de la page).

    Elle permet d’améliorer l’expérience utilisateur en fonction des possibilités de son navigateur au-delà de rendre accessibles (et indexables) les ressources liées.

    Ce déploiement peut être vu sur .

  2. Julien   •  

    Adicifié est en parking ?

  3. Marie   •  

    @Nico merci de l’exemple 🙂

    @Julien : oui il semble qu’acidié soit en parking, c’est bizarre, je vais me renseigner

  4. Julien   •  

    Adicié oui pardon, à chaque fois je pense à l’acid avec le nom de son site 😀

  5. Marie   •  

    Ah non je me suis plantée c’est Acidifié 😀

  6. l'Ours   •  

    Google est-il capable de suivre de tels liens ?

  7. Nico   •  

    Google suit les ancres (liens), donc oui (ce qui n’est pas forcément le cas du select qui est un élément de sélection et non de navigation).

  8. David   •  

    Excellente idée ! merci.

  9. Oscar   •  

    Ce type de listes déroulantes me semble utile lors d’un rappel de liens navigationnels, mais je ne l’utiliserais pas en premier pour les liens du menu par souci d’ergonomie, d’accessibilité et tout simplement de … simplicité, tous les liens n’étant pas visible d’un seul coup d’oeil et les internautes pressés !.

  10. Bastien   •     Auteur

    @Oscar : c’est exactement la problématique qui a initiée ce petit outil : réaliser des quick links qui puissent être référencés. La fait d’utiliser un select sans style permettra à chaque webmaster d’appliquer ses css tout en restant adapté au navigateur de chaque utilisateur. Il est tout à fait possible de le faire des quick links beaucoup plus ergonomiques avec css mais dans ce cas là, le javascript s’avère peu utilise. En modifiant légèrement le javascript, il est possible de l’utiliser dans le cadre de formulaires normaux.

  11. eda   •  

    Bonjour à tous, j’utilise ce script sur mon site mais je cherche désespérément à imposer un width à mon select, si quelqu’un a une idée, merci d’avance

  12. Bastien   •  

    @eda : Est-ce que tu peux nous donner l’adresse de la page où tu utilise le script ?

  13. Bastien   •  

    @eda :

    Pourrais-tu essayer de mettre en feuille de style :
    #site_tour{width:345px;}

    Et me dire ce que ça donne ?

    Merci

  14. eda   •  

    Merci de ton aide Bastien,

    je le place où ?

  15. Bastien   •  

    Pour faire rapide, insère le code suivant :

    #site_tour{width:345px;}

    Dans le code source de ta page juste avant la balise

    Est-ce que ça fonctionne comme ceci ?

  16. eda   •  

    tu vas peut etre me paraitre neuneu mais de quelle balise parles tu, merci

  17. Bastien   •  

    Arf, zut, les balises HTML ne passe pas dans le poste.

    Alors, je vais essayer comme ceci :

    Insère :
    <style>
    #site_tour{width:345px;}
    </style>

    Dans le code source de ta page juste avant la balise </head> de ta page html

    Est-ce que ça fonctionne comme ceci ?

  18. eda   •  

    Ca marche super.
    T’es mon héros, tu m’as évité de me rendre chauve.

    MERCI

  19. JeanMOULIN54   •  

    Merci pour cette jolie petite liste ! Possibilité de lancer les liens dans la même page ? Car là ça lance forcément sur une nouvelle page web …

    Merci

  20. Bastien   •  

    Bonjour,

    Oui, pas de problème, il suffit de changer la ligne 31 du Javascript.

    Remplacer :
    else{bsel.setAttribute(« onchange », « if(this.value != \’\’){window.open(this.value)}; »);}

    Par :
    else{bsel.setAttribute(« onchange », « if(this.value != \’\’){window.open(this.value, ‘_self’)}; »);}

    Je vous souhaites une bonne continuation,

    Bastien

  21. JeanMOULIN54   •  

    Merci, cela fonctionne parfaitement sous Firefox, mais sous IE pas moyen de faire fonctionner les liens … même si test avec les fichier d’origine, les liens ne veulent pas s’ouvrir … ( je charge des pages du style : Produits

    Merci Bastien 😉

  22. JeanMOULIN54   •  

    * je charge des pages du style /marques/XX/produit-html

  23. Bastien   •  

    Bonjour,

    Effectivement, je ne connaissais pas ce problème.

    Je vais m’y pencher dessus dans la semaine et ferais un mise à jour complète du javascript.

    Bastien

  24. JeanMOULIN54   •  

    Merci beaucoup 😉

  25. JeanMOULIN54   •  

    As tu trouver une solution pour faire fonctionner la liste sous Internet Explorer ?
    Merci 😉

  26. Bastien   •  

    Bonjour,

    Malheureusement, je n’ai pas encore pris le temps de m’y pencher dessus.

    En passant par un framework ajax (type jquery) ça serait rapide à faire mais j’aimerai encore garder un peu d’indépendance pour ce petit script.

    Dès que j’ai une solution fonctionnelle (car des moments, ça tourne pas trop mal sur une version de IE mais pas sur les autres) je fait une mise à jour du zip.

    Encore merci pour votre patience.

    Bastien

  27. JeanMOULIN54   •  

    Salut Bastien, as-tu réussi à faire fonctionner ta liste sous IE ?

  28. Bastien   •  

    Salut,

    Je viens de poster un édit avec une mise à jour du javascript. J’en ai profité au passage pour une petite amélioration.

    En espérant qu’il fonctionne comme vous le souhaitez.

    Bonne continuation,

    Bastien

  29. jeanMOULIN54   •  

    Merci à toi, ça fonctionne parfaitement maintenant 🙂
    Par contre je n’ai toujours pas réussi à faire fonctionner le Javascript pour que le lien s’ouvre dans la même fenêtre et non dans une nouvelle …

    Merci à toi, c’est du bon boulot 😉

  30. Bastien   •  

    Bonjour,

    Je l’ai inclus directement dans le JavaScript pour le target du lien.

    Il suffit de rajouter un paramètre à l’appel du JavaScript.

    Pour une ouverture dans la même fenêtre, ça se passe comme ceci :

    <script type= »text/javascript » language= »javascript »>
    var select01 = new selectRef.init(’selectref’, ‘Blogfriends’,’_SLEF’);
    </script>

    N’hésitez pas également à me faire des retours sur les OS/Navigateur pour lesquels le script fonctionne afin que je mette à jour le post.

    Bonne journée,

    Bastien

  31. jeanMOULIN54   •  

    Merci Bastien de ton aide, alors j’ai édité le fichier html et j’ai mis le paramètre comme ceci :

    var select01 = new selectRef.init(‘selectref’, ‘Blogfriends’,’_SLEF’);

    Mais ça ne change rien, les liens s’ouvrent toujours dans de nouvelles fenêtres …

  32. Bastien   •  

    Bonjour,

    Pouvez-vous m’en dire plus ? Os que vous utiliser, Navigateur, éventuellement page de test consultable ?

    Là, sauf si vous n’avez pas mis à jour le javascript, je peux difficilement voir d’où peut provenir le problème.

    Bastien

  33. Bastien   •     Auteur

    Bon,

    Après tests et discussions, il s’avère qu’IE est sensible à la casse.

    Pour faire l’appel javascript, il faut mettre les destinations en muinuscules : _blank, _self, _parent, etc.

    J’ai mis à jour le fichier .zip

    Bonne continuation,

    Bastien

  34. Thomas   •  

    Bonjour,

    Que peut-on faire de faux pour que le script ne fonctionne pas sour IE?

    J’ai téléchargé le dernier script, il fonctionne sur tout les navigateurs que j’ai pu essayer, sauf sous IE…

    Voici un exemple (il s’agit du menu « Jump to image: » qui se trouve sous le calendrier):
    http://www2.snowfactory.com/portal/modules.php?name=WebCAM&file=index&l_op=history&idh=156717&m=3&y=2010&fn=&ln=&vision=day&pub=0&ajax=1&webcam=Belalp#history

    Merci pour votre aide.

  35. Bastien   •  

    Bonsoir Thomas,

    J’ai essayé de vous joindre il y a quelques jours par email afin d’identifier avec vous les problèmes liés à l’utilisation du script.

    N’hésitez pas à revenir vers moi.

    Bastien

  36. DLDstyle   •  

    Heureusement que Tiger m’a refilé l’adresse de ce billet je l’avais complètement zappé et j’avais justement besoin d’un tel script. Alors merci, tout simplement 😉

  37. tai-nui   •  

    Merci beaucoup pour cette astuce qui fonctionne également sous Mac OS 10.6.4 avec FF 3.6.8.

  38. marc   •  

    L’utiliser pour un rappel de liens sur la page est très utile.
    Mais je ne l’utiliserais sans doute jamais sur un menu principal.
    C’est pas terrible.

  39. db   •  

    Merci infiniment pour cette solution, je vais pouvoir dormir tranquille !

  40. Bastien   •  

    @tai-nui : Merci pour cette précision.
    @marc : Oui, ça reste un outil basé sur la mise en page par défaut du navigateur. Avec un peu de css, il est possible de le rendre plus sympa. Une version totalement personnalisable (mais du coup n’utilisant plus la balise select est en test depuis un petit moment. Je finirais bien par m’occuper de la publier.
    @db : Merci de l’utiliser, je suis content de voir que ce petit outil plait 🙂

  41. Pierre   •  

    Bonjour

    Je viens de découvrir ce système de liens qui me convient parfaitement.
    Par contre ça marche sous Chrome et Firefox mais sous IE8, les liens ne fonctionnent pas. J’ai bien pris le second script.
    Je ne comprends pas
    Ma page est en php…

  42. Pierre   •  

    J’ai résolu mon souci

    Pour ceux que ça intéresse, je n’avais pas de DOCTYPE spécifié au début de mes pages.
    J’ai cherché une journée pour cette bêtise. Vive l’info

    Merci pour le code

  43. Pierre   •  

    Bonjour

    Tout fonctionne bien sur chrome 8 , firefox 6, IE8 mais malheureusement pas avec IE7 qui représente encore 10% des visites du site.

    Y aurait-il une petite modification à réaliser pour assurer la compatibilité avec IE7

    merci

  44. Laurent   •  

    Bonjour,

    je viens de tester ce script avec mes pages php qui le génère en echo, il fonctionne super bien mais j’ai un bug sous ie8 (avec ie tester tout fonctionne je comprends pas trop mais bon) en fait les ul li sont transformé en select option mais avec un soucis :

    Alors que sous les autres navigateurs, j’ai bien les infos de mes liens à la place de [object].

    J’ai tenté le changement de doctype mais rien n’y fait.

    Une piste pour trouver la solution ?

  45. location autrans   •  

    Pareil, j’ai un petit bug sous IE8…

  46. Pingback: Référencement et menu déroulant compatible FireFox 6, Chrome, IE 9 | Blog référencement seulmaitreabord.info

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *