Blogger et description de votre article sur Facebook

avril 13, 2011
J'ai mis du temps à trouver la solution, que j'ai trouvé sur l'article Facebook share showing wrong description –solved!  de Greenlava du blog http://www.bloggersentral.com/ , qui m'a gentillement autorisée à traduire son tutoriel. Je n'en ai pas fait une traduction littérale, car j'y ai ajouté quelques commentaires.

Voici la problématique : lorsque vous partagez un article sur Facebook, il arrive que sous le lien de partage, ne figure pas sa description, ou bien figure les commentaires ect... Bref, vous avez ceci par exemple :

A la fin de ce tutoriel, vous obtiendrez ceci :

 Blogger est au courant de ce problème et se penche actuellement sur le bug. cf leur article du 10 mars 2011.

Pour l'instant vous pouvez suivre ce tutoriel.

Comment Facebook obtient la description de votre article ?

Facebook tire la description de votre article selon l'ordre suivant :

  1. D'abord, il recherche une balise meta description, et utilise ce contenu en tant que description.
  2. S'il n'y a pas trouvé de description meta tag,  Facebook cherche le premier  (paragraphe) tag qui contient au moins 120 caractères. (Savez-vous pourquoi les commentaires et la description du blog sont repris comme description? Car chacun a une balise qui  est utilisé pour mettre en forme le texte dans un paragraphe).
  3. Si Facebook ne trouve rien, il ne mettra aucune description. 

Selon Facebook, il analyse votre page toutes les 24 heures afin d'assurer que la description (et les autres données) sont à jour. Cependant, vous pouvez manuellement la rafraîchir en entrant l'URL sur Facebook Url Linter 

Comment résoudre cela ? 

1. Ajouter une meta description
2. Ajouter un à vos articles. D'après l'auteur du tutoriel, c'est l'absence de cette balise qui empêche Blogger de reconnaître leurs bonnes descriptions.

Ajouter l'extrait de votre article

1. Aller sur votre tableau de bord
2. Puis sur présentation - Modifier le  code htlm
3. Sauvegarder votre modèle avant tout changement (on ne sait jamais)
4. Développer les modèles de gadgets
5. Chercher :
<data:post.body/>
6. copier coller le code ci-dessous juste en avant.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <b:if cond='data:post.snippet'>
   <meta expr:content='data:post.snippet' name='description'/>
   </b:if>
 </b:if>

7. Sauvegarder votre modèle

Comment ajouter le tag <p> à vos articles

Vous pouvez le faire de plusieurs façons.

1. Soit manuellement, en insérant au paragraphe que vous souhaitez, le p, assurez vous d'avoir choisi 120 caractères, comme ceci :

<p>premier paragraphe de votre article</p>

2. Utilisez Windows Live Writer  qui ajoutera le <p> automatiquement à vos articles. Malheureusement ce programme ne marche que sur PC et il n'existe ni pour MAC ou Ubuntu.

3. Ajouter le tag <p> directement dans le template. C'est ce qu'il y a de plus simple à faire d'après l'auteur du tutoriel de Blogger Sentral.

             1. Cherchez dans votre template la ligne
    <data:post.body/>

                 2. Et remplacez-la par ce code
      <p><data:post.body/></p>


      La balise <p> sera ajoutée automatiquement à vos articles.

      Important : Si vous avez un <div> ou un <blockquote> dans votre billet cela ne marchera pas...

      Après avoir fait vos changements, sauvegardez votre modèle, et insérez l'url d'un de vos articles, pour voir la différence sur Facebook URL Linter

      J'espère que ce tutoriel vous aidera.

      Si cette méthode ne marche pas essayez celle expliquée sur le forum officiel de Blogger en français. 

      7 commentaires:

      1. Merci de l'astuce je n'avais pas fait attention à ce détail donc un grand merci a toi. Bye et bon mercredi

        RépondreSupprimer
      2. Bonjour Thierry,
        Disons cela m'agaçait de ne pas voir la description de mes articles sous Facebook, c'est pour cela que j'ai fait ce tutoriel. Mais écrire un tutoriel est très long, car je dois aller sur des sites pour faire du copier coller des codes... J'espère que ce tutoriel aidera certains bloggeurs.
        Bonne journée à toi aussi :)

        RépondreSupprimer
      3. Bonsoir Tomate Joyeuse ! Merci beaucoup pour cette astuce qui fonctionne très très bien :)
        Très sympa ton blog, je reviendrai y faire un tour.
        Bonne soirée et encore merci.

        RépondreSupprimer
      4. Hello ! Merci pour ces précieux conseils mais j'ai encore un petit souci.
        J'insère dorénavant les balises <p et </p directement des mes articles et tout fonctionne parfaitement mais par contre souci lorsque je veux partager ma page d'accueil xxxx.blogspot.com sur facebook : c'est l'image et la description du dernier article qui s'affiche. Pourrais-tu m'aider ?

        RépondreSupprimer
        Réponses
        1. Difficile de voir l'état de bon template avec un simple commentaire… je ne suis ps devin.. bref, les p.. c'était avant.. et je n'ai pas le temps de mettre à jour cet article.
          Il faut poser la question sur le forum Blogger.

          Supprimer

      Fourni par Blogger.