SEO : utiliser le rich snippet BlogPosting pour tes articles

Amas de code informatique

Les rich snippets servent à enrichir et à structurer d’avantage la data de nos sites internet pour que les moteurs de recherche puissent mieux les comprendre, mieux les référencer et également mettre nos pages un peu plus en valeur lors des recherches utilisateurs.

Ici j’veux partager avec toi un rich snippet que j’utilise pour mes
articles, le rich snippet BlogPosting. Un dérivé du rich snippet Article.

Tout d’abord, je t’invite à consulter la doc Google sur le rich snippet Article. Histoire de te familiariser avec le truc.

Ensuite je t’explique.

Tu vas voir c’est tout simple.

A la base, le rich snippet BlogPosting c’est un simple objet JSON qu’on place dans le footer pour que Google, en crawlant ta page, voie bien qu’il s’agit d’un article de blog.

Cet objet est structuré selon les standards définis par Schema.org. Sur cette page, tu trouveras par exemple la définition du rich snippet BlogPosting listant tous les attributs que tu peux utiliser dans l’objet JSON avec un descriptif des valeurs attendues.

La structure de l’objet que j’ai mis en place sur mes pages articles ressemble à ça :

<script type="application/ld+json">
{
	"@context": "http://schema.org/",
	"@type": "BlogPosting",
	"mainEntityOfPage" : "LIEN VERS l'ARTICLE",
	"headline": "META TITLE DE L'ARTICLE",	
	"description": "META DESCRIPTION DE L'ARTICLE",
	"image": "THUMBNAIL DE L'ARTICLE",
	"datePublished": "DATE DE PUBLICATION",
	"dateModified": "DATE DE MODIFICATION",	
	"author": {
		"@type": "Person",
		"name": "NOM PRÉNOM DE L'AUTEUR"
	},	
	"publisher": {
		"@type": "Organization",
		"url": "URL VERS LA HOME DU BLOG",
		"name": "NOM DU BLOG",
		"logo": {
			"@type":"ImageObject",
			"url":"LOGO DU BLOG",
			"width":LARGEUR DU LOGO,
			"height":HAUTEUR DU LOGO,
		}
	}
}
</script>

Du coup, le résultat final pour l’article que tu es en train de lire en ce moment, c’est ça :

<script type="application/ld+json">
{
	"@context": "http://schema.org/",
	"@type": "BlogPosting",
	"mainEntityOfPage" : "https://dev.pizza/rich-snippet-blogposting/",
	"headline": "SEO : utiliser le rich snippet BlogPosting pour tes articles",	
	"description": "Ici je veux partager avec toi un rich snippet que j'utilise pour mes articles, le rich snippet BlogPosting. Un dérivé du rich snippet Article...",
	"image": "https://dev.pizza/wp-content/uploads/2019/01/rich-snippets-blogposting-google.jpg",
	"datePublished": "2019-01-15T21:43:37+01:00",
	"dateModified": "2019-01-15T21:46:49+01:00",	
	"author": {
		"@type": "Person",
		"name": "Dev Pizza"
	},	
	"publisher": {
		"@type": "Organization",
		"url": "https://dev.pizza/",
		"name": "Dev Pizza",
		"logo": {
			"@type":"ImageObject",
			"url":"https://dev.pizza/wp-content/themes/devpizza/img/logo-devpizza-60x60.jpg",
			"width":60,
			"height":60
		}
	}
}
</script>

Tu peux vérifier par toi-même en inspectant le code source de cette page. Peut-être d’ailleurs que d’ici quelques temps il aura légèrement changé.

C’est cadeau!

Et parce que je suis sympa, je vais te partager aussi le code que j’ai développé pour qu’il se génère automatiquement dans mon wordpress sans que j’aie à installer de plugin 😛

Pour info j’ai placé ce code dans le fichier footer.php de mon thème juste avant la fermeture de la balise </body>.

<?php if(is_single()):?>
    <script type="application/ld+json">
    {
        "@context": "http://schema.org/",
        "@type": "BlogPosting",
        "mainEntityOfPage" : "<?php echo get_the_permalink();?>",
        "headline": "<?php echo get_post_meta($post->ID, 'meta_title', true); ?>",    
        "description": "<?php echo get_post_meta($post->ID, 'meta_description', true); ?>",
        <?php if(has_post_thumbnail()):?>
            "image": "<?php echo get_the_post_thumbnail_url(get_the_ID(),'full');?>",
        <?php else:?>
            "image": "<?php echo get_template_directory_uri().'/img/thumbnail-default.png';?>",
        <?php endif;?>
        "datePublished": "<?php echo get_the_date('Y-m-d\\TH:i:sP',$post);?>",
        "dateModified": "<?php echo get_the_modified_date('Y-m-d\\TH:i:sP', $post);?>",    
        "author": {
            "@type": "Person",
            "name": "<?php echo get_the_author_meta('user_firstname');?> <?php echo get_the_author_meta('user_lastname');?>"
        },    
        "publisher": {
            "@type": "Organization",
            "url": "<?php echo esc_url( home_url( '/' ) ); ?>",
            "name": "Dev Pizza",
            "logo": {
                "@type":"ImageObject",
                "url":"<?php echo get_template_directory_uri().'/img/logo-devpizza-60x60.jpg';?>",
                "width":60,
                "height":60
            }
        }
    }
    </script>
<?php endif;?>

Si tu veux t’en servir pour ton site wordpress, il te suffira de changer les valeurs de :

  • publisher > name
  • publisher > logo > url

Et enfin, il te faudra ajouter et alimenter les variables personnalisées « meta_title » et « meta_description » dans tous tes articles. Les variables personnalisées sont une option native de wordpress. Si ça t’intéresse je ferai un mini article sur le sujet.

Si tu comptes ajouter ce rich snippet à tes articles, une fois que c’est en place, tu pourras tester la validité des données de l’objet JSON via l’outil de test des données structurées de Google.

Tu y entres l’url d’un de tes articles et pouf! Si tout se passe bien tu devrais voir ton objet BlogPosting dans l’interface de résultat sans aucune erreur et aucun avertissement.

Si t’arrives à ce résultat…

CHAMPIOOOOOOOON!!!! 😀

Laisser un commentaire