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.
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 http://www.salonsparis.ccip.fr/.
Adicifié est en parking ?
@Nico merci de l’exemple
@Julien : oui il semble qu’acidié soit en parking, c’est bizarre, je vais me renseigner
Adicié oui pardon, à chaque fois je pense à l’acid avec le nom de son site
Ah non je me suis plantée c’est Acidifié
Google est-il capable de suivre de tels liens ?
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).
Excellente idée ! merci.
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 !.
@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.
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
@eda : Est-ce que tu peux nous donner l’adresse de la page où tu utilise le script ?
Voila la page :
http://www.camping-enfrance.com/test.php
@eda :
Pourrais-tu essayer de mettre en feuille de style :
#site_tour{width:345px;}
Et me dire ce que ça donne ?
Merci
Merci de ton aide Bastien,
je le place où ?
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 ?
tu vas peut etre me paraitre neuneu mais de quelle balise parles tu, merci
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 ?
Ca marche super.
T’es mon héros, tu m’as évité de me rendre chauve.
MERCI
Oh! Ça me fait rougir…
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
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
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
* je charge des pages du style /marques/XX/produit-html
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
Merci beaucoup
As tu trouver une solution pour faire fonctionner la liste sous Internet Explorer ?
Merci
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
Salut Bastien, as-tu réussi à faire fonctionner ta liste sous IE ?
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
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
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
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 …
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
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