Lorsqu’on écrit sur un blog ou un site d’information, il arrive très souvent que l’on fasse des liens vers des adresses externes.
Que l’on pointe sur une page web ou une archive, si le visiteur clique sur le lien, l’ouverture de cette source va se faire dans l’onglet courant. A ce moment là, le visiteur est parti de votre site et il y a très peu de chance qu’il y revienne pour y lire d’autre articles ou pages. Votre taux de rebond explose.
D’où l’idée de forcer l’ouverture des liens externes de votre site dans un nouvel onglet ou une nouvelle fenêtre du navigateur.
Voici comment le faire automatiquement, sans y penser à chaque écriture de lien. Dans cet exemple j’utilise la librairie Javascript JQuery.
La première chose à faire est de télécharger JQuery et de l’inclure dans le header de votre site par exemple.
<script type="text/javascript" src="jquery.js"></script>
Ensuite il faut sélectionner les nœuds de votre page qui doivent être ainsi instrumentés. En effet, pour ma part, je ne force l’ouverture dans une autre page que dans les articles. La page d’accueil par exemple n’est pas impactée.
Il faut donc ajouter ce script sur chaque page concernée.
<script type="text/javascript">
$(document).ready(function(){
$('#content a:not(.popupwindow)').filter(function() {
var theHref = this;
});
});
</script>
La technique consiste donc à filtrer les nœuds (en utilisant la fonction filter() ) et donc ne sélectionner que les liens (<a>).
Pour chaque élément sélectionné, on teste si le domaine pointé est le même que le domaine courant. Si ce n’est pas le cas (lien externe), on ajoute l’attribut target avec la valeur _blank (ou ce que vous voulez).
if (theHref.hostname && theHref.hostname !== location.hostname) {
$(theHref).not(".noAutoLink").attr('target','_blank');
};
Si vous souhaitez faire apparaitre ces liens d’une manière particulière, utilisez CSS. Ajoutez pour cela une classe CSS (class="external" par exemple) à ces éléments.
if (theHref.hostname && theHref.hostname !== location.hostname) {
$(theHref).not(".noAutoLink").addClass("external");
$(theHref).not(".noAutoLink").attr('target','_blank');
};
Par exemple sur ce blog, j’ajoute une petite icône à coté de chaque lien.
Ensuite, vous créez le style CSS correspondant dans votre feuille de styles.
a.external
{
background: url(images/external.png) center right no-repeat;
padding-right: 13px;
}
Pour les utilisateurs de plateforme de CMS ou de blog, vous pouvez restreindre le chargement du script à certaines pages. Pour WordPress par exemple, seules les pages et articles sont concernées.
Il vous suffit d’ajouter le code PHP suivant autour du script:
< ?php if ( is_single() or is_page() ) {?>
<script type="text/javascript">
$(document).ready(function(){
$('#content a:not(.popupwindow)').filter(function() {
var theHref = this;
if (theHref.hostname && theHref.hostname !== location.hostname) {
$(theHref).not(".noAutoLink").addClass("external");
$(theHref).not(".noAutoLink").attr('target','_blank');
};
});
});
</script>
Si vous souhaitez savoir comment traquer les clics sur ces liens, ne manquez pas de lire mon billet sur le sujet ( Suivez les clics sortants avec Google Analytics et JQuery ).
Pour rendre votre site plus rapide à charger, lisez mon article sur l’utilisation du CDN Google ( Optimisez le temps de chargement de vos pages en utilisant l’infrastructure de Google )
N’hésitez pas à commenter et critiquer ce billet.