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.

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></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></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;"></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&#91;"REQUEST_URI"&#93; == '/'){ ?-->
<!-- Page d'accueil -->
<h1></h1>
<!--?php } ?-->

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

Vous aimerez aussi...

1 réponse

  1. Informatique-75 dit :

    Je ne veux pas que le titre du site soit en H1. J’ai bien trouvez le fichier, j’ai enlever le h1, mais je n’arrive pas à entrer un code css valable. class »sitetitle » qui est définie dans WordPress, ne change pas quoi que je mette.
    J’ai essayé sur le fichier où elle figure et dans l’editeur.
    Possiblité de mettre un logo, mais c’est pas terrible.
    Merci.

Laisser un commentaire

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