Référencement sur Blogger : ajoutez des balises title et meta description

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 :)