La balise TITLE sur Blogger

Par –
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>.

Syntaxe
<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).

Échantillonage des ressources

  blog:  pageTitle: string ,
  view:  title: string

Ces données sont injectées comme suit :

Dans les thèmes 1 2
<title><data:blog.pageTitle/></title>

Fourni dans les thèmes officiels : Simple, Picture Window, Awesome Inc., Watermark, Ethereal, Travel & Dynamic Views.

Dans les thèmes 3
<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 :

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


Autres éléments SEO

Retourner à l'introduction

Dernière mise à jour

Licence - La reproduction du contenu de ce blog n'est pas autorisée

Aucune disposition des Conditions d'Utilisation de ce blog ne pourra être interprétée comme conférant à l'Utilisateur une licence sur les Droits de Propriété Intellectuelle.

Le blog Blogger Code PE ne concède qu'une autorisation de visualisation de son contenu à titre personnel et privé. Les copies ou reproductions doivent être strictement réservées à l'usage privé du copiste.

Toute reproduction abusive, totale ou partielle du blog Blogger Code PE, représentation, modification, publication, traduction, adaptation totale ou partielle de l'un quelconque de ces éléments, accompagnée ou non d'un lien de référence, quel que soit le moyen ou le procédé utilisé, est interdite et sera considérée comme constitutive d’une contrefaçon et passible de poursuite (Les peines prévues à cet effet sont une condamnation de 3 ans d'emprisonnement et une amende de 300.000€) conformément aux dispositions des articles L.335-2 et suivants du Code de Propriété Intellectuelle.

En savoir plus

Nous nous réservons le droit d'afficher dans ce cadre les notifications d'infraction à la loi DMCA en relation avec le contenu de ce document et déposées par les représentants agréés du blog Blogger Code PE.

Image

Affiliée au Product Experts Icon Google Product Experts Program - Ambassador & Troubleshooter.

  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Spécialisation : Technologie des thèmes Blogger.

Auteur originel de la théorie du langage XML Blogger : Règles syntaxiques, directives d'usage, classifications, compilations et corrélations des composants.
Cela représente près de 10 années de travail. Je remercie tous ceux qui ont respecté ma propriété intellectuelle et j'offre mes meilleurs sentiments aux nombreux contributeurs (Amis, Utilisateurs, Experts Produits Google, Blogger Team et Ingénieurs).

Spotlight

Populaires cette semaine

Twitter : Bouton mentionner / Mention button

Par –
Image
Le bouton Mentionner de Twitter, spécifique pour Blogger.
Diverses configurations pour l'éditeur HTML de Blogger, les éditeurs HTML standards et les gadgets AddToBlogger.
Ce bouton permet à vos visiteurs de mentionner un utilisateur Twitter sur Twitter.
Multiple réglages : Choix du profil Twitter, taille du bouton, texte prédéfini personnalisé, restrictions d'affichage, CSS personnalisés, etc.
Possibilité d'associer le bouton à un auteur particulier pour les blogs multi-auteurs.
En savoir plus ➤