Modifier les balises OpenGraph de Blogger pour être mieux vu sur les réseaux sociaux

Blogger a des lacunes dans la gestion des balises OpenGraph que je vous propose de combler afin d'obtenir une meilleure visibilité sur les réseaux sociaux

Quand vos articles de blog sont partagés sur les réseaux sociaux, l’apparence compte autant que le contenu. Une image mal choisie ou l’absence d’informations claires peut faire perdre l’attention de vos lecteurs potentiels. Si vous utilisez Blogger, vous avez peut-être remarqué que ses balises OpenGraph, essentielles pour un bon partage, sont parfois incomplètes. 

Réjouissez-vous ! Dans cet article, je vous montre comment améliorer et personnaliser vos balises pour maîtriser votre présence sur les réseaux sociaux, étape par étape.

A noter que le réseau social X (ex Twitter) est un cas à part puisqu'il a ses propres balises, les Twitter Cards, qui sont traitées dans un autre article afin d'être ajoutées à Blogger.

Les anomalies des balises OpenGraph de Blogger et leurs solutions

  • La balise og:type est manquante. En soi et à l'heure actuelle, ce n'est pas absolument capital mais puisqu'on y est autant la rajouter. En son absence, Facebook lui affecte la valeur 'website' comme indiqué dans la documentation Meta.

    Le code proposé permet d'être un peu plus fin et d'affecter à og:type la valeur 'article' quand un article de blog est partagé, et 'website' dans les autres cas (page d'accueil ou de recherche). Un développement ultérieur permettra bientôt de distinguer les vidéos YouTube.

Avant la modification des balises OpenGraph, le programme de débug de Facebook ne prévisualisait qu'une pauvre icone pour la page d'accueil de mon blog Blogger
  • Quand c'est la page d'accueil du blog qui est partagée, et selon la version du thème Blogger utilisé, la propriété og:image est absente et c'est franchement ennuyeux car le robot Facebook, par exemple, se débrouille avec ce qu'il trouve en premier et ça peut être n'importe quoi, comme le montre l'illustration ci-dessus.

    Dans le cas de la page d'accueil, le code proposé affecte à og:image une URL d'image que vous pourrez choisir afin d'offrir aux réseaux sociaux la vision qui convient le mieux à votre blog. Vous pouvez constater le résultat de la modification ci-dessous. C'est mieux non ?
Après la modification des balises OpenGraph, Facebook a prévisualisé l'image que j'avais choisie pour la page d'accueil de mon blog Blogger

Introduire le code OpenGraph modifié dans votre thème Blogger


Important : faites une sauvegarde préalable de votre thème !

Dans votre thème Blogger, recherchez la 'balise de marquage commun'  <b:defaultmarkup type='Common'>

Si la balise de marquage commun n'est pas dans votre thème

Copiez le code ci-dessous et collez-le juste après la balise <head>
<b:defaultmarkups>
  <b:defaultmarkup type='Common'>
    
    <!-- Balises OpenGraph (partages sur les réseaux sociaux) -->
    <b:includable id='openGraphMetaData'>
      <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <meta content='website' property='og:type'/>
      <b:else/>
        <meta content='article' property='og:type'/>
      </b:if>
      <meta expr:content='data:blog.url.canonical' property='og:url'/>
      <meta expr:content='data:view.title.escaped' property='og:title'/>
      <meta expr:content='data:view.description.escaped' property='og:description'/>
     <b:if cond='data:view.featuredImage'>
        <meta expr:content='resizeImage(data:view.featuredImage, 1200, &quot;1200:630&quot;)' property='og:image'/>
      <b:else/>
        <meta content='URL-DE-VOTRE-IMAGE' property='og:image'/>
      </b:if>  
    </b:includable>


  </b:defaultmarkup>
</b:defaultmarkups>

Si la balise de marquage commun est déjà présente dans votre thème

Copiez le code ci-dessous et collez-le juste après la balise <b:defaultmarkup type='Common'> 
  
<!-- Balises OpenGraph (partages sur les réseaux sociaux) -->
    <b:includable id='openGraphMetaData'>
      <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <meta content='website' property='og:type'/>
      <b:else/>
        <meta content='article' property='og:type'/>
      </b:if>
      <meta expr:content='data:blog.url.canonical' property='og:url'/>
      <meta expr:content='data:view.title.escaped' property='og:title'/>
      <meta expr:content='data:view.description.escaped' property='og:description'/>
     <b:if cond='data:view.featuredImage'>
        <meta expr:content='resizeImage(data:view.featuredImage, 1200, &quot;1200:630&quot;)' property='og:image'/>
      <b:else/>
        <meta content='URL-DE-VOTRE-IMAGE' property='og:image'/>
      </b:if>  
    </b:includable>

Dans les deux cas

  • Copiez l'URL de votre image (ex. : https://monblog.com/mon-image.jpg) à la place du texte URL-DE-VOTRE-IMAGE

  • Enregistrez les modifications.

  • Affichez votre blog pour voir si tout va bien. En cas de problème faites une restauration à partir de la sauvegarde que vous venez de faire.

  • Pour vérifier l'efficacité de la modification, reportez-vous au chapitre 'Test de partage sur les réseaux sociaux'

Test de partage sur les réseaux sociaux

Commentaires

Enregistrer un commentaire