5

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

h1A 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 😀

mouflesEn 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 😉

5 commentaires

  1. Attention au code pour WordPress, il est partiellement faux : Il faudrait tester ainsi :

    if ( is_home() && is_front_page() || is_front_page() ) {
    // le reste du code

    Sans cela, il y aura toujours le H1 sur la page de blog quand celle-ci a été renseignée dans les paramètres de WordPress

  2. LOL, il nous est arrivé la même chose sauf que l’agence demandait 400 € ht pour la modif !

    Finalement le client a compris qu’il y avait des abus de la part de l’agence et il nous a demandé d’intervenir puis de gérer son site ainsi qu’une refonte ^^

    Et oui à prendre les clients pour des imbéciles ont fini pas les perdre… !

  3. J’ai travaillé pendant 10 ans en agence web et tu as raison …
    J’ai d’abord été développeur justement dans un 1er temps avant de passer le cap de la gérance d’une agence.
    L’un des gros points faibles de certains dévs, c’est qu’ils ne savent pas faire un chiffrage correct en terme de temps passé. Ils multiplient souvent les temps par 2 ou 3 …

    L’un des autres points faibles, c’est qu’ils n’acceptent pas qu’on leur dise … Surtout quand toi, tu ne fais plus trop de dév. Le nombre de fois où j’ai eu le droit à des « ouais mais c’est parce que toi tu codes comme un porc ! » … Ok …

    Les cas que tu cites ne sont pas discutables.

    En outre, pour prendre la défense des dévs, j’ai aussi eu à faire face à des consultants débarquant de je ne sais où avec des tas de préconisations qui impactaient réellement le fonctionnement du site, en nous prenant pour de la m… et en nous disant qu’il fallait juste changer quelques lignes de code.

    Dans ce cas, il y a de quoi être gavé.

    C’est comme pour tout, tout est affaire de communication …

Laisser un commentaire

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