ThéorieFonctionnalitésSEO

La balise TITLE sur Blogger

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 modèles 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>.

Syntaxe
<title>le titre de la page</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 modèle officiel, Blogger fourni automatiquement "une formule" en employant la donnée universelle issue du dictionnaire "Blog": data:blog.pageTitle.

Représentation des ressources
"data": {
  "blog": {
    "pageTitle": string
  }
}

La donnée data:blog.pageTitle est injectée comme suit :

<title><data:blog.pageTitle/></title>


Répartition des titres par page

Pour le référencement, vous devez tenir compte que de 3 types de page :
  1. L'accueil - En général le titre correspond au nom du blog.
  2. Les articles
  3. Les pages autonomes
Les autres pages n'étant pas indexées, le contenu du titre n'a guère d'importance.


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 personnaliser 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 modèle.

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 (dictionnaire universel blog / dictionnaire universel view)

Quelques exemples

Exemple 1 - Par défaut
<title><data:blog.pageTitle/></title>
Solution fournie par défaut dans les modèles officiels.
  • Accueil: Nom du blog
  • Article: Nom du blog + Titre de l'article
  • Page autonome: Nom du blog + Titre de la page autonome

Exemple 2 - Dépouillé basique
<title><data:view.title/></title>
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
<b:with value='data:blog.pageTitle' var='title'>

  &lt;!-- title (<data:title.size/>) --&gt;

  <title><data:title/></title>

</b:with>

Exemple 2 - Dépouillé basique
<b:with value='data:view.title' var='title'>

  &lt;!-- title (<data:title.size/>) --&gt;

  <title><data:title/></title>

</b:with>

Exemple 3 - Dépouillé sophistiqué
<b:with value='data:blog.pageName ?: data:blog.title' var='title'>

  &lt;!-- title (<data:title.size/>) --&gt;

  <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'>

  &lt;!-- title (<data:title.size/>) --&gt;

  <title><data:title/></title>

</b:with>

Au final, votre code source contiendra 2 petites lignes :

Rendu HTML
<!-- 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
<title><data:blog.pageTitle/><b:eval expr='data:view.isHomepage ? " - Mon slogan" : ""'/></title>

Exemple 2 - Dépouillé basique
<title><data:view.title/><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/>

    <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/>

    <b:case value='static_page'/>
      <data:view.title/>

    <b:case value='index'/>
      <b:eval expr='data:blog.pageName ?: data:blog.title'/>

    <b:case value='archive'/>
      Les archives de <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.isPost or data:view.isPage or data:view.isHomepage'>
    <data:view.title/>

  <b:elseif cond='data:view.isSearch'/>
    <b:if cond='data:view.search.label'>
      <b:eval expr='"Articles avec le libellé : " + data:view.search.label'/>
    <b:elseif cond='data:view.search.query'/>
      <b:eval expr='"Résultat de la recherche : " + data:view.search.query'/>
    <b:else/>
      Articles plus anciens
    </b:if>

  <b:elseif cond='data:view.isArchive'/>
    Les archives de <data:blog.pageName/>

  <b:else/>
    Page 404

  </b:if>
</title>
Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte TC :
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

DéveloppementsFichiers XML
Résumés des articles avec images réactives [Pack 2016]
Populaire
ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire