La balise TITLE sur Blogger
Il est important de titrer son blog et toutes les pages qu'il contient.
Sur Blogger, une balise est déjà fournie dans tous les thèmes officiels.
Que génère cette balise et est-il possible de l'optimiser ?
La norme HTML
Chaque page référencée de votre blog doit contenir un titre clair et de préférence unique pour des raisons évidentes :
Le titre de la page est indiqué dans la ligne de titre sur le navigateur.
Le titre de la page est affiché dans l'historique des pages déjà visitées dans les navigateurs.
Le titre de la page est utilisé par les robots de recherche automatiques. Si le titre et son contenu sont dans les résultats, beaucoup de moteurs de recherche proposeront le titre de la page comme lien pouvant être cliqué.
Le titre de la page est repris par de nombreux réseaux sociaux et agrégateurs RSS.
etc.
Dans le code HTML d'une quelconque page web, le titre est noté dans l'entête entre <head></head>.
<title>introduit la mention du titre.Puis suit le texte du titre.
La mention du titre est clôturée par
</title>.
<title>TITLE</title>
C'est le côté théorique. En pratique, sur Blogger, c'est à peu près la même chose, à la différence près, que vous devez remplacer le texte statique par une expression XML Blogger afin d'obtenir un titre variable en fonction de la page.
Si vous mentionnez un texte statique, Outils pour Webmasters vous fera remarquer dans les suggestions HTML qu'il y a des titres en doubles.
La balise par défaut
Dans le code XML de votre thème officiel, Blogger fourni automatiquement « une formule » en employant les données universelles : data:blog.pageTitle (Thèmes Version 1 2) et data:view.title (Thèmes Version 3).
blog: pageTitle: string ,
view: title: string
Ces données sont injectées comme suit :
<title><data:blog.pageTitle/></title>
Fourni dans les thèmes officiels : Simple, Picture Window, Awesome Inc., Watermark, Ethereal, Travel & Dynamic Views.
<title><data:view.title.escaped/></title>
Fourni dans les thèmes officiels : Essential, Contempo, Emporio, Notable & Soho.
Répartition des titres par page
Pour le référencement, vous devez tenir compte que de 3 types de page :
- L'accueil - En général le titre correspond au nom du blog.
- Les articles
- Les pages autonomes
Les autres pages n'étant pas destinées a être indexées, le contenu du titre n'a guère d'importance. Du moins, il n'est pas obligé de respecter à la lettre les règles fixées par les moteurs de recherche.
Optimiser la balise [Débutant]
Écrire de bons titres, inclure des mots clefs et suivre à la lettre les bons conseils de votre spécialiste SEO ne vous serviront à rien si vous personnalisez la balise title à la 6-4-2, d'autant que pour le produit Blogger, le web est bourré d'astuces obsolètes et souvent fantaisistes pouvant vous induire en erreur.
Il est donc très important d'avoir une base XML solide qui génèrera cette balise dans votre thème.
Pour pouvoir adapter cette balise en fonction de vos besoins, vous devez connaître les références XML et choisir des données adéquates issues de la bibliothèque Blogger.
Quelques exemples :
Exemple 1 - Par défaut Thèmes V1/2
<title><data:blog.pageTitle/></title>
Solution fournie par défaut dans les thèmes officiels V1 & V2.
- Accueil: Nom du blog
- Article: Nom du blog + Titre de l'article
- Page autonome: Nom du blog + Titre de la page autonome
Exemple 2 - Par défaut Thèmes V3
<title><data:view.title.escaped/></title>
Solution fournie par défaut dans les thèmes officiels V3
Le titre est réduit à sa plus simple expression.
- Accueil: Nom du blog
- Article: Titre de l'article
- Page autonome: Titre de la page autonome
Exemple 3 - Dépouillé sophistiqué
<title><b:eval expr='data:blog.pageName ?: data:blog.title'/></title>
Résultat similaire à l'exemple 2. Le titre est réduit à sa plus simple expression.
- Accueil: Nom du blog
- Article: Titre de l'article
- Page autonome: Titre de la page autonome
Exemple 4 - Complet sophistiqué
<title><b:eval expr='data:blog.pageName ? (data:blog.pageName + " - " + data:blog.title) : data:blog.title'/></title>
Résultat similaire à l'exemple 1. Le nom du blog est mentionné à la fin du titre
- Accueil: Nom du blog
- Article: Titre de l'article + Nom du blog
- Page autonome: Titre de la page autonome + Nom du blog
Connaître la longueur des titres
Si vous êtes du genre pointilleux et que vous voulez connaître le nombre de caractères contenus dans vos titres, vous n'êtes plus obligé de sortir votre boulier compteur.
En effet, depuis 2016, Blogger peut calculer la longueur des chaînes de caractères dans l'éditeur XML.
On peut éventuellement écrire un petit commentaire à proximité de la balise title contenant une expression Blogger qui aura pour tâche d'afficher la taille complète du résultat. Il ne vous restera plus qu'à consulter le code source de la page courante pour en connaître la valeur et éventuellement corriger si le résultat vous paraît trop court ou trop long.
Pour écrire ce petit code, il suffit d'utiliser un alias de variable, de reporter les valeurs dans les nœuds enfants et d'appliquer le paramètre de longueur à l'alias.
Reprenons les 4 exemples du paragraphe précédent et adaptons-les :
Exemple 1 - Par défaut (Thèmes V1/2)
<b:with value='data:blog.pageTitle' var='title'> <b:comment>title (<data:title.size/>)</b:comment> <title><data:title/></title> </b:with>
Exemple 2 - Par défaut (Thèmes V3)
<b:with value='data:view.title.escaped' var='title'> <b:comment>title (<data:title.size/>)</b:comment> <title><data:title/></title> </b:with>
Exemple 3 - Dépouillé sophistiqué
<b:with value='data:blog.pageName ?: data:blog.title' var='title'> <b:comment>title (<data:title.size/>)</b:comment> <title><data:title/></title> </b:with>
Exemple 4 - Complet sophistiqué
<b:with value='data:blog.pageName ? (data:blog.pageName + " - " + data:blog.title) : data:blog.title' var='title'> <b:comment>title (<data:title.size/>)</b:comment> <title><data:title/></title> </b:with>
Au final, votre code source contiendra 2 petites lignes :
<!-- title (8) --> <title>Le titre</title>
Ajouter un slogan au titre de la page d'accueil
Ce n'est pas interdit, mais ce n'est pas non plus fourni par Blogger.
Il existe plusieurs méthodes pour ajouter un slogan uniquement à la page d'accueil. Pour simplifier au maximum la démo, on reprend le tout premier pack d'exemples, et on y ajoute un simple sélecteur ternaire dans une balise d'évaluation:
<b:eval expr='data:view.isHomepage ? " - Mon slogan" : ""'/>
Exemple 1 - Par défaut (Thèmes V1/2)
<title><data:blog.pageTitle/><b:eval expr='data:view.isHomepage ? " - Mon slogan" : ""'/></title>
Exemple 2 - Par défaut (Thèmes V3)
<title><data:view.title.escaped/><b:eval expr='data:view.isHomepage ? " - Mon slogan" : ""'/></title>
Exemple 3 - Dépouillé sophistiqué
<title><b:eval expr='data:blog.pageName ?: data:blog.title'/><b:eval expr='data:view.isHomepage ? " - Mon slogan" : ""'/></title>
Exemple 4 - Complet sophistiqué
<title><b:eval expr='data:blog.pageName ? (data:blog.pageName + " - " + data:blog.title) : data:blog.title'/><b:eval expr='data:view.isHomepage ? " - Mon slogan" : ""'/></title>
Optimiser la balise [Avancé]
Les exemples ci-dessous sont des codes de démonstration qui utilisent diverses méthodes. Ils vous permettront d'aller un peu plus loin en personnalisant séparément chaque groupe de pages.
Exemple 1 - Commutateur par type de contenu
<title> <b:switch var='data:view.type'> <b:case value='item'/> <data:view.title.escaped/> <b:case value='feed'/> <b:eval expr='data:blog.pageName ?: data:blog.title'/> <b:case value='error'/> Page 404 </b:switch> </title>
Exemple 2 - Commutateur par type de page
<title> <b:switch var='data:blog.pageType'> <b:case value='item'/> <data:view.title.escaped/> <b:case value='static_page'/> <data:view.title.escaped/> <b:case value='index'/> <b:eval expr='data:blog.pageName ?: data:blog.title'/> <b:case value='archive'/> <data:messages.blogArchive/> : <data:blog.pageName/> <b:case value='error_page'/> Page 404 </b:switch> </title>
Exemple 3 - Condition par type de page
<title> <b:if cond='data:view.isSingleItem or data:view.isHomepage'> <data:view.title.escaped/> <b:elseif cond='data:view.isSearch'/> <b:if cond='data:view.search.label'> <b:eval expr='"Articles avec le libellé : " + data:view.search.label.escaped'/> <b:elseif cond='data:view.search.query'/> <b:eval expr='"Résultat de la recherche : " + data:view.search.query.escaped'/> <b:else/> <data:messages.olderPosts/> </b:if> <b:elseif cond='data:view.isArchive'/> <data:messages.blogArchive/> : <data:blog.pageName/> <b:else/> Page 404 </b:if> </title>
