Nombreux sont les blogueurs qui utilisent le réseau social Pinterest... et vous avez peut-être envie de permettre à vos visiteurs d'épingler facilement vos contenus sur Pinterest à l'aide des épingles enrichies ("Rich Pins").
Les épingles enrichies Pinterest permettent d'améliorer l'affichage classique des épingles en y ajoutant des informations supplémentaires qui restent associées au contenu, indépendamment de la description entrée pour l'épingle.
Pour de nombreux blogs, ce réseau devient un vecteur de trafic très important, raison de plus pour chercher à maximiser sa visibilité sur Pinterest.
Il existe plusieurs types d'épingles enrichies en fonction de la nature du contenu que vous publiez : installation d'applications, articles, produits ou recettes. Dans cet article, je vais vous expliquer le fonctionnement des rich pins et comment les mettre en place sur votre blog.
Les épingles enrichies reposent sur les métadonnées
Quand on publie un contenu sur son blog, on peut donner des précisions sur la nature de ce contenu à l'intérieur du code du site. C'est ce que l'on appelle des métadonnées.
Les plus connues chez les blogueurs sont les métadonnées Open Graph : elles permettent d'indiquer le titre de l'article, sa description ou encore une image qui apparaîtra lorsque le contenu sera partagé sur les réseaux sociaux.
Par exemple, sur une recette Marmiton, les métadonnées Open Graph spécifient qu'il s'agit d'une recette (ligne "og:type qui indique "recipe", traduction de "recette" en anglais) :
Sur un article de mon blog, on a cette fois-ci des métadonnées de type article :
Ce sont ces métadonnées qui vont être récupérées et affichées dans les épingles enrichies Pinterest.
Ça veut dire qu'il faut que ces métadonnées existent sur votre blog avant même de chercher à créer des épingles enrichies sur le réseau social. Vous allez me dire : comment faire pour les ajouter à mon thème de blog, surtout si je n'ai aucune connaissance en codage ? C'est ce que je vais vous expliquer maintenant.
Etape 1 - Ajouter des metadonnées Open Graph à son blog
La manière de procéder dépend de la plateforme de blogging que vous utilisez et je vais vous parler ici de WordPress et de Blogger.
Les métadonnées sur WordPress
Si vous avez un blog WordPress gratuit (WordPress.com), les métadonnées sont déjà ajoutées automatiquement à vos articles grâce à JetPack, installé sur l'ensemble de la plate-forme.
Si vous avez un blog WordPress hébergé chez un hébergeur, il existe plusieurs moyens d'ajouter des métadonnées à ses pages. Le plus simple à mon sens est de faire appel à un plugin SEO, comme plugin Yoast SEO ou SEOPress, que beaucoup de blogueurs utilisent déjà pour travailler leur référencement.
Sur Yoast SEO, allez dans les options via le menu SEO > Réseaux sociaux et, dans l'onglet "Facebook", vérifiez que les métadonnées Open Graph sont bien activées.
Sur SEOPress, allez dans le menu SEO > Réseaux sociaux et, dans l'onglet "Facebook (Open Graph)", vérifiez que la case "Activer les données Open Graph" est cochée.
Les métadonnées sur un blog Blogger
Pour pouvoir intégrer une description personnalisée dans des épingles enrichies Pinterest à partir d'un blog Blogger, il faut d'abord activer l'affichage de la description lorsque vous rédigez un nouvel article.
Allez dans Paramètres > Préférences de recherche et au niveau de la ligne description, vérifiez que l'option "Activer les balises meta description pour la recherche" est bien activée et réglée sur "Oui".
Ça permet, lorsque vous rédigez un nouvel article ou que vous mettez à jour un ancien article, de voir un champ description dans la colonne de droite : je vous conseille vraiment de rédiger une description personnalisée, qui donne envie de cliquer sur le lien pour aller voir votre blog.
Si vous ne rédigez rien, Blogger aura tendance à répéter le titre de votre poste précédé de votre nom... et ce sont ces informations que récupéra Pinterest pour les rich pins.
Sur Blogger, pour que ça fonctionne, il faut suivre une autre étape... et modifier votre thème de blog. Ne vous inquiétez pas, je vais vous montrer pas à pas comment faire mais je vous conseille quand même, par mesure de précaution, de sauvegarder votre thème à chaque fois que vous devez le modifier.
Ça peut arriver à tout le monde de faire une erreur, d'être interrompu au beau milieu d'un tutoriel et de ne plus savoir où on en était... et si vous rencontrez un bug, vous aurez juste à restaurer votre sauvegarde pour que ça remarche !
Une fois la sauvegarde effectuée, allez dans le menu Thème > Modifier le code HTML. Si vous utilisez la nouvelle interface de Blogger, une fois dans le menu Thème vous devez cliquer sur les trois points à côté du nom du thème puis sur l'option "Modifier le code HTML".
Cliquez dans le champ qui affiche tout le code du blog puis entrez le raccourci clavier Ctrl + F (sur PC) ou Cmd + F (sur Mac) pour effectuer une recherche dans le code. Cherchez cette ligne :
<b:includable id='post' var='post'>
Vous allez devoir copier du code juste sous cette ligne. Si vous voyez une petite flèche noire sur le côté, ça signifie qu'une partie du code est cachée. Il faut cliquer sur la flèche noire pour la dévoiler :
Ensuite, juste sous la ligne en question, copiez ces lignes :
<meta property="og:type" content="article" />
<meta property="og:title" expr:content='data:post.title' />
<meta property="og:description" expr:content='data:blog.metaDescription' />
<meta property="og:url" expr:content='data:blog.url' />
<meta property="og:site_name" expr:content='data:blog.title' />
<meta property="article:published_time" expr:content='data:post.timestampISO8601' />
<meta property="article:author" content="Votre nom" />Remplacez juste "Votre nom" par… votre nom (logique, quand tu nous tiens !) ou supprimez la ligne entière si vous ne voulez pas afficher de nom d'auteur.
Cliquez ensuite sur "Enregistrer le thème" pour sauvegarder tous vos changements. Si vous utilisez la nouvelle interface de Blogger, le bouton Enregistrer se situe en bas à gauche :
Vous êtes maintenant prêt à passer à la deuxième étape.
Etape 2 - Valider les métadonnées sur Pinterest
Une fois que vous avez ajouté des métadonnées à votre blog sur WordPress ou sur Blogger, nous allons les valider sur Pinterest pour vérifier que le réseau social peut bien récupérer les informations, et les afficher dans des épingles enrichies.
Allez sur le Rich Pins Validator : il faut se connecter au site pour y avoir accès. Entrez l'adresse d'un article qui comporte des métadonnées et cliquez sur le bouton "Validate".
Voici ce qui doit s'afficher si vos métadonnées sont valides :
Etape 3 - Activer les épingles enrichies Pinterest
Pinterest détecte bien les métadonnées comme validées mais vous indique par une icône rouge que les épingles enrichies Pinterest ne sont pas activées sur le site. Pour demander l'activation des Rich Pins, cliquez alors sur le bouton "Apply now".
Il faut maintenant patienter… car c'est le réseau social qui décide de valider les épingles enrichies Pinterest sur votre site ! Ça peut prendre de quelques minutes à quelques jours en règle générale et une fois que les épingles enrichies seront activées, Pinterest vous enverra un e-mail de confirmation ! Voici à quoi il ressemble :
Une fois que Pinterest a validé les épingles enrichies sur votre blog, il est ensuite très simple de les utiliser : chaque article partagé depuis votre blog apparaîtra automatiquement sous forme d'épingle enrichie.
Et si vous entrez à nouveau une URL dans le Rich Pins Validator, Pinterest vous confirmera que les épingles enrichies sont bien en place.
De même, vos anciens articles déjà épinglés sur le réseau social avant que les épingles enrichies Pinterest ne soient activées vont petit à petit être "convertis" en épingles enrichies. Ça prend un peu de temps, souvent quelques semaines.
Le cas particulier des épingles enrichies de recette
Dans cet article, je vous ai montré comment mettre en place des métadonnées Open Graph de type Article. Si vous avez un blog cuisine, par exemple, et que vous souhaitez utiliser des épingles enrichies de type Recette, c'est plus complexe car les métadonnées à intégrer sur le site exigent du codage à de multiples endroits de votre thème de blog.
Sur WordPress.com, il existe des shortcodes prêts à l'emploi qui doivent être utilisés lors de la rédaction de la recette. La recette entière doit être encadrée par des shortcodes [recipe] et [/recipe] puis vous devez utilisez des shortcodes complémentaires pour marquer les ingrédients, les étapes, etc. Par exemple :
- [recipe-ingredients]Liste des ingrédients[/recipe-ingredients]
- [recipe-directions]Etapes de la recette[/recipe-directions]
Vous pouvez trouver des exemples en anglais sur le site de WordPress.
Sur WordPress.org, le plus simple est en général de choisir un thème de blog qui intègre déjà ces métadonnées recettes… car si vous avez un blog cuisine, c'est plutôt contraignant de penser, à chaque nouvelle recette, à "formater" correctement l'article. Si vous avez un thème qui n'intègre pas de métadonnées de recettes, vous pouvez également installer un plugin dédié aux recettes, qui permet d'ajouter ces métadonnées, comme WP Recipe Maker.
Pour savoir si votre thème actuel intègre des métadonnées de recette, vous pouvez le tester sur Pinterest avec le Rich Pins Validator.
Sur Blogger, il faudra être très à l'aise avec le code (ou faire appel à un développeur) car l'ajout des métadonnées exige du codage à différents niveaux du thème de blog. Vous pouvez retrouver les instructions pour mettre en place des métadonnées Schema.org "Recette" sur le site de Pinterest.
J'espère que cet article vous aidera à activer les épingles enrichies Pinterest pour vos articles de blog ! C'est toujours un plus pour que vos articles épinglés par des visiteurs soient bien mis en valeur sur le réseau social !
Bonjour Marlène,
Article intéressant mais impossible de trouver le code dans blogger car il n’existe pas. As-tu une solution s’il te plaît ?
Cordialement.
Bonjour Jean, c’est étonnant car c’est un code très basique, présent sur tous les thèmes que je connais. As-tu bien fait la recherche au niveau du code de Blogger (avec le champ de recherche qui s’affiche vraiment au-dessus du code HTML du thème) et pas avec la fonction recherche du navigateur ?
Salut Marlène,
Encore une fois un article bien écrit, bien structuré, beau visuellement, clair, limpide, pédagogique… Tu expliques si bien qu’on a l’impression d’être pris par la main! Félicitations, ton site est un régal j’en apprends tous les jours grâce à toi :)
Merci beaucoup pour ton commentaire Vincent !
Bonjour Marlène,
Merci beaucoup pour cet article ! J’ai suivi toutes les étapes pour un blog WordPress et c’est nickel :) Pinterest a validé ma demande seulement quelques minutes après avoir fait la manipulation. Par contre, il y a quelque chose qui me dérange sur les épingles enrichies sur Pinterest : dans l’extrait de l’article qui s’affiche maintenant sur l’épingle, il y a au début le nombre de partages sur les réseaux sociaux et en plus sans espace avec le début de l’extrait. Voilà comment ça apparait : 14.4KPartagesQue vous soyez bla bla.
Est-ce qu’il y a un moyen de corriger ça ?
Merci encore pour ton blog qui est une véritable pépite.
Hello Magali, as-tu trouvé la solution car pour ma part, je n’arrive pas à reproduire le problème ? Quand je partage, je ne vois pas cette information dans l’extrait.
Merci merci encore pour tous ces articles !! J’y trouve toujours ce que je cherche…
Merci Lara… et tant mieux ;)
Merci beaucoup pour ces explications !
Je me demandais quel était l’intérêt de convertir ces épingles en épingles enrichies et je me suis retrouvée ici !
Maintenant je n’ai plus qu’à attendre la confirmation de Pinterest…
Bonne continuation !
Marie
Merci Marie !
Bonjour Marlène et merci pour cet article ! Je viens de découvrir ton bog que je trouve super.
Je suis rédactrice web SEO et je travaille sur le compte Pinterest de l’une de mes clientes. Je me pose une question quant aux images qui sont proposées lors de l’épinglage d’un article, je m’explique, …
Elle possède actuellement un blog. Je lui ai créé un compte sur Pinterest dans lequel j’épingle chacun de ses articles. J’ai créé un visuel pour chaque nouvelle épingle mais lorsqu’un utilisateur épingle un article depuis son blog, il ne prend en compte que les visuels qu’il trouve. Ma question est donc, est-il possible d’intégrer d’autres images à épingler automatiquement ?
J’espère que c’est clair… et que tu pourras m’aider :-)
Belle journée,
Marie
Hello Marie, je ne sais pas par quel biais les gens épinglent des contenus (bouton sur chaque image, bouton de partage) mais typiquement, un bouton de partage permet normalement de choisir l’image que l’on veut épingler (cf le bouton Pinterest en bas de mon article, qui donne le choix). On peut aussi « forcer » le choix d’une image précise, il y a un tuto ici (un peu de code à ajouter à l’image dont on veut « forcer » l’épinglage.
Merci beaucoup pour ta réponse ! Je vais me pencher sur le sujet.
Merci beaucoup Marlène, cela fait plusieurs fois maintenant que je tombe sur ton blog en posant une question sur Google et à chaque fois c’est très bien expliqué et précisément ce qu’il me faut !!!
Tant mieux ;) Et merci Google alors :)
Merci Marlène pour ces bonnes idées! Justement je cherchais comment faire ! super article très bien expliqué.
J’espère que ça t’aidera ! Bon week-end de Pâques :)
Bonjour Marlène, une fois de plus un article très intéressant pour nous faire progresser! Je ne sais pas si je vais me lancer dans la mise en place des métas données « Recettes » avec Schema.org car ça me semble bien compliqué… J’ai changé néanmoins changé le mot « article » de la première ligne dans le codage que tu nous as fait ajouter par « recipe » et fais la manip sur Pinterest Developers , est ce que tu penses que ça peut déjà aider mes épingles à être plus visibles? Ou vaut-il mieux que je laisse « article » comme tu l’as indiqué? Et est-ce que tu penses que c’est gênant si je ne fais pas la suite de ce que tu expliques pour les blogs de recettes sur Blogger? Merci pour tous tes articles toujours très utiles et très bien expliqués!
Hello, pour répondre à ta question, tu ne peux pas simplement remplacer « Article » par « Recipe »… car du coup, ça provoque des erreurs et tes données sont invalides. Tout simplement parce que chaque type de contenu est « codifié » : en gros, pour qu’une recette soit « validée » comme étant une recette, il faut que certains éléments soient présents… et s’ils ne le sont pas, le code est jugé invalide.
Merci pour ta réponse! Du coup ça veut dire qu’il vaut mieux que je laisse « article » dans mon code HTML plutôt que de mettre « recipe »?
Oui car sans ça, ton code sera faux.
Ok, merci Marlèn! Bises et bonne soirée!
Bonjour Marlène. Un grand merci pour cet article et pour ton site en général, j’y ai appris énormément de choses, je reviens souvent le consulter, il est dans mon top 3 pour m’aider à mieux bloguer. Je blogue depuis peu sous wordpress (1 mois), je connais surtout Blogger et Tumblr. Ce n’est pas évident de se familiariser avec le SEO, les plugins etc mais j’aime apprendre :-)
C’est un atout, d’aimer apprendre :) Quoi qu’il arrive, on ne devient pas expert du web en quelques semaines ; en revanche, plus on est curieux, plus on emmagasine des connaissances qui finissent par « prendre un sens global » !
Ah voilà qui est intéressant, même si je n’ai toujours pas compris à quoi sert une épingle enrichie !
C’est simplement une manière de mieux mettre en valeur tes épingles, de telle sorte qu’elles se détachent du lot. A mes yeux, c’est un peu comme le fait de rédiger une « bonne » description pour les moteurs de recherche : ça donne plus envie de cliquer sur le lien que sur celui des voisins :)
Merci Marlène pour ces infos claires et concises; il faut que je vérifie sur Yoast si mes métadonnées sont bien activées pour commencer.
Je ne me suis pas vraiment penchée sur Pinterest pour l’instant. Par contre, j’ai remarqué que nombre de mes photos sont récupérées puis repostées sur Pinterest sans mentionner mon blog. J’ai l’impression que c’est un réseau privilégié par ceux qui s’approprient le travail des autres – et ensuite, tu retrouves tes tutos mentionnés sur d’autres sites avec comme notification ; source : Pinterest.
Désolée pour ce coup de gueule mais j’ai l’impression que Pinterest est à double-tranchant pour les créateurs.
C’est amusant que tu en parles, j’ai quelqu’un qui m’a parlé d’un outil pour repérer ce genre d’usage non autorisé, Pixtrakk. C’est payant et plutôt utilisé par les photographes pro qui en ont assez de se faire voler leurs contenus.
C’est affolant de voir que beaucoup de gens n’ont pas la moindre idée des règles en matière de droit d’auteur… mais j’avoue que lorsque j’ai débuté sur le web, je n’en savais pas grand-chose non plus. Je pensais « ne faire de mal à personne » en tant qu’amateur. Mais c’était il y a longtemps déjà, ça prouve qu’il y a encore beaucoup à faire pour former les internautes !