Titre h1 de la home dupliqué sur toutes les pages d’un CMS

A plusieurs reprises, j’ai été confronté à un problème avec la balise <h1> en homepage des sites de mes clients. Le nom du site ou de la marque est présent dans la balise <h1> de l’ensemble des templates du site. Les pages profondes, les pages catégories, articles se retrouvent donc avec 2 balises <h1>.
Bien que cela ne pose pas de problème en HTML 5, on pourrait se dire que « comme plusieurs occurences du meme lien dans une page », Google prendrait en compte avec plus de poids le permier <h1> rencontré.

Les devs..

Combien de fois j’ai entendu après des recommandations de ce type:

ah non, ça va être compliqué d’effectuer cette modification, cela demande du « dev »

ou encore une autre fois:

on va devoir toucher le core du CMS pour faire cette modification, c’est risqué…

>Mais biensûr … Attention, je ne mets pas tous les devs dans le même panier, juste les dev planplan qui ont un poteau télégraphique dans la main 😀

En tant que développeur du dimanche et surtout ancien Webmaster, je ne suis pas dupe… J’accompagne d’ailleurs dans la mesure du possible de façon pragmatique mes clients en leur donnant les tips nécessaires, pour montrer qu’une modification visant à avoir un titre différent entre la page d’accueil et les autres pages du site n’est à priori pas sorcier, pour une grande partie des CMS (je ne parle pas de Jahia of course!).

Alors désolé de vous décevoir pour ceux qui pensaient vraiment que c’était compliqué, comme ce qu’aurait pu annoncer une agence peu scrupuleuse, facturant le moindre copier/coller.
Voici donc quelques bouts de code pour les CMS les plus courants, qui permettent d’effectuer cette modification en moins de 5 minutes!

WordPress et <h1>

Voilà les lignes à modifier dans votre thème WordPress wp-content/themes/votre-theme/header.php:

<?php if(is_home() && is_front_page() || is_front_page()) {?>
<h1 id="site-title"><?php bloginfo('name');?></h1>
<?php } else { ?>
<div id="title"><?php bloginfo('name');?></div>
<?php } ?>

Drupal et <h1>

Voilà les lignes à modifier dans votre thème Drupal themes/votre-theme/templates/page.tpl.php (ou ailleurs, Drupal est plus complexe):

<?php if ($is_front): ?>
<h1 id="site-title"><?php print $site_name; ?></h1>
<?php else: ?>
<div id="title"><?php print $title; ?></div>
<?php endif; ?>

Magento et <h1>

Voilà les lignes à modifier dans votre thème Magento /app/design/frontend/base/default/votre-theme/page/html/header.phtml :

<?php if ($this->getIsHomePage()):?>
<h1 id="site-title"><?php echo Mage::app()->getStore()->getName() ?></h1>
<?php else:?>
<div class="title"><?php echo Mage::app()->getStore()->getName() ?></div>
<?php endif?>

Merci à Nicolas Trossat de l’agence Magento BoutikCircus 😉

Prestashop et <h1>

Enfin voici les lignes à modifier dans votre thème Prestashop /prestashop/themes/votre_theme/header.tpl (moteur Smarty):

{if $page_name=='index'}<h1 id="site-title">{$shop_name|escape:'htmlall':'UTF-8}</h1>{/if}

et les autres?

Et bien vos développeurs préférés se feront un plaisir de vous trouver une modification RAPIDE 😉