Personnaliser les images des balises Open Graph avec Yoast SEO

Les balises Open Graph sont utiles au référencement sur les réseaux sociaux comme Facebook, Twitter ou encore Pinterest. Un plugin comme Yoast SEO les ajoute automatiquement dans vos en-têtes de page. Toutefois, il arrive bien souvent que l’image générée à partir du lien de la page ne soit pas satisfaisante. En utilisant un filtre, nous verrons que vous pouvez modifier l’URL de l’image à injecter dans vos balises Open Graph.

Mise à jour du 26 août 2015 : merci à Gregory Viguier de Screenfeed pour la relecture du code !

Le plugin Yoast SEO – anciennement WordPress SEO by Yoast, dipose de l’option intitulée Ajouter les métadonnées Open Graph. Concrètement, il s’agit de balises standardisées pour récupérer le titre, la description, l’image principale, etc. Malgré une certaine redondance avec les métadonnées de base, elles offrent la possibilité d’optimiser finement les partages sur les différents réseaux.

Voici un exemple de balises Open Graph sur un article du site :

Un problème récurrent concerne l’URL de l’image récupérée. Dimensions non adaptées pour des réseaux sociaux, mauvais cadrage, résolution non autorisée… les raisons sont nombreuses pour avoir besoin de définir une image qui sera utilisée spécifiquement pour les réseaux sociaux. Une sorte d’image à la une secondaire en somme.

Pour ce faire, nous allons utiliser le filtre wpseo_opengraph_image pour modifier l’URL injectée dans og:image.

/* Yoast SEO Opengraph */
function wpc_custom_opengraph_image($thumb) {
	$post = get_queried_object();

	if (is_a($post, 'WP_Post')) {
		if (get_post_meta($post->ID, 'wpc_banner_img', true)) {
			$thumb = esc_url(get_post_meta($post->ID, 'wpc_banner_img', true));
		}
	}

	return $thumb;
}
add_filter('wpseo_opengraph_image', 'wpc_custom_opengraph_image');

Ce code peut être ajouté dans un fichier functions.php de votre thème par exemple. Dans cet exemple, nous récupérons un champ personnalisé dans lequel vous aurez saisi l’URL de l’image. Pour aller plus loin, utilisez Advanced Custom Fields.

open-graph-image-url

Une fois en place, visitez une page de votre site et analysez le code source afin de vérifier que l’URL nouvelle est correcte. Poursuivez le test en partageant l’URL sur Facebook par exemple et assurez-vous que l’image affichée est la bonne.

Un code bien balisé est un code SEO-friendly !

3 commentaires

  1. Calvin

    Bonjour, j’ai trouvé votre article qui m’a semblé apporter LA solution que je cherchais mais en fait non.
    J’ai copié ce code dans le fichier functions.php de mon thème, mais quand je veux partager un article de ma boutique ben ça reste la même image que celle de la boutique qui n’est pas optimisée pour FB. Dans certains cas c’est très gênant car le cadrage passe totalement à côté… Une idée de ce que j’ai pu rater? J’ai jetpack et yoast seo et aussi accesspress social comme plugins qui viennent bidouiller les partages sur les réseaux sociaux.

Laisser un commentaire