Extraire tous les liens externes en JavaScript

Une chaine en acier (les liens) contient un lien en or (le lien externe)
Fabien Branchut a écrit et publié cet article le .

Voici 2 petits bouts de code JavaScript en Jquery pour :

  • Afficher l'URL de chaque lien externe d’une page web
  • Ouvrir les liens externes dans un nouvel onglet quand on clique dessus

Vous pouvez très bien modifier ces scripts pour appliquer par exemple une classe CSS spécifique aux liens externes afin de les afficher différemment (par exemple une couleur différente des liens internes).

Afficher l'URL de chaque lien externe d’une page web

$(document).ready(function(){
	// On stocke tous les liens externes de la page dans un tableau : a_externalLink.
	var a_externalLink = $('a:not([href^="http://'+document.location.hostname+'"]):not([href^="https://'+document.location.hostname+'"]):not([href^="#"]):not([href=""]):not([href^="/"]):not([href^="mailto:"])');
	// On boucle sur le tableau a_externalLink.
	for(var i = 0; i < a_externalLink.length; i++)
	{
		if($(a_externalLink[i]).attr('href') != undefined)
		{
			// On affiche la valeur de l'attribut href du lien externe dont l'attribut 'href' existe.
			alert($(a_externalLink[i]).attr('href'));
		}
	}
});

Ouvrir les liens externes dans un nouvel onglet

$(document).ready(function(){
	var a_externalLink = $('a:not([href^="http://'+document.location.hostname+'"]):not([href^="https://'+document.location.hostname+'"]):not([href^="#"]):not([href=""]):not([href^="/"]):not([href^="mailto:"])');
	for(var i = 0; i < a_externalLink.length; i++)
	{
		if($(a_externalLink[i]).attr('href') != undefined)
		{
			// Pour chaque lien externe dont l'attribut 'href' existe, on remplace la valeur de l'attribut 'target' par '_blank' (si l'attribut n'existe pas, il sera ajouté).
			$(a_externalLink[i]).attr('target', '_blank');
		}
	}
});

Exemple :

Explications

Il s’agit de transformer grâce à JavaScript cet exemple de code HTML :

<!-- Lien interne au site -->
<a href="http://fabien.pro">Chef de projets web</a>
<!-- Lien externe au site -->
<a href="http://fr.wikipedia.org/wiki/M%C3%A9tiers_du_web">Métiers du web</a>

de cette manière :

<!-- Lien interne au site -->
<a href="http://fabien.pro">Chef de projets web</a>
<!-- Lien externe au site -->
<a href="http://fr.wikipedia.org/wiki/M%C3%A9tiers_du_web" target=”_blank”>Métiers du web</a>

Il faut trouver les balises HTML <a> dont la valeur de l’attribut href est une URL ayant un hostname (nom de domaine + sous-domaine) différent du hostname du site. C’est pour cette raison que j’exclus les liens dont :

  • L’URL contient un nom d’hôtes différent de celui de la page courante (avec http et https)
  • L’URL commence par un # (ancres de page)
  • L’URL est vide
  • L’URL commence par un / (raccourci d’écriture de liens internes)
  • L’URL commence par mailto: (ouverture automatique de la messagerie par défaut)

Pour chacune de ces balises <a> externe, on ajoute l’attribut target="_blank" qui indique au navigateur d’ouvrir la page dans un nouvel onglet quand l’internaute clique dessus.

Transformer les liens nofollow en dofollow

J'ai souvent vu des référenceurs utiliser des outils comme Firebug pour analyser le code d'une page web : grossière erreur ! Vous pourriez très bien faire passer de vrais liens nofollow en lien dofollow juste en changeant la valeur de l'attribut rel au chargement de la page via JavaScript.

Par contre, ajouter un attribut rel="nofollow" sur les liens sortants en JavaScript en pensant que cela aura un effet sur les moteurs de recherche c'est se mettre un doigt dans l'oeil. En effet, les moteurs interprêtent principalement le code de la page web directement fourni par le serveur au navigateur, il n'interprête pas le code modifié côté client par JavaScript et le navigateur.

Auteur : Fabien Branchut

Commentaires

Développement web

Flux RSS

Abonnez-vous au flux RSS de tout le blog ou uniquement Développement web.

En ce moment, je lis :

Couverture du livre : Le guide des liens sponsorisés

Le guide des liens sponsorisés :
Google AdWords en 150 questions/réponses

J'ai commencé la lecture de cet ouvrage suite à ma découverte de son auteur, Florian Marlin, dans un Podcast du célèbre référenceur français Laurent Bourrelly. Florian est un professionnel en marketing web, spécialiste en liens sponsorisés dont Google Adwords. Je dois dire que ma lecture des premières pages sont plus que prometteuses. Après un chapitre sur les bases du SEA, l'expert traite des sujets commes les stratégies SEA, l'achat de mots-clés, le ciblage des mots-clés, les annonces Adwords, les paramétrages de campagnes, le quality score, l'analyse et reporting, l'optimisation avancée... et j'en passe ! Si vous souhaitez vous lancer dans la gestion d'une (ou plusieurs) campagnes Adwords, je vous conseille cet ouvrage, principalement si vous êtes débutant ou si vous souhaitez vous perfectionner.

Fabien Branchut
Chef de projet web
Fabien Branchut - Expert en conception de sites web

Vous désirez un site performant ? Contactez-moi !

Depuis 16 ans, je conçois et réalise des sites web performants, visibles et vivants.

Devis

Parlez-moi de votre projet web, je vous dirai comment faire pour obtenir le meilleur.