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
Bien 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 :
- Acidifié
- Blog référencement
- Blogopub
- Création et formation – AJblog
- Ecoms Consulting
- Outil Référencement
- Snipeo, trafic ciblé
- Stratégies de visibilité
- Création site modx
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.
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 .
Julien
Adicifié est en parking ?
Marie
@Nico merci de l’exemple 🙂
@Julien : oui il semble qu’acidié soit en parking, c’est bizarre, je vais me renseigner
Julien
Adicié oui pardon, à chaque fois je pense à l’acid avec le nom de son site 😀
Marie
Ah non je me suis plantée c’est Acidifié 😀
l'Ours
Google est-il capable de suivre de tels liens ?
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).
David
Excellente idée ! merci.
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 !.
Bastien
@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.
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
Bastien
@eda : Est-ce que tu peux nous donner l’adresse de la page où tu utilise le script ?
eda
Voila la page :
http://www.camping-enfrance.com/index.php
Bastien
@eda :
Pourrais-tu essayer de mettre en feuille de style :
#site_tour{width:345px;}
Et me dire ce que ça donne ?
Merci
eda
Merci de ton aide Bastien,
je le place où ?
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 ?
eda
tu vas peut etre me paraitre neuneu mais de quelle balise parles tu, merci
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 ?
eda
Ca marche super.
T’es mon héros, tu m’as évité de me rendre chauve.
MERCI
Bastien
Oh! Ça me fait rougir… 🙂
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
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
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 😉
JeanMOULIN54
* je charge des pages du style /marques/XX/produit-html
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
JeanMOULIN54
Merci beaucoup 😉
JeanMOULIN54
As tu trouver une solution pour faire fonctionner la liste sous Internet Explorer ?
Merci 😉
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
JeanMOULIN54
Salut Bastien, as-tu réussi à faire fonctionner ta liste sous IE ?
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
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 😉
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
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 …
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
Bastien
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
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.
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
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 😉
tai-nui
Merci beaucoup pour cette astuce qui fonctionne également sous Mac OS 10.6.4 avec FF 3.6.8.
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.
db
Merci infiniment pour cette solution, je vais pouvoir dormir tranquille !
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 🙂
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…
Pierre
en fait j’ai fait une page test ici
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
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
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 ?
Laurent
Vu que c’est pas passé dans le dernier post voilà une capture du code une fois interprété par ie :
location autrans
Pareil, j’ai un petit bug sous IE8…