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, X (anciennement 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. Je vous montre comment choisir une autre image directement dans Yoast SEO, puis comment modifier par le code l’URL de l’image injectée dans vos balises Open Graph.

Le plugin Yoast SEO – anciennement WordPress SEO by Yoast, dispose du réglage Données Open Graph, activé par défaut dans Yoast SEO > Réglages > Fonctionnalités du site, rubrique Partage social. 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 :

<meta property="og:image" content="https://wpchannel.com/images/2015/08/DSC_1102.jpg">

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.

Par défaut, Yoast SEO retient l’image que vous avez choisie pour les réseaux sociaux, sinon l’image mise en avant, sinon la première image du contenu. À défaut, il se rabat sur l’image par défaut définie dans ses réglages.

Choisir l’image dans Yoast SEO, sans code

Pour un article ou une page, ouvrez le panneau Yoast SEO de l’éditeur, puis la rubrique Apparence sur les réseaux sociaux. Sous Image pour les réseaux sociaux, cliquez sur Sélectionner une image, choisissez-la dans la médiathèque puis enregistrez votre contenu. Yoast SEO recommande une image de 1 200 × 675 pixels.

Pour vos contenus sans image, définissez une image par défaut dans Yoast SEO > Réglages > Réglages essentiels, champ Image du site. Avec Yoast SEO Premium, chaque type de contenu peut aussi recevoir sa propre image par défaut, dans la rubrique Types de contenu des réglages.

Par le code, avec le filtre wpseo_opengraph_image

Pour automatiser ce choix, par exemple à partir d’un champ personnalisé, utilisez le filtre wpseo_opengraph_image, qui modifie l’URL injectée dans og:image. Yoast SEO indique aussi la largeur, la hauteur et le type de l’image d’origine (og:image:width, og:image:height, og:image:type) : le code ci-dessous les retire lorsqu’il remplace l’image, pour ne pas annoncer des dimensions fausses.

/**
 * Yoast SEO: use the image URL stored in the "wpc_banner_img" custom field as Open Graph image.
 */
function wpc_get_banner_image_url() {
	$post = get_queried_object();

	if ( ! $post instanceof WP_Post ) {
		return '';
	}

	$url = get_post_meta( $post->ID, 'wpc_banner_img', true );

	return is_string( $url ) ? sanitize_url( $url ) : '';
}

function wpc_custom_opengraph_image( $image_url ) {
	$banner_url = wpc_get_banner_image_url();

	return '' !== $banner_url ? $banner_url : $image_url;
}
add_filter( 'wpseo_opengraph_image', 'wpc_custom_opengraph_image' );

// The width, height and type output by Yoast SEO describe the replaced image: drop them.
function wpc_custom_opengraph_image_details( $value ) {
	return '' !== wpc_get_banner_image_url() ? '' : $value;
}
add_filter( 'wpseo_opengraph_image_width', 'wpc_custom_opengraph_image_details' );
add_filter( 'wpseo_opengraph_image_height', 'wpc_custom_opengraph_image_details' );
add_filter( 'wpseo_opengraph_image_type', 'wpc_custom_opengraph_image_details' );

Ajoutez ce code dans le fichier functions.php d’un thème enfant ou dans une extension de fonctions globales. Il récupère le champ personnalisé wpc_banner_img, dans lequel vous aurez saisi l’URL complète de l’image. Dans l’éditeur de blocs, affichez ce champ depuis le menu Options : Préférences > Général, rubrique Avancé, option Champs personnalisés, puis Afficher et recharger la page. Pour aller plus loin, utilisez Advanced Custom Fields.

Le filtre ne s’applique que si Yoast SEO a déjà trouvé une image à remplacer. Sur un contenu sans aucune image, il faut donc qu’une image par défaut soit définie, comme indiqué plus haut.

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. Facebook garde en cache les informations des pages déjà partagées : si l’ancienne image s’affiche encore, passez l’URL dans l’outil de débogage de partage de Meta (Sharing Debugger) pour forcer leur mise à jour, comme l’explique la documentation de Yoast.

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

Au-delà des balises Open Graph, mon accompagnement en référencement SEO WordPress couvre la technique, les contenus et le suivi des positions.

À l’inverse, si une autre extension les gère déjà, voici comment supprimer les balises Open Graph de Yoast SEO.