Entêtes H1 - H6
Pour s’assurer que vos lecteurs n'aient pas de problèmes à lire votre contenu, il vous faut le structurer. C'est d' autant plus vrai pour les pages très longues qui ne doivent pas être écrites d'un seul bloc. Structurez votre contenu avec des paragraphes afin de le diviser en partie facilement lisibles séparez le aussi avec des entêtes HTML. Idéalement l'entête principal devrait être un H1 (il s'agit de l’élément <h1> dans votre HTML) et les entêtes suivant des H2. Si vous avez besoin d'encore plus structurer votre page vous pouvez aussi utiliser des H3, mais n'allez pas plus loin que des H3.
Cette structuration est importante pour la bonne lisibilité de vos lecteurs mais elle aide aussi Google à trouver la structure et la hiérarchie dans vos pages. Le plus important est de s'assurer qu'il y a une structure logique de vos entêtes. Idéalement votre page commence avec un H1mais commencer par un H2 ne tuera pas votre référencement/SEO. L’entête suivante doit être un H2 ou un H3, suivant le cas, la hiérarchisation est similaire à celle que vous feriez normalement lorsque vous créé un document Word.
Pourquoi il peut parfois être difficile de commencer avec un H1 dans Joomla ?
Dans un monde idéal, commencez tous vos entêtes avec un <h1> sur chaque page. Juste un et jamais plus d'un. En général vous souhaitez que le titre de votre article Joomla soit le <h1> de la page. Le problème de Joomla est qu’avec le paramétrage standard, le titre des articles est généralement un <h2> :
Même si on laisse le premier entête en H2 ce n'est pas réellement un problème, mais si vous souhaitez que les choses soient parfaites, il est mieux d'utiliser un H1. Pour ce faire, vous pouvez utiliser l'une des solutions suivante :
Option 1 : Paramétrer Joomla
Vous pouvez parvenir à insérer le <h1> en modifiant les paramétrages de Joomla :
- Depuis le gestionnaire d' articles, rendez-vous dans Paramètres puis pour Titre de l'article sélectionner Masquer. Ainsi le titre de l'article ne sera pas montré sur la page.
- Vous devez donc commencez chacun de vos articles avec un <h1>. Et donc saisir le même titre dans le champ Titre de l'article et dans la fenêtre de l'éditeur du contenu de votre article, pour de petits sites cette solution est facilement applicable.
Vous pouvez aussi essayer d'autres combinaisons en utilisant les paramètres du gestionnaire de menu, beaucoup de chemin mènent à Rome ;)
Option 2 : Extensions
Il y a plusieurs extensions qui peuvent être utilisées pour paramétrer correctement les titre des pages et transformer ces titres <h2> en <h1>. Un exemple est SH404SEF, il peut automatiquement corriger l'entête de vos pages. Mais personnellement, je préfère garder le contrôle, aussi je n'utilise pas ces extensions.
Option 3 : Surcharge du template
En général les surcharges de template sont pour les utilisateurs avancés, mais il s'agit probablement de la surcharge de template la plus simple qui existe (ce qui dépend votre fournisseur de template). Avec Joomla 3, la création de surcharge de template est devenu extrêmement facile :
Rendez-vous dans Extensions > Templates > Templates cliquez sur votre template puis sur l'onglet Créer des substitutions cliquez sur com_content (des sous dossiers apparaissent) puis cliquez sur article.
Ensuite cliquez sur l'onglet Éditeur puis rendez-vous dans html > com_content > article puis cliquez sur defaut.php
Une fenêtre d'édition de code s'ouvre. Recherchez cette partie de code aux alentours de la ligne 30 :
<div class="page-header">
<h2>
<?php echo $this->escape($this->params->get('page_heading')); ?>
</h2>
</div>
Vous noterez la présence de la balise <h2>. Si vous remplacez cette balise d'ouverture et de fermeture par un <h1> les titres de vos articles seront visualisés correctement.
Notez que vous pouvez faire de même avec Joomla 2.5 (et aussi Joomla 3) en copiant le fichier defaut.php situé dans /components/com_content/views/article/tmpl/ dans /templates/votre_template/html/com_content/article/ (si besoin créez le répertoire html et com_content dans celui de votre template) puis appliquer le changement de h2 en h1 ci-dessus.
Notez que cette solution peut ne pas fonctionner avec tous les templates, en effet certains templates ont leur propres surcharges, qui peuvent entrer en conflit avec cette solution.
Plus de structure
Après vous être assuré que vous avez un H1 sur chacune de vos pages, et ajouté des H2 si nécessaire, assurez vous de continuer à bien structurer votre texte. En générale je ne vais pas plus loin que des H3. Pour les titres des modules j'utilise souvent H3. Utilisez les balises <p> pour le corps de votre texte.
Dans votre texte pour donner plus d’importances sur certains mots utilisez la balise <strong>. Google reconnaît cette balise, généralement votre CSS fera apparaître ces mots en gras pour le signaler leurs importances aux internautes . L'italique peut aussi être utilisé à des fins spécifiques. Mais utilisez le de façon sporadique, là ou il est réellement approprié. Ne l'utilisez pas uniquement pour améliorer votre référencement ...
Cet article est une traduction libre du tutoriel de Simon Kloostra : H1 - H6 headings