Étendre les liens en JavaScript (ou en CSS)

L’astuce d’aujourd’hui est un bout de code que j’utilise sur quasiment tous les sites que je réalise. Elle me sert à concilier une bonne pratique de référencement et une bonne pratique d’ergonomie qui restaient jusqu’ici incompatibles.

Dans l’univers du référencement, l’ancre d’un lien doit idéalement être un texte de quelques mots vecteurs de sens. Ce lien doit également être unique au sein du document, pour ne pas diluer le jus de référencement transféré vers la page cible. Par exemple : dans une liste d’article de blog on mettra le lien vers la page sur le titre.

Dans l’univers de l’ergonomie c’est un peu différent. Toujours dans cette liste d’article : l’internaute sait qu’un clic sur le titre l’emmènera sur la page de détail, mais il s’attend aussi à pouvoir cliquer sur l’image de miniature ou sur le texte « lire la suite ». En fait au niveau de la navigation le mieux c’est quand un bloc est cliquable intégralement.

Ces deux approches semblent opposées. Cependant l’optimisation des liens pour le SEO ne concerne que le code source de la page, celui qui sera analysé par les moteurs. L’approche ergonomique s’adresse au DOM ; la page calculée par le navigateur.
Entre les deux il y a – souvent – JavaScript !

Edit : en re-effectuant un test ce matin, après avec discussion avec des confrères, je me rend compte que cette solution n’est pas optimale. Je la laisse pour la postérité et vous invite à utiliser l’astuce uniquement CSS détaillée plus bas dans l’article.

La solution que je propose, c’est de placer les liens sur les textes idéals pour le référencement, puis au chargement de la page, les déplacer sur des éléments parents. Ainsi on conserve le meilleur des deux mondes.

Quel balisage mettre en place pour utiliser cette astuce ?

Afin d’utiliser le petit code JavaScript que je vais vous donner, il est nécessaire d’adapter le markup (le balisage de votre document). Sur les balises <a/> que nous voudrons étendre, nous allons ajouter un attribut data-expand-link, et sur les éléments parents que nous souhaiterons transformer en lien nous ajouterons l’attribut data-expand-target.

<!-- le futur lien ↴ -->
<div class="foo" data-expand-target>
	<h2>
		<!-- le lien ↴ -->
		<a href="#bar" target="_blank" data-expand-link>mon lien</a>
	</h2>
	<p>Un petit texte</p>
</div>

Par défaut, il faut aussi choisir ce que deviendra le lien d’origine… le parent deviendra forcément un <a/>, mais en fonction de l’ergonomie ou des éléments contenants, on peut souhaiter que l’ancien lien devienne un <span/>, une <div/> ou un <button/> par exemple…

Je propose que le lien devienne une balise <div/> par défaut, mais qu’en ajoutant un attribut data-expand-type="span" on puisse définir un comportement différent.

<div class="wrapper" data-expand-target>
	<span>
		<!-- si le lien ci-dessous devient une <div/>,
		… le span contenant ne va pas aimer… -->
		<a href="/foo" data-expand-type="span" data-expand-link>lien</a>
	</span>
</div>

Le code de transformation des balises

Pour mettre en place notre astuce, il nous faut créer un fichier JavaScript que nous chargerons par le biais d’un traditionnel wp_enqueue_script (dans votre thème ou dans une extension) :

add_action( 'wp_enqueue_scripts', 'enqueue_link_expand_script' );
function enqueue_link_expand_script() {
	wp_register_script( 'link-expand', 
		get_template_directory_uri() . '/library/link-expand.js', 
		array( 'jquery' ) 
	);
	wp_enqueue_script( 'link-expand' );
}

Dans ce fichier, on s’assure que le document est complètement chargé et que jQuery est bien présent. Ensuite nous allons écrire les deux fonctions nécessaires :

La première, ligne 2, nous permet de transformer la nature d’une balise, sans modifier ses attributs ni ce qu’elle contient.

La fonction suivante, nommée applyExpandLink() ligne 16, parcours le contenu à la recherche des liens à étendre. Pour chacun d’eux elle localise le parent qui deviendra le lien, elle lui transfert ses attributs puis change la nature des deux balises.

jQuery(document).ready(function($){
	function changeType( $elem, tag ) {
		if ( tag == $elem.get(0).tagname ) {
			return false;
		}

		var $newElem = $( '<' + tag + '>' );
		attributes = $elem.prop( 'attributes' );
		$.each(attributes, function() {
			$newElem.attr( this.name, this.value );
		});

		$newElem.append( $elem.html() );
		$elem.replaceWith( $newElem );
	}
	function applyExpandLink() {
		var $parent, attributes, type;
		$( 'a[data-expand-link]' ).each(function(){
			$parent = $(this).parents( '[data-expand-target]' );
			attributes = {
				href: $(this).attr( 'href' ),
				hreflang: $(this).prop( 'hreflang' ),
				target: $(this).prop( 'target' ),
				title: $(this).prop( 'title' ),
				rel: $(this).prop( 'rel' ),
			};
			type = $(this).attr( 'data-expand-type' );
			if ( 'undefined' == type || ! type ) {
				type = 'div';
			}
			$(this).removeAttr( 'data-expand-link \
				data-expand-type target \
				title rel href hreflang' );
			changeType( $(this), type );

			$parent.attr( attributes ).removeAttr( 'data-expand-target' );
			changeType( $parent, 'a' );
		});
	}
	applyExpandLink();
});

Si vous utiliser ce script sur un site qui charge des contenus dynamiquement, vous pourrez re-exécuter  applyExpandLink() pour forcer la fonction à reparcourir le document et exécuter les transformations sur les liens fraichement insérés.

Une dernière précision pour finir : le seul élément que ne peut pas contenir un lien, c’est un autre lien ! Soyez donc vigilant à ne pas mettre plusieurs <a/> dans une même balise ayant l’attribut data-expand-target. Dans les faits cela ne changerait rien (c’est la magie des spécifications HTML5 qui prévoient les comportements des navigateurs en cas d’erreur ????) mais votre document calculé ne serait plus valide.

Edit : en CSS c’est mieux

Comme je le disait en introduction, c’est une astuce que j’utilise depuis de nombreuses années. À l’époque j’avais fait un test pour être sur que Google n’interprétait pas la modification du DOM en javascript. Suite à la publication de cet article et une discussion sur le slack j’ai décidé de refaire la vérification. Les résultat est vite tombé : Google interprète ce genre de manipulation légère, et cette pirouette en JavaScript n’est donc plus la bonne solution (par contre Google ne donne pas suite aux requête ajax, ce qui m’avais conforté dans l’erreur lors de mes tests plus récents).

Pour rendre l’ensemble du lien d’un bloc cliquable, il reste une solution pure CSS dont les bases sont issues de cet article d’HTeuMeuLeu et que j’ai légèrement modifié.

L’idée c’est toujours d’avoir un lien, et un élément contenant (gardons leurs les attributs data-expand-target sur le parent et data-expand-link sur le lien, comme pour la méthode JS), mais cette fois-ci nous allons utiliser un pseudo élément du lien pour le faire déborder, en CSS du lien. Il suffit donc de mettre ce code CSS dans votre feuille de style :

[data-expand-target]{
	overflow:hidden;
	position:relative;
}

[data-expand-link]:after{
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:10;
	margin:-250px;
}

Par rapport à l’article d’HTeuMeuLeu j’ai juste ajouté un overflow:hidden sur l’élément conteneur et une marge négatif sur le pseudo-élément. En effet, si le lien est positionné autrement qu’en static le pseudo-élément serait bloqué aux frontière du lien, le margin:-250px (il est possible de mettre plus si besoin) permet de le propager au-delà, et l’overflow de cacher ce qui dépasse de l’élément parent.Voilà…