Différenciez les balises title et h1
C’est la rentrée… plein de choses à vous dire… on commence par une question que je rencontre de manière récurrente : la comparaison de la balise <H1> avec la balise <TITLE> en termes de mots clés et de positionnement éditorial.
Je n’apprendrai rien à la plupart d’entre vous en rappelant que :
- La balise <TITLE> est une métadonnée qui apparaît tout en haut de l’écran à gauche, dans la barre supérieure du navigateur Firefox ou Internet Explorer. Dans la grosse majorité des cas, c’est le contenu de cette balise que Google affiche comme titre de la page dans les résultats d’une recherche.
- La balise <H1> correspond au titre principal dans le corps de la page. En principe, nous n’utilisons qu’une seule balise <H1>, tandis que la balise <H2> ou <H3>, correspondant aux titres de second et troisième niveaux, peut être utilisée à plusieurs reprises dans une même page HTML.
Les questions suivantes se posent, pour lesquelles je rencontre actuellement des opinions et des stratégies différentes et nuancées au sein des entreprises et des spécialistes en référencement :
1. La balise <TITLE> doit-elle être identique à la balise <H1> ?
2. La redondance est-elle souhaitable ?
3. Quel degré de différenciation peut-on accepter ?
4. Faut-il automatiser la production des balises <TITLE> sur base des balises <H1> ?
5. Le <TITLE> et le <H1> doivent-ils être plutôt informatifs ou plutôt accrocheurs ?
Je vais successivement : donner des éléments de réponse à ces questions, décrire quelques situations rencontrées sur le terrain, et vous demander votre avis.
1. La balise <TITLE> doit-elle être identique à la balise <H1> ?
Techniquement parlant, ce n’est pas une obligation.
Choisir de différencier ces deux balises reste donc un acte éditorial.
Avec des conséquences possibles sur les lecteurs et sur les moteurs de recherche.
2. La redondance est-elle souhaitable ?
La redondance entre les balises <TITLE> et <H1> présente un double avantage.
Tout d’abord, elle est un signe de cohérence. Après avoir cliqué sur la page des résultats du moteur de recherche, l’internaute apprécie d’atterrir sur une page qui correspond bien à sa demande. En assurant la concordance, vous rassurez les attentes du visiteur.
Par ailleurs, cet effet de cohérence et de répétition de mots clés renforcera votre référencement. Si Google n’apprécie pas trop la “sur-optimisation”, il accepte totalement, voire espère, un degré minimum de cohérence, et donc de redondance, entre les balises <TITLE> et <H1>.
N’ayez aucune crainte, en tout cas, de produire cette redondance.
3. Quel degré de différenciation peut-on accepter ?
Trois raisons, au moins, peuvent justifier de différencier la balise <TITLE> de la balise <H1>.
Le <TITLE> peut se permettre d’être un peu plus long. Il peut contenir 50 à 70 caractères sans aucun problème, jusqu’à 100 même, avec tout l’intérêt que cela comporte en termes d’insertion de mots clés et expressions clés. Tandis qu’un titre <H1> se doit de rester plus court sous peine de perdre en accroche lecteur. Un titre <H1> sur deux lignes n’est ni élégant ni efficace.
Le <TITLE> apparaît comme un élément extrait dans les résultats très disparates des moteurs de recherche. Il gagnera à apporter des informations de contexte. Raison pour laquelle la plupart des éditeurs de sites web concluent la balise <TITLE> par une signature (le nom de la société, par exemple).
Dans certains cas, il peut être intéressant d’introduire quelques variations synonymiques. Une expression, un mot, un verbe, légèrement différents entre le <TITLE> et le <H1>, afin de coller à la variété des formulations.
4. Faut-il automatiser la production des balises <TITLE> sur base des balises <H1> ?
Comme dans la plupart des situations industrielles, l’automatisation présente des avantages et des inconvénients.
Les avantages de l’automatisation sont la cohérence et le gain de temps et d’énergie.
Les désavantages de l’automatisation sont le manque de souplesse ou d’optimisation sur mesure.
Il est de plus en plus fréquent de rencontrer des systèmes de gestion de contenu web (CMS) qui choisissent d’automatiser la création des balises <TITLE>. Souvent, la balise <H1> est reprise en <TITLE>, complétée par la signature de l’éditeur. Dans certains cas, le titre est situé dans l’architecture du site web. Le <TITLE> s’apparente alors à un sentier de navigation (fil d’Ariane). Je ne suis pas fan de cette dernière solution, souvent trop mécanique, et génératrice de titres trop longs. Le titre accompagné d’une signature reste une solution simple, assez standard, et facile à mettre en place. Je conseille cette solution par défaut, mais en s’octroyant le droit, à certains moments, sur certaines pages hautement prioritaires du point de vue SEO, de modifier la balise manuellement.
Détail important : la signature doit apparaître derrière, et non devant le titre de la page, de manière à donner tout le poids aux mots clés centrés sur le contenu (“topic keywords”), et non sur la marque de fabrique (“brand keywords”), laquelle reste souvent plus facile à référencer.
5. Le <TITLE> et le <H1> doivent-ils être plutôt informatifs ou plutôt accrocheurs ?
La question peut sembler un peu naïve, mais… on dit qu’un bon titre est à la fois informatif (transparent quant au contenu qu’il annonce) et accrocheur (qui éveille l’attention du lecteur). C’est vrai pour les balises <TITLE> et <H1>, mais dans des dosages différents, à mon humble avis.
Le <TITLE> est davantage centré vers les moteurs de recherche, fortement pris en compte dans la mécanique du référencement, et extrait de son contexte. Pour ces raisons, il sera avant tout informatif. Mais la fonction d’accroche n’est pas nulle, car le <TITLE> apparaît dans les résultats des moteurs de recherche et, outre sa dimension révélatrice du sujet, doit donner envie d’être cliqué.
Le titre <H1> apparaît dans le coeur même de la page, souvent mis en contexte par l’environnement graphique et fonctionnel du site web. Il peut, davantage que le <TITLE> se permettre de jouer sur des effets d’accroche, au risque d’être un rien moins transparent et explicite.
Voici quelques exemples de variations entre le <TITLE> et le <H1> :
Source : booking.com
Dans cet exemple, le <TITLE> reprend le <H1> en l’étoffant fortement. Il commence par citer la marque (Booking.com), ce qui n’est pas forcément la meilleur stratégie si l’on veut donner du poids aux mots clés propres à l’hôtel, par exemple. Les tout premiers mots de la balise <TITLE> pèsent davantage sur le référencement. Notez l’affichage dynamique, dans cette balise <TITLE>, du nombre de commentaires clients. Ce qui peut inciter, c’est vrai, à explorer le site. Au final, ce <TITLE> me paraît un peu trop long et brisé dans sa syntaxe.
Source : La Libre
Dans cet exemple, le quotidien La Libre se contente de reprendre le <H1> en <TITLE>, en ajoutant, en tête de balise, la signature du journal. Du point de vue du référencement, nous l’avons déjà dit, mieux vaut placer les mots clés “contenu” en tête d’expression. Avec un bémol cependant : les médias qui bénéficient d’une crédibilité particulière peuvent se distinguer, au sein des résultats d’une recherche, par leur marque de fabrique.
Source : IBGE
Dans cet exemple, l’Institut Bruxellois pour la Gestion de l’Environnement place dans l’ordre, au sein de la balise <TITLE> : la reprise du titre <H1> de la page + la rubrique dans laquelle il se trouve + la signature de l’organisation. Mentionner la rubrique “S’informer”, en termes de mots clés et de mise en contexte, n’apporte pas grand chose (strictement rien, en fait). Elle rallonge inutilement le <TITLE> et dilue le poids des véritables mots clés, comme “changement climatique” dans le cas présent. Je préconise de ne reprendre que le titre de l’article et la signature.
Cette question fait débat, ci et là, sur Internet, mais je n’y ai pas trouvé de réponse très tranchée ni structurée :
- Le malaise de l’optimisation des mots clés dans TITLE + URL + H1
- Why should your title and H1 tag be different?
- Would the effect of having the title tag and the H1 tag being the same be good for relevence or bad as it would look spammy?
Et à votre niveau ?
- Quelle est la stratégie de votre entreprise en matière de <TITLE> et <H1> ?
- Avez-vous fait le choix de l’automatisation ?
- Le regrettez-vous ?
Commentaires des lecteurs
Comment by jmh — 6 September 2011
Bonjour Eve, et merci pour ton commentaire.
Oui, je pense que s’il ne fallait exprimer qu’un message aux entreprises, ce serait de décadenasser leur CMS pour avoir au moins la possibilité de passer en mode manuel et se donner la possibilité, lorsque nécessaire, de jouer avec toute la finesse des variations de mots clés.
Les 60 caractères sont liés, je pense, à la quantité affichée dans les résultats de Google. C’est vrai qu’il est intelligent d’en tenir compte. Maintenant, je ne pense pas que si le TITLE se prolonge jusqu’à 80 ou 100 caractères, ce soit pénalisant. Contredisez-moi si je me trompe.
Comment by Thomas Soudaz — 6 September 2011
hop, j’ai bookmarké cette page :
http://www.image-referencement.f...
sur le très bon site d’Aurélien 🙂
Comment by Eve — 6 September 2011
Excellent article Jean-Marc ! Pour ma part, je rédige toujours la balise title séparément de la balise h1. Cela donne plus de souplesse pour la valorisation des mots-clés.
Maintenant, si on a 30 000 références, ça peut effectivement devenir un peu compliqué… Dans ce cas, une solution automatique bien pensée, avec possibilité d’optimiser certaines balises de page clé peut s’avérer efficace également. Il faudra trancher selon ses besoins (et ses moyens).
J’ai vu que SEOmoz conseille de ne pas dépasser 60 caractères pour la balise title.
Comment by Thomas Soudaz — 6 September 2011
@eve : Disons qu’il faut en règle général utiliser les mots-clés des requêtes cibles dans les 65 premiers caractères (longueur du <title> affiché dans les SERPs de Google)
Utiliser plus de mots fait baisser le poids relatif des autres mots, mais dans le cas ou le champ sémantique de la page à positionner est large, on peut évidemment dépasser sans que ça soit "pénalisant" outre mesure.
Comment by jmh — 6 September 2011
Merci Jérôme. Je reconnais le bon défenseur des standards du Web que tu es 😉
Cet extrait rejoint fort ce que j’expliquais par rapport à la perte de contexte dans l’affichage du TITLE.
Comment by Eric — 6 September 2011
Le <TITLE> n’est pas seulement visible dans les résultats des moteurs de recherche, mais aussi dans les réseaux sociaux lorsqu’une page est partagée.
Sa fonction d’accroche est d’autant plus importante dès lors que de nombreux utilisateurs ne commentent pas le lien qu’ils partagent.
Comment by Jerome coupe — 6 September 2011
From the HTML5 spec:
The title element represents the document’s title or name. Authors should use titles that identify their documents even when they are used out of context, for example in a user’s history or bookmarks, or in search results. The document’s title is often different from its first heading, since the first heading does not have to stand alone when taken out of context.
Voilà qui répond à qq1 des questions posées et auxquelles il est en effet nécessaire de réfléchir. Sensibiliser développeurs comme utilisateurs me semble encore une fois au moins aussi important que de poser un queconque choix technique, CMS ou autre ;0)
Comment by jmh — 6 September 2011
@ Eric : Intéressante précision !
Comment by A louer — 6 September 2011
Bonsoir.
J’ai regardé avec attention l’article C’est utile mais il me reste une question… Pourquoi c’est si compliqué ?
Comment by Développeur web à lyon — 6 September 2011
Bonjour,
Pour ma part je préférerais mettre un titre court et accrocheur avec mes principaux mots clés.
En ce qui concerne le <h1> ça ne me dérange pas qu’il soit un peut plus long, étant souvent le titre de mes articles ou au moins présentant textuellement ce qui le suivra.
Comment by sam — 6 September 2011
il peut avoir et cela fait débat aussi plusieurs H1 dans une page..
En ce qui concerne le title, si il est accrocheur c’est mieux…il se conjugue bien avec une méta description bien rédigée pour l’affichage des résultats dans les moteurs
les mots clés se mettent le plus tôt possible dans le title et comme dit Thomas ne mieux vaut pas trop diluer les mots clés dans un title trop long.
Comment by jmh — 7 September 2011
@ Sam :
Oui, c’est vrai qu’il y a aussi ce débat sur un ou plusieurs H1. Je n’ai pas voulu l’évoquer pour ne pas emmêler les débats, mais tu as raison. Si tu vas sur la page d’accueil de Ryanair, par exemple, tu verras un TITLE, assez bien pensé, mais aucun H1 alors qu’ils pourraient en placer plusieurs, sans doute, dans ce contexte de page d’accueil. Google s’est-il positionné par rapport à ce débat ?
(Off: A part ça tu vas bien ?)
Comment by Marie-Eve — 7 September 2011
Plein de choses intéressantes dans cet article et dans les discussions qui suivent. 🙂
Je dirais que tout dépend de l’enjeu SEO de la page… S’il faut choisir, il vaut mieux accrocher dans le H1 et optimiser dans le title. Mais tout se discute, l’essentiel c’est de faire le bon choix dans un contexte précis.
Automatiser, c’est pas mal, à condition de pouvoir intervenir manuellement en effet, mais c’est plus intéressant de pouvoir réfléchir aux deux contenus de façon séparée (diversifier le champ sémantique, etc.). D’autant que dans le title, il vaut mieux aller à l’essentiel et supprimer les mots qui n’ont pas d’utilité SEO. Pas dans un H1…
Comment by TheKude — 7 September 2011
@eric
En fait ça dépend d’une chose assez importante : l’OpenGraph. Si l’objectif est de partager de nombreuses pages sur FB, les balises <meta property="og:XXXXX"> vient remplacer les véritables méta de la page (title, desc…).
L’utilisation de ces balise peut donc ôter un poids au Title de la page et permettre de vraiment l’optimiser selon les conseils de l’article (qui est très intéressant en passant !).
Comment by Franck — 7 September 2011
Je partage l’avis de Marie-Eve, tout est une question de contexte et de choix pour chaque page ou pour chaque catégorie de page. La dilution des mots-clés dans le title est bien réel en tout cas.
Comment by Regine Lambrecht — 8 September 2011
Le texte des onglets de fenêtres de navigateur reprend aussi le titre. une autre raison de commencer par la mention la plus précise, pour permettre de distinguer 2 fenêtres du même site.
Comment by jmh — 8 September 2011
@ Régine : Oui, c’est vrai, et aussi l’historique, et les favoris,… Le TITLE a beaucoup de conséquences 😉
Comment by Aurélie — 8 September 2011
Merci Jean-Marc pour cette dissection comme toujours fort bien documentée.
Voici mon retour d’expérience.
Etant issue des 2 écoles (éditoriale centrée lecteur / référencement focalisé moteurs et statistiques), j’ai pris l’habitude de distinguer les contenus OFF et ON site :
=> Contenus OFF site = balises <Méta Title> et <Meta Description> + attribut <Alt> et < a title> de liens
=> Contenus ON site = balises sémantiques <Hn>, paragraphes <p> et libellés de liens
Comme Eve, je rédige donc les TITLE et DESCRIPTION à part.
L’essentiel étant selon moi de rester cohérent, j’établie une charte de nommage SEO en gardant à l’esprit que les META doivent être :
– uniques
– concises (60-70 caractères)
– riches en mots-clés
– intélligibles pour inciter au clic
Généralement, la règle de construction du TITLE se résume donc à :
– Pour un article informatif
Reprise du H1 (débarrassé des petits stop words) | Nom du site
– Pour une fiche-produit e-commerce
Nom du produit – Rubrique | Nom du site
Je n’en suis pas sûre, mais il semble que cette méthode favorise l’affichage des méga sitelinks Google. Enfin à condition que le nom du site et le nom de domaine se ressemblent… Quelqu’un peut confirmer ?
Autre point sur lequel je m’interroge : est-ce que les lecteurs vocaux comme Jaws énoncent les Méta Title ? Le fait que Title et H1 soient identiques entrave-t-il la navigation d’un internaute non-voyant ?
Avis aux experts en accessibilité web : vos éclairages sont les bienvenus !
Comment by jmh — 8 September 2011
@ Aurélie : Merci pour tes réflexions. J’aime le fait que tu cites l’exemple des fiches produits e-commerce comme un cas de figure où le nom de rubrique peut s’avérer utile (comme le disaient Marie-Eve et Franck, plus haut, tout dépend bien entendu du contexte). Comme toi, je suis curieux d’avoir le point de vue des puristes de l’accessibilité. Monique, tu es dans la salle ? 😉
Comment by Jef — 9 September 2011
Je ne suis pas vraiment d’accord avec toi. Pour moi un <h1> et un <title> identiques sont un signal fort pour Google d’une suroptimisation. Même si cela peut paraître cohérent pour le lecteur, ça l’est bien moins pour un moteur de recherche…
Comment by Daniel — 12 September 2011
A mon avis, Google s’en tape, à moins que tout le site soit suroptimisé sur un mot clé donné. Car sinon, beaucoup de sites ou de pages seraient d’ores et déjà dévaluées dans le moteur de recherche.
Comment by Anne Pascher — 8 April 2013
Il y a autant de recettes que de cuisiniers… Et puis maintenant, Google ré-écrit les titles si cela ne lui convient pas. De quoi y voir plus clair…
Comment by Patrice Decoeur - Targuzo — 22 September 2011
De mon côté, je reprend une synthèse de <title> dans mon <h1>. Le title peut être plus long alors qu’avec le H1, j’essaie de donner un aperçu du contenu de la page, et d’inciter à la lire.
Je reprends toujours le mot clé principal dans le title et le h1, de façon exacte ou sous forme de synonyme, selon la concurrence existante, notamment.