On me demande souvent de parler de référencement sur Blogger/Blogspot donc j'ai décidé de vous donner un petit coup de pouce en matière d'optimisation SEO si vous êtes sur cette plateforme.
Évidemment, c'est une plateforme gratuite donc elle vous donne moins de liberté qu'un WordPress installé chez un hébergeur par exemple. Néanmoins, il y a toujours de petites optimisations que l'on peut mettre en place pour améliorer son référencement naturel et Blogger n'est pas la pire plateforme en la matière puisqu'elle vous permet de modifier le code de votre blog.
Aujourd'hui, nous allons parler d'un petit ajout bien utile : la balise title et la meta description.
Title et meta description : à quoi ça sert ?
En simplifiant, ce sont des bouts de code HTML qui vont permettre de faire ressortir certaines informations sur vos pages dans les résultats des moteurs de recherche. Quand votre site s'affiche au milieu de vos concurrents, ces éléments peuvent donner envie de cliquer sur votre lien plutôt que sur celui du voisin… un bon point pour gagner du trafic !
Le title est un facteur important pour aider Google à comprendre de quel thème traite votre page. Il joue un rôle dans votre positionnement.
La meta description, elle, n'a pas de rôle direct en termes de référencement naturel : autrement dit, elle ne va pas impacter directement le positionnement de votre site sur Google.
En revanche, elle peut améliorer le taux de clics vers votre site et indirectement, ça peut donc générer du trafic, des partages, des liens vers vos pages, autant de choses qui vous font gagner de la visibilité !
Le but de mon article n'est pas de vous faire un vrai cours sur les title/meta descriptions (j'ai préparé un autre post sur le sujet avec des conseils de rédaction !) mais plutôt de vous montrer comment les afficher sur Blogger.
La balise title sur un blog Blogger
Par défaut, un thème Blogger affiche la balise title à l'aide de ce type de code :
<title><data:blog.pageTitle/></title>
Ça permet d'afficher un title par défaut sur toutes les pages.
Les balises title par défaut prévues par Blogger
Voici ce qu'affiche Blogger par défaut en guise de balise title :
- Page d'accueil - Titre du blog que vous indiquez dans le menu Paramètres > Basique :
- Article - {Titre du blog} : {Titre de l'article}
- Page - {Titre du blog} : {Titre de la page}
- Catégorie - {Titre du blog} : {Nom du libellé de la catégorie}
- Résultats de recherche - {Titre du blog} : Résultats de recherche pour {mot-clé recherché}
- Archives par date - {Titre du blog} : {Date : année ou mois + année}
Ce n'est pas optimal pour plein de raisons :
- Si le titre de votre blog est long et le titre de l'article aussi, vous allez très vite dépasser la longueur idéale d'un title (moins de 60 caractères) et le titre sera tronqué dans les résultats de recherche Google.
- Le nom du blog apparaît toujours au début : c'est bien sur la page d'accueil mais clairement, sur les articles ou les pages internes, l'information la plus importante est le sujet de l'article/de la page.
- C'est automatisé... donc vous ne pouvez pas contrôler ce que vous mettez dedans.
A l'heure où j'écris cet article, on ne peut pas personnaliser individuellement le title de chaque article, l'option n'est pas proposée lorsque l'on rédige un post. En revanche, on peut transformer un peu le code par défaut pour le rendre plus pertinent sur le plan SEO.
Améliorer la balise title pour le SEO sur Blogger
Allez dans le menu Thèmes > Modifier le code HTML puis cherchez la ligne ci-dessous :
<title><data:blog.pageTitle/></title>
C'est elle qui contrôle toute l'automatisation des titles sur un blog Blogspot. Remplacez la ligne ci-dessus par ce code :
<b:if cond='data:blog.pageName == ""'>
<title><data:blog.title/></title>
<b:else/>
<b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == "static_page"'><title><data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == "archive"'><title>Articles de <data:blog.pageName/> | <data:blog.title/></title></b:if>
<b:if cond='data:blog.searchLabel'><title><data:blog.searchLabel/> | <data:blog.title/></title></b:if>
<b:if cond='data:blog.searchQuery'><title><data:blog.searchQuery/> : articles trouvés</title></b:if>
</b:if>
En bon français, ce code signifie : si la page web ne comporte pas de nom, alors on affiche par défaut le titre général du blog. Sinon, on adapte le titre en fonction de la nature de la page.
Ça va permettre d'avoir une structure beaucoup plus simple.
- Sur la page d'accueil, on aura toujours le titre principal du blog indiqué dans Paramètres > Basique.
- Sur un article, le title sera tout simplement le titre de l'article.
- Sur une page, ce sera le titre de la page.
- Sur une archive de date, par exemple tous les articles de l'année 2022, on aura un titre du type "Articles de 2022 | Titre du blog".
- Sur une catégorie, on aura un title du type "{Nom du libellé} | {Titre du blog}" (le plus important, le nom de la catégorie, apparaîtra ainsi au début du title).
- Sur la page de recherche, on aura : "{Mot-clé recherché} : articles trouvés".
La meta description sur un blog Blogger
La meta description sur Blogger peut être personnalisée (et je vous conseille de le faire !) mais ce n'est pas activé par défaut. Il faut d'abord aller dans le menu Paramètres > Préférences de recherche et activer l'option "Description". Vous pouvez, à cet endroit, rédiger une meta description pour la page d'accueil du blog :
Activer l'option meta description permet d'afficher un nouveau champ dans la colonne de droite lorsque vous rédigez un article.
Il s'intitule "Description pour la recherche" et c'est là que vous pouvez rédiger une meta description unique pour chaque article (moins de 155 caractères espaces inclus, si vous souhaitez qu'elle ne soit pas coupée dans les résultats de recherche Google).
Que faire s'il n'y a pas de meta description dans le thème ?
Il peut arriver, dans de rares cas, qu'un thème ne prévoie pas l'affichage de la meta description. Dans ce cas, il faut aller dans le menu Thèmes > Modifier le code HTML et chercher la ligne <b:skin><![CDATA[/*
Juste AVANT, copiez ce code :
<b:if cond='data:blog.metaDescription != ""'><meta expr:content='data:blog.metaDescription' name='description'/></b:if>
Sachez aussi que Google n'affiche pas systématiquement la meta description que vous avez écrite. En fonction de la requête de l'internaute, il peut aussi choisir d'afficher un extrait du contenu qu'il juge plus pertinent que votre meta description.
Dernière astuce : vous pouvez utiliser ce simulateur de SERP pour vérifier en temps réel la longueur de vos balises title/meta description. L'outil vous indiquera si elles sont trop longues, trop courtes ou bien dimensionnées !
Voilà, j'espère que ce tuto vous aidera ! C'est une petite optimisation SEO qui révèle à la fois les possibilités et les limites de Blogger en matière de référencement naturel : on peut personnaliser certaines choses... et en même temps, on n'atteint pas un niveau de personnalisation optimal (avec la possibilité de choisir un title pour chaque page qui soit différent du titre de l'article). Néanmoins, si vous voulez un blog un peu plus performant sur le plan SEO, ça ne peut faire que du bien d'améliorer l'existant :)
Salut mais après où de oit mettre le nom du blog h1 ?
Bonjour, je n’ai pas écrit d’article à ce jour sur la personnalisation du balisage h1, h2, etc sur Blogger.
bonjour
Des tutos très claire et très net .
Merci infiniment
Merci beaucoup !
Bonjour
que doit-je écrire dans la case (( description de la recherche ))
Merci
Bonjour, je donne plein de conseils dans cet article sur la façon de rédiger la meta description. En résumé, elle doit offrir une synthèse de ce que l’on va trouver sur la page, écrite d’une manière qui donne envie de lire et de cliquer sur ce site-là plutôt que sur un autre site !
Coucou Marlène,
J’espère que tu vas bien ! J’ai un petit souci avec les titles. J’ai mis le code recommandé et les posts que j’ai publié depuis mettent dans la recherche Google le nom de mon blog au lieu du titre du post. Comment faire pour qu’apparaisse le titre du post uniquement ?
J’ai une autre question. J’aimerais beaucoup que dans la recherche Google lorsqu’on arrive sur mon blog que la méta description soit divisée en domaine correspondant au quatre partie de mon menu principal. Comment faire ?
Merci par avance !
Bonjour Cristie, concernant le title je vois effectivement que le blog utilise le « titre du blog » comme title et non le titre de la page. Sur les thèmes Blogger récents, le code pour afficher le title peut être celui-ci :
<title><data:view.title.escaped/></title>
A la place de celui que j’ai indiqué dans l’article avec « data:blog.pageTitle ».
Concernant la meta description, je ne comprends pas bien ta question. La meta description correspond à la description d’une page précise donc qu’entends-tu par « la diviser en domaines » ?
Bonjour Marlène,
Merci pour la rapidité de ta réponse. Je viens de modifier le code. J’espère que je n’ai pas fait de gaffes.
J’aimerais que dans la recherche Google il y ait plus que la métadescription qui pour mon blog représente une ligne. J’aimerais qu’apparaissent les 4 grands domaines juste sous le titre du blog. Cela ne s’appelle peut être pas métadescription. J’aimerais que ma (métadescription) soit plus importante et organisée en catégorie directement sur la page de recherche de Google comme pour le blog : les miscellanées d’Usva. On voit dans la recherche Usva K et Litterassociations.
Merci à toi de prendre le temps de me répondre.
Bonjour Cristie, pour le title ça ne semble pas fonctionner, c’est étrange car normalement il n’y a pas 36 façons de récupérer le titre d’une page. Il y a soit le code pour la plupart des anciens thèmes que je donne dans l’article, à savoir :
Soit le code pour les thèmes plus récents, qui est généralement sous cette forme :
<title><data:view.title.escaped/></title>
Tu utilises quel thème ? Si ce n’est pas un thème officiel, il faudrait poser la question à son créateur.
Pour les éléments dont tu parles au niveau de la meta description, c’est ce que l’on appelle des « sitelinks ». Ce n’est pas paramétrable, c’est Google qui choisit de les afficher (ou pas) à partir de ce qu’il comprend de la structure du site. Autrement dit, plus le site est structuré clairement, avec des rubriques bien définies, bien fournies, plus Google a des chances d’afficher des sitelinks.
Merci pour ta réponse. Je n’utilise pas un site officiel. Je vais voir ce que je peux faire.
Houlà pour les sitelinks c’est mort !
Merci
De rien !
Merci pour cet article. Je vais m’y mettre!
Ça fait partie des petites optimisations que l’on peut mettre en œuvre assez facilement !
J’ai suivi vos conseils mais je ne comprends pas pourqoi ma description s’affiche au dessus du blog. Donc, je l’ai retirée momentanément …
C’est sans doute évident pour vous mais je ne trouve pas…
Merci et Salutations.
Godaille
Bonjour, je pense que le code a dû être copié au mauvais endroit. Pour expliquer de manière un peu « simple », sur une page web, on identifie souvent deux parties : un en-tête, qui contient plein d’informations qui ne sont pas du tout affichées sur la page de manière visible (on appelle ça le « head » ou « header »)… et un corps de page (le « body ») dont les informations vont être affichées au visiteur. Ce n’est pas rigoureusement exact mais c’est une manière simple d’expliquer les choses :)
Le code des balises title et meta description doit être copié dans la partie « en-tête » de la page et normalement, si vous respectez bien les étapes du tutoriel, c’est ce que ça fait. S’il est copié par erreur dans la partie « corps de page », il va s’afficher sur la page de manière visible.
Il se peut aussi que le thème Blogger affiche la meta description en guise de « descriptif » de blog… donc visible sur les pages. Auquel cas, c’est une erreur de conception du design, qui est bien dommage !
J’ai galéré un peu mais je pense avoir réussi, merci pour le tuto :)
C’est vraiment une bonne habitude à prendre de travailler ces éléments, ça fait partie des petites optimisations possibles sur Blogger alors autant en profiter !
Merci pour ces précieuses informations
Bonjour Marlène,
Je tiens un blog (très mal référencé) depuis de nombreuses années. Cherchant à améliorer sa visibilité, je viens de tomber sur ton site et tiens à te remercier pour tes judicieux conseils et tutos. N’étant pas très doué, Je ne suis pas sûr du tout de parvenir à améliorer mon référencement, mais apprécie toutefois beaucoup ton coup de pousse, qui m’a fait découvrir des fonctions de Blogger que je ne connaissais pas. :-)
Bonjour Marco, c’est en essayant que l’on apprend, que l’on découvre aussi ce qui fonctionne (ou pas)… et quand on s’engage dans une démarche d’amélioration, ça ne peut pas faire de mal.
bonjour
J’ai suivi votre conseil, remplacé la ligne « title » et mis le code que vous indiquez…. et c’est une catastrophe, mes nouvelles pages ne sont plus repérables par leur titre dans Google. J’ai sans doute cafouillé quelque part….
J’ai pourtant effectué un simple copié collé à la place de ce qu’il fallait remplacer.
cordialement
Bonjour, pourtant quand je vais sur votre blog les title ont l’air bien optimisés… J’ai ouvert plusieurs articles pour tester et le title est impeccable donc il me faudrait un exemple plus précis pour comprendre ce que vous qualifiez de « catastrophe ».
Exemple sur Google :
Bonjour, et merci pour votre réponse.
C’est avec les nouveaux billets que ce n’est plus pareil, depuis que j’ai fait ce copier-coller. Ils ne sont plus référencés par leur titre, mais c’est la page d’accueil du blog qui apparait quand on tape le nom du nouveau billet.
comme ça:
« Musardise
http://www.musardise.com/
Bernuit, à Langon. Four à pain et puits. Je n’ai pas vu souvent un puits et un four à pain si près l’un de l’autre, dans un village de notre pays de Vilaine. C’est le … »
Il me semble qu’avant, la manipulation, c’était instantané, qu’il n’y avait pas le nom du blog tout seul en tête, mais bien l’article recherché, et que maintenant le référencement s’attache d’abord au nom du blog… je ne sais pas si je me fais comprendre. En tout cas, ce n’est pas dramatique, mon petit blog est local et non commercial et j’ai peut-être fait des bêtises avec le html .
En tout cas, je vous remercie pour votre attention
Bonjour, je pense surtout que les tout nouveaux billets ne sont pas encore indexés sur Google ;) Quand on utilise la commande « site » dans Google ou qu’on tape simplement l’URL du billet « Bernuit, à Langon. Four à pain et puits » sur Google par exemple, l’article n’est pas encore référencé sur Google du tout. A l’inverse, si je prends un article un tout petit peu plus ancien comme « La chapelle de Brandeneuf, au Grand Fougeray », le title s’affiche parfaitement sur Google.
Vous avez raison !
En tout cas, je vous remercie de vous être penchée sur mon cas, et de m’avoir répondu avec patience.
Bonjour Marlène,
Encore une fois je me retrouve sur ton site pour arriver à bidouiller le mien ! :D
Je viens seulement de me rendre compte que j’avais totalement négligé la partie SEO et référencement pour mon blog et j’ai donc décidé de m’y atteler sérieusement… Je rencontre ce pendant un petit soucis dès le début : je ne trouve pas la première ligne a chercher que tu demandes. Crois-tu que tu puisse m’éclairer de nouveau :) ?
Merci d’avance,
Jessica
Hello, je vois pourtant que ton blog comporte un title, essaie de chercher juste le début de la ligne, à savoir
<title>
, il y a peut-être simplement un espace en plus dans ton thème qui fait qu’on ne trouve pas le code à l’identique.Coucou, effectivement j’ai une autre ligne qui se rapproche de celle dont vous parlez dans votre article (j’ai d’ailleurs voulu la noter dans mon précédent commentaire mais impossible de le valider !) -> Je vous donne donc les éléments de cette ligne avec des tirets pour que que mon commentaire puisse être accepté :
A la place de « blog-pageTitle » j’ai « view-title-escaped »
Est-ce que cette ligne est la bonne ? Dois-je remplacer cette ligne avec me morceau de code que vous fournissez plus haut ?
Merci pour vos réponses (rapides)…
Jessica
Oui, c’est la bonne ligne. Sur certains thèmes, elle s’écrit effectivement comme ça :
<title><data:view.title.escaped/></title>
Merci beaucoup pour ton aide, je m’y met dès ce soir ! Et encore merci pour tous ces articles hyper complets et tellement bien écrits…
Bonne journée
Bonjour,
Merci pour ce tuto qui m’a permis de mieux comprendre la notion de balise title. En cherchant un peu sur le net, j’ai trouvé cet article https://bloggercode-blogconnexion.blogspot.com/2012/05/la-balise-title-sur-blogger.html
mais Soraya parle de références XML et elle précise qu’il ne faut tenir compte que de la page d’accueil, des articles et des pages autonomes pour la balise title, » que les autres pages n’étant pas indexées, le contenu du titre n’a guère d’importance ».
Je ne m’y connais pas du tout en code mais est ce que votre code est la même chose que le langage XML ?
Merci d’avance pour votre aide
Je n’ai pas lu tout l’article mais quoi qu’il en soit, le code que je fournis dans l’article fonctionne et répond aux bonnes pratiques en matière de référencement et d’expérience utilisateur.
Merci beaucoup :: informations très pertinentes et surtout très compréhensible pour un débutant comme moi (look du site sympa en plus…)
Merci Yves !
Voilà, j’ai le petit encadré « description » qui s’est mis sur mes articles. :)
C’est bien utile, même si Google ne tient pas toujours compte de la description que tu indiques ça permet tout de même de proposer une phrase « attractive » pour les internautes au lieu de compter systématiquement sur un texte par défaut qui ne sera pas toujours optimal :)
Bonjour, je suis avec intérêt votre blog, je le trouve très intéressant ainsi que vos tutoriels. J’ai voulu faire hier le référencement title/meta description et j’ai fait toutes les étapes comme décrites mais quand je vais sur simulateur de SERP et que je rentre mon url aucun titre ni meta description n’apparaît … que dois je faire ?
Hello, je conseillais d’utiliser le simulateur de SERP juste au moment de la rédaction… L’import de balises ne fonctionne pas toujours très bien et Google a très récemment changé la longueur maximum de la meta description, qui passe à 320 caractères (avec une longueur moyenne constatée de 230 caractères), le simulateur n’a pas encore pris en compte ce changement (mais comme il peut compter les caractères, il garde une certaine utilité !).
Quand je regarde le code de l’article « Ma grossesse en Corée 3 » par exemple, je vois bien une balise title et une meta description :) La meta description est un peu courte, en revanche.
ah ok merci beaucoup ! pour la meta description je voulais faire plus mais quand j’ai voulu enregistrer il m’a dit que je dépassais le nombre de caractères..
Merci Marlène pour ces explications qui nous aide à y voir un peu plus clair! J’avais lu ton article mais pas encore pris le temps de le mettre en application… Petit à petit on apprend et on essaye d’améliorer son blog, et ce grâce à toi! Je viens de faire tout ce que tu préconises dans cet article (avant j’avais accès à l’encart de la description pour la recherche quand je rédigeais mes articles et je ne sais pas pourquoi depuis quelques temps je ne l’avais plus…). On va voir si ça porte ces fruits même si je sais que la saisonnalité joue beaucoup sur les blogs culinaires et que ce travail devrait porter ses fruits à long terme.
Ça met toujours du temps à porter ses fruits, le SEO repose beaucoup sur la patience. Néanmoins, toute optimisation, si petite soit elle, est un bénéfice pour le site et pour l’utilisateur au final donc mérite d’être effectuée :)
J’ai appris très récemment les bases du SEO avec des amies blogueuses, mais elles sont toutes sur Word Press et je ne savais donc pas comment faire sur blogger. Ton article m’aide beaucoup, merci infiniment !
Hello Julie, les bases du SEO sont communes à tous les sites… donc l’idée est ensuite de trouver des moyens de les appliquer à sa propre plateforme :) D’ailleurs, même en tant que professionnelle du secteur, c’est un challenge quotidien car j’ai régulièrement des clients sur des plateformes que je ne connais pas, voire des gens qui ont créé leur propre plateforme. Il faut alors faire des recherches pour savoir « comment faire »… et parfois, on ne peut pas tout faire !
Bonjour
Merci beaucoup pour tous ces conseils clairs et fort utiles.
Je vais lancer prochainement mon site et j’aimerais qqs astuces d’écriture, de rédaction pour optimiser l’efficacité des balises titre et meta descriptions en termes de referencement.
Merci d’avance et à bientôt
Helene
Hello Hélène, je vais préparer un article sur le sujet car c’est un « fondamental » du référencement, je pense que beaucoup de blogueurs ne savent pas comment approcher ces balises.
Super! Je l’attends avec impatience.
Merci et à très. Ite alors!