Code pour afficher une balise H1 dynamiquement en fonction de la page

Code pour afficher une balise H1 dynamiquement en fonction de la page

Le faux-débat sur le nombre de balise H1, son intérêt et sa valeur sémantique a été maintes fois abordée sur Internet. J’aimerais aborder aujourd’hui le côté technique: quel code employez-vous pour afficher dynamiquement une balise H1 sur la page d’accueil ?

Si vous en êtes encore au stade de vous demander comment utiliser correctement cette balise et son impact sur le référencement de votre site web, un petit tour sur cet article devrait vous apprendre les bases.

Mon choix pour « Les Doigts dans le Net »

Personnellement, j’ai déjà fait mon choix : une balise dans le header sur le nom du site _pas sur le logo_ pour la page d’accueil, et une balise sur le titre principal de la page (le titre de l’article) pour le restant du site.

Comment afficher une balise h1 dynamiquement?

Sur WordPress

Les utilisateurs de WordPress bénéficient de fonctions spéciales. Pour comprendre ces fonctions, il faut comprendre que les pages ne sont pas toutes les mêmes. Elles possèdent un « type » particulier en fonction de leur rôle.

  • is_home() est une fonction qui permet de vérifier si la page en cours est la page d’accueil du blog (une liste d’articles par ordre chronologique inversé).
  • is_front_page() est une fonction qui permet de vérifier si la page en cours est la page d’accueil du site.

Voici le code pour afficher le titre du site dans une balise H1, uniquement sur la page d’accueil.

<?php if (is_home()){ ?>
	<!-- Page accueil du blog -->
	<h1><?php bloginfo('name'); ?></h1>
<?php } ?>
Après avoir fait ces changements, n’oubliez pas de vérifier que vous utilisez bien des balises h1 pour les titres de vos articles (sur single.php).
<?php if (is_front_page()){ ?>
	<!-- Page accueil du site-->
	<h1><?php bloginfo('name'); ?></h1>
<?php } ?>

EDIT: Ne mettez jamais un élément H1 en « display:none », cela n’apportera rien à votre référencement et risque de vous faire passer pour un tricheur aux yeux de Google.

<!-- NE JAMAIS FAIRE!! -->
<h1 style="display:none;"><?php bloginfo('name'); ?></h1>

Ces fonctions sont bien pratiques mais ne fonctionneront que si votre thème respecte la hiérarchie des templates de WordPress. or, certains développeurs/designers ne s’embêtent pas avec cette notion. Ils utilisent pour la page d’accueil, une page classique, configurée pour qu’elle apparaisse « en tant que » première page du site ou du blog.

En surface, cette « bidouille » n’est pas gênante puisque la manœuvre est invisible pour le visiteur. Mais quand on veut aller plus loin, on doit abandonner les facilités de WordPress et revenir à de la programmation plus « générique ».

La solution PHP générique pour tous les webmasters

Le technique utilisée ici va être de vérifier si l’url de la page courante est (ou n’est pas) d’une certaine valeur. Cette astuce est reproductible pour n’importe quelle page dont vous connaissez l’url.

Nous allons tester la valeur de « REQUEST_URI » qui correspond à tout ce qui se trouve après le nom de domaine. Par exemple, l’URL de cet article est « /afficher-balise-h1-dynamiquement/ ». (Notez que l’URL est encadré par deux slashs)

Pour la page d’accueil, on testera si l’URL est égal à « / ».

<?php if ($_SERVER["REQUEST_URI"] == '/'){ ?>
	<!-- Page d'accueil -->
	<h1><?php bloginfo('name'); ?></h1>
<?php } ?>

A vous d’adapter le code pour qu’il corresponde à vos besoins!

Que pensez-vous de cette façon de faire? Comment faites-vous? Vous posez-vous la question du nombre de balise h1 dans une page web?

afficher une balise h1 dynamiquement, comment afficher une balise h1

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

21 commentaires

  1. En fait je ne vois pas trop l’intérêt de la solution PHP « générique » … vu que le code est propre à une page en particulier vu qu’on en vérifie l’URL, pour ne pas se contenter de mettre le plutot que tout ce code ?

    A la rigueur avec un SELECT CASE on pourrait en enchainer plusieurs et faire un include mais bon je trouve ça bien lourd comme solution.

    Répondre
    • Bonjour Xavier,
      je parle d’un site dynamique bien sûr. Imagine que l’on utlilise le même include de header.php dans toutes les pages de ton site. Il faut bien trouver le moyen de savoir, au sein de cet include, sur quelle page on est en front. A part en checkant $_SERVER[« REQUEST_URI »], je ne vois pas comment faire.

      Je suis pas sûre de comprendre ta solution avec le select…case. Tu veux faire un truc comme ça:
      select ($_SERVER[« REQUEST_URI »])
      case ‘/’:
      // ecire le h1
      else:
      // ne pas écrire le h1

      Je ne vois pas trop l’intérêt… N’hésite pas à ré-expliquer!

      Bien à toi

      Répondre
      • Ok pour ces précisions. Je ne comprenais pas l’intérêt car effectivement sur mes site en général sur ma page index je ne met pas le title / description dans le contenu du include, cette page étant la plupart du temps différente des autres. Aussi bien dans son contenu que sa mise en page.

        Je pense que j’ai aussi été « trompé » par le fait que dans ton exemple tu as mis un « if » mais pas le « else » expliquant comment gérer les autres cas. Enfin bon au final on est d’accord sur la façon de faire :)

  2. Bonjour Marie-Eve et merci pour ces précisions.
    Si j’ai bien compris, il faut attribuer un h1 au titre de l’article uniquement et non au titre de la page. Pas simple tous ces petits détails à mettre en place pour faire plaisir à tonton google !
    a+

    Répondre
    • Bonjour John,
      Dans l’article, j’explique comment mais pas trop pourquoi. Voilà plus de détails:

      En fait, le H1 doit être unique et doit indiquer le titre le plus important de ta page. A toi de choisir quel est le titre « le plus important ».

      Certains mettent le nom de leur site comme h1 sur TOUTES les pages et mettent les titres des articles et des autres pages à h2.

      D’autres mettent le nom de leur site comme h1 UNIQUEMENT pour la PAGE D’ACCUEIL (j’explique comment dans l’article) et sur les autres pages, ils mettent les titres des articles et des autres pages à h1.

      C’est vrai que ce n’est pas simple tout ça. J’espère que je ne t’ai pas embrouillé encore plus!

      Répondre
  3. Bonjour Marie-Ève,

    Il faut au moins retenir que H1 ne sert pas à faire n’importe quoi. De plus, de ne jamais laisser la balise H1 sur le logo de votre site.

    Afficher une ou plusieurs balises H1 par page? Une balise H1 est un titre du contenu et se doit d’être unique. 1 seul tag H1 par page. On peut avoir le titre de la page en H1 et une déclinaison des sous-titres H2, H3 etc… La balise H1 est très importante pour le référencement et Google aime les pages bien structurées.

    [commentaire modéré : paraphrase l’article]

    Réal

    Répondre
  4. Bonjour à toutes et tous,

    pour compléter ce que dit Réal, côté référencement, je ne suis pas sûr que Google aime le display:none; sur une balise aussi importante (trop louche).

    Un amis viens de me faire découvrir ce blog, qui est fort sympa, félicitation.

    Répondre
    • Bonjour XF,
      Je n’avais jamais réfléchis à l’impact de Google sur le display:none d’un h1. Ce que tu dis est probablement vrai, mais je me demande, quand on utilise un classe, Google comprend-il aussi le code CSS qu’il y a derrière ? Mystère et boule de gum…

      Merci pour le blog :)

      Répondre
  5. Bonjour,

    Il est à noté que si un petit malin s’amuse à rajouter des paramètre dans l’url et à les linker alors que vous utilisez la variable $_SERVER[« REQUEST_URI »] sans contrôle, ça peut faire un joli duplicate content…

    Répondre
    • Bonjour,
      C’est vrai que je ne parle jamais de contrôler les entrées, mais c’est en effet une habitude à prendre pour éviter tout type d’injection.

      Répondre
  6. Houlala, c’est pour les codeurs tout ça!

    Si je comprends bien, les balises qu’on trouve dans l’éditeur de texte ne servent à rien et il faut toucher au code!

    Ben personnellement, je vais éviter!

    Répondre
    • Bonjour Bruno,
      Si si, les balises ne l’éditeur sont utiles…mais si il existe déjà une balise H1 dans ton code source (sur le titre de la page), mieux vaut n’utiliser que les balises H2 (Titre 2), H3 (Titre 3) etc dans ton éditeur pour ne pas avoir de problème de référencement.

      Répondre
  7. boujour MarieEve

    En faite,je voulais juste te dire que je viens de creer mon glob sur wordpress et je ne sais pa trop comment perfeccioner mon blog.

    j’aimerais un petit coup de pouce de ta part; sur comment donner une bonne apparence a ma page,comment faire apparaitre les menus sur ma page..etc

    bye a bientot!!!

    Répondre
    • Bonjour,

      Bravo pour t’être lancé! Mais ça va être difficile de répondre à ta demande très large. Non, je ne peux pas te filer un coup de main pour tout comprendre en une fois. A toi de chercher par toi-même et si tu es bloquée sur un point, je pourrais t’aider. Tu trouveras plein d’info sur ce blog et sur d’autres dans la blogosphère.

      Par contre, je remarque que tu as choisi un blog en sous-domaine (c’est à dire hébergé sur wordpress.com), donc tu ne pourras pas faire grand-chose. Pour « avoir la main » sur ton code et pouvoir modifier l’apparence, le nombre de menu etc, il te faut avoir ton propre hébergement + nom de domaine.

      Bon courage avec tout ça!

      Répondre
  8. Bonjour MarieEve
    Mon site est réalisé à l’aide d’un template wordpress.
    Comment savoir si le titre que je donne à une page contient la balise H1 ??
    Dans l’éditeur de texte je mets généralement le sous titre en H3 H4 ou H5
    d’après tes conseils je devrais le mettre en H2 ou H1 s’il n’existe pas dans le code source d e la page, mais c’est là que j’arrive plus a suivre (débutant !)
    Voici par exemple une page galerie : http://www.hectorchristiaen.com/belgique/
    j’ai firebug installé. autant dire que je n’y comprends rien dans les lignes de code que je vois sur cette page Belgique
    en voici une petite partie
    merci pour ton aide
    cordialement

    Répondre
    • Bonjour Hector,

      Si tu as installé Firebug, tu y es presque! Tu dois simplement faire un clic droit avec ta souris sur le titre de ton article, puis sélectionner « inspecter avec firebug ». Tu auras alors le code correspondant qui va s’ouvrir dans la console Firebug. Regarde si c’est déjà un H1, ou si c’est un H2 et avise en fonction, pour les autres titres de ton article.

      Dis moi si tu ne trouves toujours pas!

      Répondre
  9. Bonjour,

    Je comprend bien l’intérêt de cette solution, ma question est : Comment peut on éditer le titre sur l’interface admin sachant que je me base sur un theme prepium ?
    Si vous voyez ce que je veux dire.
    Et mercei pour cet article très enrichissant !

    LM

    Répondre
    • Bonjour,

      Je suis pas sûre de comprendre…le titre se change toujours dans Réglage > Général même pour les thèmes prémium.

      Répondre
  10. Bonjour,
    je viens de me rendre compte que les pages category de mes wordpress n’ont ni H1 ni mots clés. Comment peut-on ajouter cela à ces pages qui sont dans l’ensemble plutôt bien référencées.
    merci pour votre aide
    au plaisir
    David Hervy

    Répondre
  11. Merci beaucoup pour ce code dont je viens de me servir.

    Il fonctionne parfaitement.

    A bientôt,

    Répondre

Trackbacks/Pingbacks

  1. Code pour afficher une balise H1 dynamiquement en fonction de la page | Les Doigts dans le Net « la bibliothèque, et veiller - [...] on lesdoigtsdanslenet.com Share [...]
  2. Code pour afficher une balise H1 dynamiquement en fonction de la page - Les Doigts dans le Net | Communication web professionnelle | Scoop.it - [...] Code à copier-coller pour afficher une balise H1 dans le header sur la page d'accueil seulement...  [...]
  3. Vous administrez vous-même votre site professionnel: vos difficultés techniques et comment les résoudre - Les Doigts dans le Net - [...] contre, si votre thème ne possède pas les bonnes balises HTML sur les bonnes pages, ces extensions perdront en…

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint