Follow us on Twitter
Astuces Référencement Attribuer le tag H1 aux titres de vos articles Joomla


Attribuer le tag H1 aux titres de vos articles Joomla

Par défaut les titres des articles Joomla ne sont pas des titres de type <h1> ce qui peut prétériter le référencement de votre site. En effet, si vous regardez dans la source de votre page via un clique droit puis Afficher la source (le libellé peut être différent en fonction de votre navigateur) et recherchez le titre d’un article, vous devriez trouver quelque chose comme :

<div class="componentheading">Titre de votre article</div>


ou

<td width="100%" class="contentheading">Titre de votre article</td>

Dans les bases du référencement un des principes consiste à utiliser les balises <h1>, <h2>, <h3>… pour votre titres car Google y attache une grande importance. Pour optimiser le référencement votre site au niveau des titres de vos articles vous devriez retrouver dans le code source quelque chose comme :

<h1>Titre de votre article</h1>


Dans ce tutoriel, nous allons voir comment procéder pour retrouver tous les titres de vos articles entourés par des balises <h1>.

La première solution consiste à modifier les fichiers concernés directement dans le code source de Joomla. Le problème c’est que cela s’appelle du hacking et que vous pouvez potentiellement écraser tout votre travail par exemple lors d'une mise à jour de Joomla.

Nous allons donc utiliser la solution Template override qui consiste à modifier l’apparence du contenu de votre site Joomla sans modifier les fichiers sources.

Veuillez tout d’abord créer ces répertoires dans le répertoire de votre template :

Nom_de_votre_template/html/com_content/article
Nom_de_votre_template/html/com_content/category
Nom_de_votre_template/html/com_content/frontpage
Nom_de_votre_template/html/com_content/section


Veuillez ensuite copier les fichiers ci-dessous dans leur répertoire respectif que vous venez de créer :

component/com_content/views/article/tmpl/default.php
dans le repertoire: Nom_de_votre_template/html/com_content/article

component/com_content/views/category/tmpl/blog_item.php
dans le repertoire: Nom_de_votre_template/html/com_content/category

component/com_content/views/frontpage/tmpl/default_item.php
dans le repertoire: Nom_de_votre_template/html/com_content/frontpage

component/com_content/views/section/tmpl/blog_item.php
dans le repertoire: Nom_de_votre_template/html/com_content/section

Ensuite, veuillez éditer chacun de ces fichiers et rechercher la ligne qui commence par :

<td class="contentheading


Une fois cette ligne trouvée, il ne vous restera plus qu’à ajouter la balise <h1> en dessous sans oublier de refermer cette balise avant </td> ce qui donne par exemple pour le fichier Nom_de_votre_template/html/com_content/article/default.php:

<td class="contentheading" width="100%">
<h1>
<?php if ($this->params->get('link_titles') && $this->article->readmore_link != '') : ?>
<a href="" class="contentpagetitle">
<?php echo $this->escape($this->article->title); ?></a>
<?php else : ?>
<?php echo $this->escape($this->article->title); ?>
<?php endif; ?>
</h1>
</td>


Une fois les 4 fichiers sauvegardés, votre site sera optimisé pour le référencement au niveau des titres de vos articles.


8 Commentaire

  1. Bonjour,
    quand je fais la modif, le titre devient gros. Il n'a plus la police d'avant.

    Mathieu
  2. En effet, il se peut qu'en effectuant cette manipulation vous vous retrouviez avec une mise en page différentes des titres que vous aviez auparavant.

    Cela est propre à chaque template Joomla. Pour retrouver la taille ainsi que la mise en page des titres avec comme class componentheading ou contentheading vous devez éditer le fichier CSS contenant les paramètres de la balise H1 et définir les mêmes que pour les class componentheading ou contentheading .

    Pour vous aider, je vous conseille d'utiliser le module complémentaire FireBug afin de déterminer le fichier CSS concerné et les paramètres à changer.
  3. Aïe, bon j'utilise pas firefox. Après j'ai regarde dans le fichier css de mon template.
    j'ai ceci:

    Mais je suis un peu perdu....

    Mathieu
  4. ok mais ça fonctionne pas sur le tire du composant contact (le titre est plus petit que les autres)
  5. Lorsque ce n'est pas le titre du menu, de l'article ou du composant Joomla qui s'affiche, c'est la classe componentheading qui est utilisé pour le format d'affichage du titre.

    La classe du titre peut-être affichée directement dans le code source de la page.

    Pour avoir les titres avec comme classe CSS componentheading identiques aux titres avec comme classe contentheading, vous devez avoir les mêmes attributs dans le fichier CSS de votre template. Il vous faut donc remplacer les attributs de la classe componentheading par ceux de la classe contentheading
  6. C'est simple, bien expliqué et cela fonctionne au premier essai!
  7. Bonjour,
    merci pour cette astuce.
    J'ai cependant toujours un problème au niveau du design. J'ai bien modifié les classes CSS contentheading et componentheading comme expliqué au dessus, mais j'ai perdu la "marge" qui entoure les titres normalement.
    en exemple la photo : [img][/img]
    j'ai essayé de trouver la solution avec firebug mais je n'y suis pas arrivé.
    merci d'avance pour votre aide.
  8. Bonjour, qu'en est-il si on n'a pas td mais div?

Ajouter un commentaire


    • >:o
    • :-[
    • :'(
    • :-(
    • :-D
    • :-*
    • :-)
    • :P
    • :\
    • 8-)
    • ;-)

     

    Dernières astuces

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    Formulaire identification