Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Quelques bases sur les Balises Meta pour Blogger

Aujourd'hui nous allons parler balises meta !
N'ayez pas peur de son nom barbare, les balises meta (ou meta tags en anglais), sont des bouts de code qui vont améliorer la recherche de votre blog dans les moteurs de recherche.
Mais pas que ! Ils vont aussi permettre d'avoir un joli aperçu d'article sur Facebook par exemple ;)

Allez c'est parti pour les explications !

Sommaire


Petite introduction

Les balises meta, comme je vous l'ai expliqué, sont des bouts de code qui vont aider la recherche de votre blog et de vos articles sur les moteurs de recherche. Mais comment ?

Ces codes vont définir un titre, une image, une description pour chaque page et article de votre blog. Ainsi, en partageant un article sur les réseaux sociaux, ces éléments seront automatiquement générés.

Je vous présente ici seulement quelques balises meta et Open Graph, mais la liste est longue, il en existe bien d'autres ! Mais ceci vous sera utile pour débuter ;)

Faire une sauvegarde de son thème

Comme d'habitude, faites une sauvegarde de votre thème avant toute modification de celui-ci ! Si vous faites une erreur vous pourrez facilement revenir en arrière ;)

Cliquez sur Modèle à partir de votre tableau de bord et cliquez sur Sauvegarder/Restaurer en haut à droite de l'écran. Cliquez sur Télécharger le modèle complet pour faire une sauvegarde de votre thème.

Quelques bases sur les Balises Meta pour Blogger

Vous pourrez maintenant facilement revenir en arrière si vous faites une erreur en cliquant sur Choisissez un fichier et en sélectionnant ce fichier.

>> Plus d'informations sur la sauvegarde, et comment charger votre sauvegarde en cas d'erreur ;)

Où coller les codes

Cliquez maintenant sur Modifier le code HTML :

Quelques bases sur les Balises Meta pour Blogger

Cliquez n'importe où dans la boîte de code, puis appuyez sur Ctrl et F en même temps.
Dans la boîte de recherche qui apparaît en haut à droite de la boîte de code collez :
<title><data:blog.pageTitle/></title>
Appuyez sur Entrer.

Nous allons remplacer cette ligne par les codes des balises meta ci-dessous.

Les codes des balises meta de base

Titre de la page

Voici le code pour définir le titre de la page :
<!-- Titre -->
<b:if cond='data:blog.url != data:blog.homepageUrl'>
  <meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' property='og:title'/>
  <title><data:blog.pageName/>  - <data:blog.title/></title>
<b:else/>
  <meta expr:content='data:blog.pageTitle' property='og:title'/>
  <title><data:blog.pageTitle/></title>
</b:if>
Collez ce code à la place de la ligne :
<title><data:blog.pageTitle/></title>
Comme ceci :

Quelques bases sur les Balises Meta pour Blogger

Que signifie ce code ?

La première partie défini le titre de la page si cette page n'est pas la page principale (page d'accueil).
Dans cet exemple le titre s'affichera comme ceci :
Nom de la page (ou de l'article) - Titre du blog
La 2e partie du code défini le titre si c'est la page d'accueil. Dans ce cas le titre de la page sera :
Titre du blog

A quoi correspondent ces titres ?

Le titre du blog est le nom que vous avez donné à votre blog. Vous pouvez le modifier dans Paramètres > Basique, à la ligne Titre :

Quelques bases sur les Balises Meta pour Blogger

Le nom de la page est le titre de l'article ou de la page sur la quelle vous vous trouvez.

Description de la page

Voici le code pour définir la description de la page :
<!-- Description -->
<b:if cond='data:blog.metaDescription'>
  <meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
  <meta content='Entrez une description ici' property='og:description'/>
</b:if>
Collez ce code à la suite du précédent, comme ceci :

Quelques bases sur les Balises Meta pour Blogger

Que signifie ce code ?

La première partie du code défini la description de la page comme étant celle que vous avez défini en créant votre article ou votre page. Si vous n'avez pas défini de description à votre article ou votre page, alors la description utilisée sera celle que vous avez défini avec le titre de votre blog.

La 2e partie du code est une description de secours au cas où vous n'avez pas ajouté de description à votre article, votre page ou votre blog. Elle peut aussi être utilisée au cas où ces descriptions ne chargent pas.

Remplacez Entrez une description ici par votre description de secours.

Comment modifier les autres descriptions ?

Tout d'abord vous devez activer les descriptions. Allez dans Paramètres, puis cliquez sur Préférences de recherche. A la ligne Description sous Balises Meta, cliquez sur Modifier :

Quelques bases sur les Balises Meta pour Blogger

Cochez Oui et entrez une description générale pour votre blog. Cliquez sur Enregistrer les modifications quand vous avez fini :

Quelques bases sur les Balises Meta pour Blogger

Pour ajouter une description à votre article, allez sur la page de création / modification de votre article. Dans les paramètres des articles à droite de l'écran, cliquez sur Description pour la recherche. Entrez ici la description de votre article et cliquez sur OK, puis n'oubliez pas de mettre à jour votre article ;)

Quelques bases sur les Balises Meta pour Blogger

Vous retrouverez le même onglet sur la page de création / modification de vos pages ;)

Image de la page

Voici le code pour définir l'image principale de la page :
<!-- Image -->
<b:if cond='data:blog.postImageUrl != &quot;&quot;'>
  <meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>       
  <meta content='URL de votre image de secours' property='og:image'/>    
</b:if>
Collez ce code à la suite des précédents.

Que signifie ce code ?

La première partie du code défini l'image principale comme étant la première image de votre article ou page s'li y en a une.

La 2e partie du code définit une image principale de secours, au cas où il n'y ai pas de première image.

Remplacez URL de votre image de secours par l'adresse URL d'une image de secours.

>> Vous pouvez ajouter cette image à Blogger pour générer une adresse URL. Suivez les instructions ici ;)

Type de contenu de la page

Voici le code pour définir le type de page :
<!-- Type -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <meta content='article' property='og:type' />
<b:else/>
  <meta content='website' property='og:type'/>
</b:if>
Collez ce code à la suite des précédents.

Que signifie ce code ?

Ce code informe simplement que les pages de vos articles sont des articles. Et que le reste de votre blog est un site web.

URL canonique

Voici le code pour définir l'URL canonique de votre blog :
<!-- URL Canonique -->
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
Collez ce code à la suite des précédents.

Que signifie ce code ?

Ce code permet de définir l'adresse URL officielle de vos pages. Pourquoi est-ce important ? Pour éviter d'afficher des duplicata de contenu sur les moteurs de recherche.

Quand on créé un blog sur Blogger, différentes extensions lui sont attribué par défaut : .fr .com etc.
Or pour les moteurs de recherche une adresse URL = une page web. En d'autres termes, votre page d'accueil en .fr est considéré comme une page différente de cette page en .com.
Pour éviter ceci, on définit donc une URL officielle pour les moteurs de recherche.

Indexation des pages annexes

Voici le code pour définir l'indexation des pages annexes de votre blog :
<!-- Indexation des pages annexes  -->
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Archives  -->
  <meta content='noindex,nofollow' name='robots'/>
<b:else/>
  <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<!-- Page d'erreur -->
    <meta content='noindex,nofollow' name='robots'/>
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- Page d'accueil -->
        <meta content='index,follow' name='robots'/>
      <b:else/>
<!-- Pages d'indexes (recherche et libellés) -->
        <meta content='noindex,nofollow' name='robots'/>
      </b:if>
    <b:else/>
<!-- Autres pages du blog -->
      <meta content='index,follow' name='robots'/>
    </b:if>
  </b:if>
</b:if>
Collez ce code à la suite des précédents.

Que signifie ce code ?

Ce code va dire aux moteurs de recherche s'il doit prendre en compte ou non les pages annexes de votre blog. Par pages annexes j'entends les pages de recherche de libellés, d'archives, de recherche de mot clé, et page d'erreur.

Dans cet exemple voici comment cont définit les instructions pour les différentes pages :

  • Archives : Ne pas afficher dans la recherche Google et ne pas suivre les liens de cette page
  • Page d'erreur : Ne pas afficher dans la recherche Google et ne pas suivre les liens de cette page
  • Page d'accueil : Afficher dans la recherche Google et suivre les liens de cette page
  • Pages d'indexes (Recherche de libellé ou mot clé) : Ne pas afficher dans la recherche Google et ne pas suivre les liens de cette page
  • Autres pages du blog : Afficher dans la recherche Google et suivre les liens de cette page

Comment sont définit ces instructions ? Avec les mots suivants :

  • index = Afficher dans la recherche Google
  • follow = Ne pas suivre les liens de cette page
  • noindex = Ne pas afficher dans la recherche Google
  • nofollow = Suivre les liens de cette page


J'espère que cet article vous à bien été utile ;)
Comme expliqué, je vous ai présenté une petite sélection de codes. La liste est longue !

Si vous voulez en savoir plus sur les balises meta et Open Graph, voici quelque sites intéressants :

Autres articles

64 commentaires:

  1. Génial j'ai appris plein de chose . En tout cas j'ai réalisé les étapes sans encombre.

    RépondreSupprimer
  2. Bonjour, rien avoir avec cet article mais je rencontre un problème avec mon blog. https://miss--fashionista.blogspot.com
    Normalement mes liens dans mes articles et "lire la suite" s'affiche en une sorte de bordeau, et dans mon dernier article et dans celui que je vais publier demain cela me fait aussi alors que les autres articles non. Et je ne sais pas d'où ça vient car je n'ai rien modifié. Donc j'espère que tu va pouvoir m'aider et bonne soirée ;)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il y a 2 choses :
      Tout d'abord la couleur de tes liens visités.
      Tu peux modifier la couleur de tes liens visités pour la même que tes liens non visités. Retrouve ce code CSS :

      a:visited {
      text-decoration:none;
      color: #cecece;
      }

      Remplace le code couleur par celle de la couleur de test liens.


      Ensuite d'après ton code CSS la couleur de tes liens Lire la suite est gris foncé :

      /* Apparence du lien */
      .jump-link a {
      font-family: Sweet Pea; /* Police */
      font-size: 20px; /* Taille de la police */
      color: #353535; /* Couleur du lien */
      background-color: #EFEFEF; /* Couleur de fond */
      padding-top: 10px; /* Espace au-dessus */
      padding-bottom: 10px; /* Espace en-dessous */
      padding-left: 30px; /* Espace à gauche */
      padding-right: 30px; /* Espace à droite */
      border-width: 2px; /* Epaisseur de la bordure */
      border-style: solid; /* Style de la bordure */
      border-color: #ffffff; /* Couleur de la bordure */
      text-decoration: none; /* Supprime le trait sous le lien quand on le survol */
      }

      Remplace le code couleur à la ligne :

      color: #353535; /* Couleur du lien */

      Par celle de ton choix ;)

      Supprimer
  3. Comme toujours, un article utile et très clair ! Merci !!

    RépondreSupprimer
  4. Bonjour Cathy !!
    Est ce que c'est possible d'améliorer la version mobile ? En effet, je souhaite que le blog, que j'ai customisé grâce à toi, soit de la même apparence sur un mobile. Quand je désactive la version mobile, mes polices spécifiques disparaissent sur la version mobile ... Peux tu m'aider stp?
    Merciiii beaucoup

    Sophie

    RépondreSupprimer
    Réponses
    1. Bonjour Sophie,
      Oui c'est possible. Les codes CSS existent pour la version web (ce sont ceux que je donne dans le tutoriels) et en version mobile avec .mobile devant.
      Tu peux réutiliser les codes CSS de la version web et les rajouter en version mobile en rajoutant .mobile devant. Par exemple pour les titres des articles ajoute :

      .mobile h3.entry-title {
      }

      Attention à bien ajouter tous ces codes CSS avant la ligne suivante :

      ]]></b:skin>

      Supprimer
    2. Merci beaucoup Cathy mais je viens d'essayer et ça ne fonctionne pas ... Tout ce que j'ai fait avec mon navigateur (safari) n'a pas du tout le même rendu sur un PC, une tablette ou un smartphone ....
      Merci beaucoup pour ton aide

      Supprimer
    3. Bonjour Sophie,
      Le problème vient sûrement d'un problème dans ton code. Un conflit entre les polices peut-être. A noter qu'il y a certaines polices qui ne sont pas compatibles avec les mobiles.

      Supprimer
  5. J'ai tout fait on verra bien ! mais tu es sûre que ça améliore le traffic de ne pas indexer certaines choses sur Google ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le plus important est d'indexer les pages principales de ton blog, c'est à dire ta page d'accueil, tes pages et articles. Les pages d'index : recherche de libellé, recherche de mot clé et archives ne vont que parasiter les recherches Google associés à ton blog ;)

      Supprimer
  6. Bonjour,

    Merci pour ce tutoriel.

    Pour la partie image, est ce possible de différencier lorsque c'est la page d'accueil et les autres pages ou articles?
    Par exemple je voudrais:
    (i) avoir une image en particulier (via l'URL) lorsque c'est la page d'accueil,
    (ii) avoir la première image de la page ou article lorsqu'il ne s'agit pas de la page d'accueil, et enfin,
    (iii) une photo en particulier (image de secours, via l'URL) lorsqu'il n'y a pas d'image pour des pages qui ne sont pas la page d'accueil.

    Merci d'avance,
    Antoine

    RépondreSupprimer
    Réponses
    1. Bonjour Antoine,
      Oui c'est possible.

      Utilise ce code :

      <!-- Image -->
      <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <!-- Image page d'accueil -->
      <meta content='URLIMAGE' property='og:image'/>
      <b:else/>
      <b:if cond='data:blog.pageType == "item"'>
      <!-- Image articles -->
      <meta expr:content='data:blog.postImageUrl' property='og:image'/>
      <b:else/>
      <!-- Image de secours -->
      <meta content='URL de votre image de secours' property='og:image'/>
      </b:if>
      </b:if>

      Supprimer
  7. Merci pour votre réponse.

    J'ai bien remplacé URLIMAGE et URL de votre image de secours par l'URL de l'image que je désirais. Cependant j'ai encore un petit souci avec l'image pour la page d'accueil (condition (i), pour les 2 autres conditions cela fonctionne parfaitement). Pour le moment c'est encore la première image d'un article (un article assez ancien en plus).

    Est-ce qu'il y a un temps d'adaptation ou les changements sont censés être immédiats?

    Merci d'avance,
    Antoine

    RépondreSupprimer
    Réponses
    1. Bonjour Antoine,
      Oui il y a un temps d'adaptation.
      De plus si tu veux partager sur Facebook par exemple, tu peux utiliser le Debug pour rafraîchir les paramètres d'une page web.
      Vas sur cette page : https://developers.facebook.com/tools/debug/
      Ajoute l'adresse url de la page que tu souhaites partager. Clique sur "Debug" puis sur "Fetch new scrape information".
      Si cela ne marche toujours pas alors il y a tout une panoplie de codes Facebook aue tu peux ajouter au blog pour gérer l'affichage : https://developers.facebook.com/products/sharing/

      Supprimer
  8. Coucou Catherine

    Super article ! j'ai malgré tous un petit soucis avec le bouton. J'ai suivis ton tuto pour les boutons de partage au pied de l'article. A présent quand j'ai intaler le bouton pin it sur les image , mon icon front awesome a changer de fore au pied des article. Pourais-tu m'aider?
    merci

    RépondreSupprimer
    Réponses
    1. Bonjour,
      J'ai mis à jour le tutoriel sur les boutons de partage. Il y a un conflit entre le code pour les boutons Pin it de Pinterest et les icônes Pinterest Font Awesome.
      Pour régler ce problème, retrouve ce bout de code dans ton code HTML :

      <i class='fa fa-pinterest-p'/>

      Ajoute ceci :

      data-pin-custom="true"

      Juste après le <i comme ceci :

      <i data-pin-custom="true" class='fa fa-pinterest-p'/>

      Ce petit bout de code va dire à Pinterest que tu utilises une image personnalisée pour l'icône Pinterest.

      Supprimer
  9. Bonjour !

    J'ai préféré laisser ce commentaire sur ton dernier tutoriel parce que j'avoue que quand j'ai vu mon problème j'avais déjà fait beaucoup de modifications grâce à tes tutos ! Bref je m'explique : J'ai remarqué que lorsque l'on voulais lire la suite d'un de mes articles, on a l'impression qu'une nouvelle page veut s'ouvrir mais elle disparaît immédiatement. Ensuite en bas de mon article j'ai " Lien vers cet article " et " créer un lien " qui apparaît et je n'arrive pas à m'en débarrasser.. Tu as une idée ?
    Merci d'avance

    RépondreSupprimer
    Réponses
    1. Effectivement, c'est bizarre :/
      C'est la première fois que je vois ce genre de problème. As-tu installé un code Javascript récemment ?
      Pour les liens "Lien vers cet article" et "créer un lien" ajoute le code CSS suivant dans ton thème :

      #backlinks-container {
      display: none !important;
      }

      Et ces liens seront cachés ;)

      Supprimer
  10. Bonjour,

    Merci pour ces conseils !

    Est-ce que tu as des conseils en ce qui concerne les balises H1, H2 etc. Par défaut dans blogger, le H1 est le titre du blog donc le H1 est toujours le même, même si on change de page ce qui n'est pas terrible pour le référencement. De plus, le titre d'une page est vu comme un H3 (ex : à propos), la date d'un post comme un H2... etc. En gros c'est un peu n'importe quoi mais je ne vois pas comment redéfinir les balises dans le code html, as tu des solutions ?

    Je te remercie :)

    RépondreSupprimer
    Réponses
    1. Bonjour Emilie,
      Effectivement tu as tout a fait raison ! Blogger ne gère pas les titres de manières très intelligentes. Mais avec le code des balises meta donné dans cet article, les titres des articles sont précisés dans le titre de la page.
      Sur toutes les pages autres que la page d'accueil, le titre de la page est défini comme "Titre de la page - Titre du blog". Sur la page d'accueil seulement, le titre de la page sera "Titre du blog". Cela permet de contourner les problèmes de niveau de titres du code HTML du blog :)

      Supprimer
    2. Bonjour,

      Je rebondi sur la question d'Emilie. Même après avoir modifié le code avec celui que tu donnes dans le tutoriel, lorsque je fais une analyse des h1, h2, etc. à l'aide de la Mozbar par exemple, je remarque que mon blog n'a pas de h1 et que tout est mis sous h2 (titre de l'article, date, et même titre des widgets)... C'est la même chose que ça soit sur la homepage ou sur la page d'un article.
      Est-ce normal?

      Mon blog est www.raspberrylipstick.com.

      Bien à toi,
      Antoine

      Supprimer
    3. Bonjour Antoine,
      Malheureusement oui. C'est la structure de base de Blogger qui est faite ainsi. Pour le modifier il faut changer les codes HTML du blog pour les titres des différents éléments. Transformer manuellement les h2 en h1, h3, h4 etc.

      Supprimer
  11. Coucou :)
    Ma question n'a rien avoir avec les balises meta mais je ne savais pas où la poser. Une lectrice m'a fait savoir il y a quelques jours que l'on ne pouvais plus laisser de commentaires sur mon blog et je n'arrive pas à solutionner le problème. Aussi, en bas de page de mon blog, il y a deux petites photos qui ne fonctionnent pas, je ne sais pas ce que s'est et aimerais les enlever et il y a également écrit "inscription à articles atom"...

    En espérant que tu puisses une nouvelle fois m'aider.

    Bisous,
    Léna

    RépondreSupprimer
    Réponses
    1. Bonjour Léna,
      C'est un problème qui est déjà survenu à des lectrices. Vérifies tout d'abord que tu as bien activé les commentaires pour tes articles. Vas dans Paramètres > Publications et commentaires. Sous "Emplacement des commentaires" vérifies que tu as "Imbriqué", et que sous "Qui peut ajouter des commentaires?" tu as "Tout le monde".

      Si c'est bien le cas et que tu ne peux toujours pas ajouter de commentaires aux articles qui n'en possèdent pas, alors le problème peut venir de beaucoup de choses...

      Vérifies dans ton code HTML que tu as bien 2 codes HTML qui finissent par :

      name='comment_picker'/>

      Ces codes doivent ressembler à ceci :

      <b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/>

      Supprimer
  12. Salut Catherine.
    Moi j'ai un problème avec le tuto sur le menu déroulant j'ai mis tout les HTML mais ça fais pas le même effet tu peux le voir toi même sur mon blog (la catastrophe ). S'il te plaît j'ai besoin d'aide.
    Merci d'avance

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je ne peux pas voir le problème car tu as remplacé le menu par un gadget Pages :/

      Supprimer
  13. Bonjour, merci pour tes nombreux tutoriels qui m'ont aidé à améliorer l'aspect visuel de mon blog. Je suis complètement novice en matière de HTML mais ton aide pas à pas m'a été précieuse. Par contre après avoir réalisé 3 ou 4 de tes tutos, j'ai voulu rédiger un nouveau billet et je pense avoir touché à quelque chose qu'il ne faut pas en réalisant les tutos parce que plein de choses se passent désormais sur mes brouillons: saut de lignes multiples et impromptus, image qui se copie colle n'importe où, je ne peux tout simplement plus travailler sur mon blog et ça me met dans tous mes états. Pense tu pouvoir me dire d'où vient le problème?

    http://elyzalecturesenchantees.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Elyza,
      Ecris-tu tes articles directement sur Blogger ou sur un programme de type Word ?
      Si tu écris tes articles sur un programme et les colle sur Blogger, alors tu ajoutes pleins de codes invisibles qui interfèrent avec la mise en page des articles. Je te conseil très fortement d'écrire tes articles directement dans Blogger ;)

      Supprimer
  14. Bonjour merci pour ta réponse, j'écris et mets en forme mes articles directement dans blogger, je pense que la plateforme avait un soucis parce que ça a duré quelques jours et désormais je n'ai plus ce problème, bizarre :/

    RépondreSupprimer
    Réponses
    1. C'est très possible, de temps en temps Blogger à quelques bugs comme ça ^^

      Supprimer
  15. Bonjour,

    Je me permet de t'écrire sur cet article car en effet j'ai dû mal avec le référencement de mon blog. Par exemple ta méthode est superbe mais j'ai peur que cela modifie ma mise en page ou autre.... Pourrais-tu me donner quelques conseils afin que mon blog gagne en visibilité? Merci, et je profite pour te dire que tes astuces sont superbes elles m'ont beaucoup aidé, merci! :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Les balises meta n'affectent pas la mise en page du blog. C'est du code caché qui sert simplement d'information aux moteurs de recherche, aux réseaux sociaux, etc. ;)

      Supprimer
  16. J'ai oublié de donner mon lien du blog : http://coastalandco.blogspot.fr/ merci encore :)

    RépondreSupprimer
  17. Bonjour,
    nous n'arrivons pas à partager les articles de notre blog avec une image correcte (on a un truc tout flou) sur facebook. Nous avons pourtant essayé toutes vos supers astuces mais rien n'y fait ! Avez-vous une idée ?
    Bonne journée et merci
    http://letrianglemasque.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le problème vient certainement des images qui sont trop petites. Pour que les photos s'affichent correctement, elles doivent faire au minimum 600 pixels de large par 315 pixels de haut. Tu peux trouver plus d'infos sur l'optimisation des articles pour les réseaux sociaux sur mon article ;)

      Supprimer
  18. Bonjour ,

    Merci beaucoup pour ton article super complet , j'ai ajouté tous les codes et j'avais d'ailleurs le problème de mon adresse de blog en .com .fr ..... cependant quand j'utilise debugger il me dit que j'ai toujours un soucis d'adresse avec ce message
    Object at URL 'http://ondinecheznanou.blogspot.com/' of type 'website' is invalid because it specifies multiple 'og:url' values: http://ondinecheznanou.blogspot.com/, http://ondinecheznanou.blogspot.com/.
    Est ce que tu peux m'aider et me dire si j'ai loupé quelque chose ??
    merci bonne journée

    RépondreSupprimer
    Réponses
    1. Bonjour Anne,
      Tu as 2 fois le code meta qui définit l'URL canonique de ton blog.
      Cherche lune des 2 lignes suivantes :

      <meta content='http://ondinecheznanou.blogspot.com/' property='og:url'/>

      Et supprime-en un ;)

      Supprimer
  19. Allô,

    Lorsque je partage une page, la description est bien celle indiquée, mais lorsque je partage un article, ce n'est pas la description qui apparaît, mais les informations sur l'auteur.


    www.alexandraetco.blogspot.com


    Merci à l'avance! :)

    RépondreSupprimer
    Réponses
    1. Bonjour Alexandra,
      Il y a des erreurs dans ton code. Tu as plusieurs fois le même code pour la description, qui doivent entrer en conflit.
      Vérifie que tu as bien ce code :

      <!-- Description -->
      <b:if cond='data:blog.metaDescription'>
      <meta expr:content='data:blog.metaDescription' property='og:description'/>
      <b:else/>
      <meta content='Entrez une description ici' property='og:description'/>
      </b:if>

      Si tu as :

      <meta content='Entrez une description ici' name='description'/>

      Supprime-le.

      Le problème peut venir de ton thème car les thèmes SoraTemplates, ThemeXpose, bloggerTemplates et autres sont pleins d'erreurs :/

      Supprimer
  20. Bonjour Catherine et merci pour ce tuto! Je t'avoue que je ne comprends rien aux balises méta. J'ai suivi ton tuto mais rien ne change lorsque je tape le nom de mon blog sur google. Je ne comprends pas, dans les balises méta pour le titre (le premier code que tu donnes), est-ce qu'il faut remplacer 'titre du blog' par son propre titre? Comme ça? expr:content='Escarpins et Marmelade' property='og:title'/> ou bien faut-il laisser le code tel quel?
    Je t'ai mentionné dans mon dernier article pour te remercier! http://escarpinsetmarmelade.blogspot.fr/2016/06/cest-lheure-du-bilan.html

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Merci pour la mention dans ton article ! :)
      Il faut laisser les codes tels quels. Par contre il faut attendre plusieurs jours avant que cela n'a d'incidence sur les moteurs de recherche. Il faut du temps pour que cela se mette à jour sur leur serveurs ;)

      Supprimer
  21. Bonjour Catherine,

    Merci beaucoup pour ce tuto qui permet d'entrer en douceur dans le monde mystérieux des balises méta et de faire un peu de ménage dans son code !

    J'ai une question probablement idiote mais je préfère être sûre : doit-on également se servir du code de l'url canonique tel que tu le donnes ici lorsqu'on a un nom de domaine personnalisé (type monblog.com) et non plus une adresse en blogspot.fr ?

    Merci d'avance ! :)

    RépondreSupprimer
    Réponses
    1. Bonjour Aurélie,
      Dans le cas d'un domaine personnalisé, tu peux remplacer data:blog.canonicalUrl du code meta par ton nom de domaine avec le http:// devant. Par exemple :

      <!-- URL Canonique -->
      <meta expr:content='http://catherinesurr.fr' property='og:url'/>

      Supprimer
    2. Merci beaucoup d'avoir pris le temps de répondre à mes commentaires. Tout fonctionne, sauf pour ce code de l'url canonique. Lorsque je remplace 'data:blog.canonicalUrl' par l'url de mon blog au format 'http://monblog.com', mon blog ne s'affiche plus du tout et je tombe sur un message d'erreur : Erreur d'interprétation du modèle de blog - Invalid expression 'http://monblog.com'. J'ai peut-être fait une erreur au moment de la redirection de mon blog même si a priori tout fonctionne.

      Je vais mettre de côté les balises meta pour le moment, j'y reviendrai plus tard quand je serai un peu plus expérimentée ;)

      Encore merci pour tes super tutos !

      Supprimer
  22. Bonjour et bonne année 2017
    Un excellent tutoriel, par contre avant de me lancer j'ai une question. Je ne sais pas si ce tuto marchera avec mon code html car j'ai acheté mon template sur Etsy est peut être que celui ci comporte des erreurs. Qu'en penses tu ?

    RépondreSupprimer
    Réponses
    1. Bonjour Olivia,
      La structure de ton thème et ses balises semblent correctes. Néanmoins tu peux vérifier s'il manque certaines balises et les rajouter si tu le souhaites :)

      Supprimer
  23. Je parcours ton blog depuis quelques jours car j'ai décidé de me pencher sérieusement sur mon référencement, je dois bien admettre que j'y connais le strict minimum mais je trouve tes explications très claires et pédagogues!
    J'ai appris beaucoup de choses, j'ai réussi à installer mes boutons de partage comme une grande (bon vu que tu avais fait tout le travail en même temps hein ... :p), et je suis en train de bien comprendre cette histoire de balise méta avant de me lancer.
    Par contre je suis aussi évidemment en train de regarder mon duplicate content et je me posais une question (j'ai détecté 42% de duplicate avec sidelink, c'est énooorme non?) est-ce que la balise meta que tu indiques en fin d'articles peut solutionner ça?
    Encore merci pour tes articles, ça m'aide énormément!

    RépondreSupprimer
    Réponses
    1. Bonjour Déliacious,
      Pour le duplicate content, cela peut venir de plusieurs choses. Cet article explique assez bien ce que c'est et comment l'éviter :
      - Bien soigner les balises Title et meta description, elles doivent bien être différentes à chaque page.
      - 1 seule URL par page (faire des redirections si la page à changé d'adresse, par exemple)
      - Bien définir l'URL canonique qui va définir l'URL d'origine du contenu de la page. Préférer la version du blog blogspot.com.
      - Indexer son site sur les moteurs de recherche en fournissant le fichier robots.txt

      Supprimer
  24. Ps : j'ai oublié que j'allais avoir trente deux questions en réalisant mes balises ... Hahem
    Quelle différence entre la description qu'on met sous le titre de notre blog et celle qu'on rentre dans les balises meta?
    Ca ne fait pas office de "doublon" pour google?
    Promis je ne touche rien tant que je n'ai pas ta réponse, je ne voudrais pas me faire bouder par gogole :) :-*
    Merci par avance pour ta réponse :D

    RépondreSupprimer
    Réponses
    1. Pour ce qui est des descriptions, le blog va faire la différence entre la description du blog et celle des articles. Si on se trouve sur une page d'article alors c'est la description de l'article qui sera chargée à la place de celle du blog ;)

      Supprimer
    2. C'est également valable pour les pages ;)

      Supprimer
  25. mille fois merci, grâce à toi j'ai vraiment amélioré mon blog (menu déroulant, module de recherche,balise meta).

    RépondreSupprimer
  26. Bonjour, tout d'abord merci pour les explications :)

    Voila j'ai mon blog depuis quelques jours, j'ai bien changé ma description mais quand je cherche mon blog sur google bah j'ai une descriptions bien chelou ^^ (voir l'image sur le lien)
    http://www.hostingpics.net/viewer.php?id=618193Capture.png

    Merci d'avance et encore merci

    ps ; pour blogger l'url canonique c'est bien .com ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      J'ai regardé un peu ton blog et tu as plusieurs fois le code meta pour la description.
      Le texte que l'on voit sur Google est du faux texte que l'on appel Lorem Ipsum. Vérifie dans Paramètres qu'il n'y a pas une description sous Basique à la ligne description. Je ne vois pas d'où cela peut venir sinon. Si tu as modifié des codes meta qui contenaient du faux texte, alors cela peut venir de là. Simplement ça prend du temps à Google de mettre à jour les infos.
      Pour l'url canonique, oui il me semble que pour Blogger c'est bien .com

      Supprimer
    2. Salut

      Merci beaucoup d'avoir pris le temps de répondre, alors dans un premier temps j'ai aucune description basique dans les paramètres.

      Avant j'avais ce bout de code que j'ai remplacé par les codes de ton article ci dessus.

      Voici mon ancien bout de code :
      http://textup.fr/202991XT

      Sinon je fais comment pour repérer le faux de texte dans mon code histoire de l'effacer et ne plus l'avoir dans les résultats de recherche Google.

      Merci d'avance

      Supprimer
    3. Bonjour Sosnake,
      Le problème semble résolu, je ne vois plus les textes par défaut et en faisant une recherche Google la description est bien à jour ;)

      Supprimer
  27. Hello !
    Ton article m'a beaucoup aidé à comprendre le fonctionnement de mon blog, mais j'ai une petite question qui n'est peut etre pas en rapport. Comment puis-je associer plusieurs articles à une catégorie de mon menu ? Je voudrais, quand je clique sur une catégorie ou une sous-catégorie, que s'ouvre une page avec plusieurs articles qui font partis de la même catégorie. J'espère que je suis claire ahah !
    Merci d'avance !

    http://eva-cadabra.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Eva,
      Il faut utiliser les libellés. Ajoutes un même libellé à tous les articles que tu souhaites regrouper sous une catégorie. J'ai créé un article sur les libellés ici.
      Ensuite, ajoute l'adresse url vers ce libellé dans le lien de ton menu comme expliqué dans ce tutoriel à la partie Un lien vers une catégorie, ou libellé.
      Petite remarque, tu peux trouver la liste complète de mes tutoriels classés par type sur cette page ;)

      Supprimer
  28. Bonjour Catherine!

    Impossible de trouver le code, en revanche voici ce que j'ai:



    Voici mon blog www.mademoisellepatisse.com

    Merci de ton aide!
    Adeline

    RépondreSupprimer
    Réponses
    1. Bonjour Adeline,
      C'est à cause de ton thème que tu ne trouves pas le code.
      Par contre tu as déjà de plusieurs balises meta dans ton thème. Il faut le retrouver et les modifier comme tu le souhaites.

      Supprimer
    2. Catherine!
      Merci pour tes réponses.
      J'ai toruvé ceci dans mon code HTML:
      -- Add your Meta Site Meta Tags Here.. Generate it by goo.gl/yBKxff -->
      du coup je peux copier les codes après cette ligne n'est ce pas?
      merci merci et merci

      Supprimer
    3. Bon j'ai tout copié après la ligne que je t'ai écrite plus haut et avant cette ligne:
      !-- Meta Tag Ends Here--
      tu crois que ça marchera quand même?

      Merci

      Supprimer
    4. Bonjour Adeline,
      Tu peux essayer mais comme tu as déjà des meta tags installés sur ton thème cela risque de faire doublon :/

      Supprimer

Vérifiez d'abord que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Je modère les commentaires 1 fois par semaine, mais je ne vous oublie pas ! :)

Newsletter

Tu veux recevoirinfos exclusives, news et ressourcesdans ta boîte mail ?
Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger