Jetpack et la structure des titres – SEO

25. novembre 2016 Hook, WordPress 0
Jetpack et la structure des titres – SEO

Problème de structure

J’ai créé un site web et en le mettant en place j’ai bien fait attention à ce que le titre principale soit au format <h1> et que l’arborescence soit bien respectée (<h1> > <h2> > <h3>). Car cela joue sur le référencement, vous devez avoir un contenu bien structuré.
Seulement je viens de refaire des tests et je vois énormément d’incohérences très étonnantes et en regardant le titre des balises qui font défaut, je comprend, cela provient de 2 modules jetpack appliqué aux articles :

structure_erreur_jepack
Les liens de partage vers les réseaux sociaux arrivent juste après le titre principale, ce qui nous provoque un passage de H1 à H3 : Pas bon !

 

structure_erreur_jepack_2
Nous pouvons voir que les titres H3 du module « Share This » se positionnent en dessous d’un titre du contenu, ainsi que le module « Related posts », ça ne cause pas de problèmes de structure, mais la structure n’est pas logique.

 

Pour information, pour visualiser correctement le plan de votre site, j’utilise l’extension Web Developper. Ensuite sur la barre, vous allez sur le menu « Info » > « Plan du document ».

Jetpack et le « Development Mode »

Lorsque l’on développe son site, on active le mode développement de jetpack seulement une bonne partie des module ne peuvent être activé dans ce mode. Donc on ne pense pas à vérifier le comportement de celui-ci. Même si cette extension est très bien développé, des problèmes peuvent survenir. On ne pourra les voir qu’en production, un gros « dommage ».

 

Les hook pour corriger la structure

Nous devons donc changer les balises des modules de jetpack.

J’ai choisis de supprimer le titre de « Share This » et de passer de H3 à H2 pour Related Post afin de garder un titre H2 en dehors de mon contenu et ca permet de mettre tous les autres titre de mon theme sous celui-ci.

<?php
/**
 * JetPack correction Share this
 * Change le <h3> de "Share this" par h2
 */
function jetpackcom_custom_heading( $headline, $label, $module ) {
	
	if ( 'sharing' == $module ) {
			$headline = sprintf(
					'<div class="sd-title">%s</div>',
					esc_html( $label )
			);
	}
	
	 // Valide à partir de jetpack 4.5
	if ( 'related-posts' == $module ) {
		$headline = sprintf(
					'<h2 class="jp-relatedposts-headline">%s</h2>',
					esc_html( $label )
		);
	}
	
	return $headline;
}
add_filter( 'jetpack_sharing_headline_html', 'jetpackcom_custom_heading', 10, 3 );

/**
 * Modifie les titres des articles en relation
 */
function jetpackcom_custom_post_heading( $tag ){
	return 'h3';
}
add_filter( 'jetpack_relatedposts_filter_post_heading', 'jetpackcom_custom_post_heading', 10, 3 );

/**
 * JetPack correction Related post
 * Change le <h3> de "Related" par <h2>
 * Note : A supprimer en jetpack 4.5
 */
function jetpackme_related_posts_headline( $headline ) {
	$headline = sprintf(
				'<h2 class="jp-relatedposts-headline">%s</h2>',
				esc_html__( 'Related', 'jetpack' )
				);
	return $headline;
}
add_filter( 'jetpack_relatedposts_filter_headline', 'jetpackme_related_posts_headline' );

?>
Hook de correction jetpack

Et ne pas oublier le CSS

Et oui, après avoir changé mon code je me suis rendu compte que jetpack ne s’appuyais pas sur la class seule pour sur la balise H3 aussi.

/**
 * JetPack tunning
 */
div.sharedaddy .sd-title,
#jp-relatedposts .jp-relatedposts-headline{
	margin: 0 0 1em;
	display: inline-block;
	line-height: 1.2;
	font-size: 9pt;
	font-weight: 700;
}
div.sharedaddy .sd-title::before,
#jp-relatedposts .jp-relatedposts-headline::before{
	content: "";
	display: block;
	width: 100%;
	min-width: 30px;
	border-top: 1px solid #ddd;
	margin-bottom: 1em;
	font-size: 9pt;
}
#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-title {
	text-transform: none;
	margin: 0;
	font-family: inherit;
	display: block;
	max-width: 100%;
}
Le CSS pour la correction jetpack

(merci à Jeremy Hervé)


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *