Ajouter un H1 personnalisé aux pages catégories PrestaShop

Pourquoi personnaliser le H1 des pages catégories ?

Par défaut, PrestaShop utilise le nom de la catégorie comme balise H1 sur les pages de listing produits. C'est un problème SEO majeur : le nom de catégorie doit rester court et parlant pour la navigation (menus, breadcrumb, URL), alors que le H1 devrait être optimisé pour le référencement avec des mots-clés stratégiques.

Exemple concret :

• **Nom catégorie** (navigation) : "Chaussures homme"
• **H1 optimisé** (SEO) : "Chaussures pour homme : baskets, mocassins et chaussures de ville"

Cette dissociation entre le nom affiché en navigation et le H1 de la page est une technique SEO fondamentale que tout marchand PrestaShop devrait mettre en place.

Étape 1 : Ajouter le champ en base de données

Le champ H1 personnalisé doit être multilingue, car il est lié à une langue. Il se place donc dans la table ps_category_lang.

Connectez-vous à phpMyAdmin (ou utilisez un client SQL) et exécutez :

ALTER TABLE ps_category_lang 
ADD COLUMN h1_cat VARCHAR(255) DEFAULT NULL 
AFTER meta_description;

Remarque : On utilise VARCHAR(255) plutôt que TEXT car un H1 ne devrait jamais dépasser 70-80 caractères pour le SEO. Le type VARCHAR(255) offre une marge confortable tout en restant performant pour les requêtes.

Vérification

SELECT COLUMN_NAME, DATA_TYPE, CHARACTER_MAXIMUM_LENGTH 
FROM INFORMATION_SCHEMA.COLUMNS 
WHERE TABLE_NAME = 'ps_category_lang' 
AND COLUMN_NAME = 'h1_cat';

Étape 2 : Créer l'override de la classe Category

Pour que PrestaShop reconnaisse ce nouveau champ, il faut étendre la définition de l'objet Category via un override.

PrestaShop 1.6 / 1.7

Créez le fichier override/classes/Category.php :

<?php
/**
 * Override Category - Ajout du champ H1 personnalisé pour le SEO
 */
class Category extends CategoryCore
{
    /** @var string H1 personnalisé pour les pages catégories */
    public $h1_cat;

    public function __construct($id_category = null, $id_lang = null, $id_shop = null)
    {
        // Injection du champ dans la définition ObjectModel
        self::$definition['fields']['h1_cat'] = [
            'type' => self::TYPE_STRING,
            'lang' => true,
            'validate' => 'isGenericName',
            'size' => 255,
        ];

        parent::__construct($id_category, $id_lang, $id_shop);
    }
}

PrestaShop 8.x

Sur PrestaShop 8.x, le système d'overrides fonctionne toujours, mais la méthode recommandée pour les projets pérennes est d'utiliser un module avec un hook. Cela dit, pour un simple ajout de champ, l'override reste la solution la plus pragmatique :

<?php

declare(strict_types=1);

class Category extends CategoryCore
{
    public $h1_cat;

    public function __construct($id_category = null, $id_lang = null, $id_shop = null)
    {
        self::$definition['fields']['h1_cat'] = [
            'type' => self::TYPE_STRING,
            'lang' => true,
            'validate' => 'isGenericName',
            'size' => 255,
        ];

        parent::__construct($id_category, $id_lang, $id_shop);
    }
}

Point critique : Après avoir créé l'override, vous devez vider le cache des classes. Supprimez le fichier var/cache/prod/class_index.php (PS 1.7/8.x) ou cache/class_index.php (PS 1.6). Sans cette étape, PrestaShop ne détectera pas votre override.

# PrestaShop 1.7 / 8.x
rm var/cache/prod/class_index.php
rm var/cache/dev/class_index.php

# PrestaShop 1.6
rm cache/class_index.php

Étape 3 : Ajouter le champ dans le back-office

Pour éditer le H1 personnalisé depuis l'interface d'administration, il faut ajouter un champ dans le formulaire de catégorie.

Solution par override du template (PS 1.6)

Modifiez le template admin/themes/default/template/controllers/categories/helpers/form/form.tpl en y ajoutant un champ texte après le champ "Nom" :

<div class="form-group">
    <label class="control-label col-lg-3">{l s='H1 personnalisé (SEO)'}</label>
    <div class="col-lg-5">
        {foreach $languages as $language}
        <div class="translatable-field lang-{$language.id_lang}"
             {if $language.id_lang != $defaultFormLanguage}style="display:none"{/if}>
            <input type="text" 
                   name="h1_cat_{$language.id_lang}" 
                   value="{$category->h1_cat[$language.id_lang]|escape:'html':'UTF-8'}"
                   class="form-control" 
                   maxlength="255"
                   placeholder="Laissez vide pour utiliser le nom de catégorie" />
        </div>
        {/foreach}
    </div>
</div>

Solution par module (PS 1.7 / 8.x recommandé)

Sur PrestaShop 1.7 et 8.x, le formulaire de catégorie utilise le composant Symfony Form. La méthode propre consiste à utiliser les hooks actionCategoryFormBuilderModifier et actionAfterUpdateCategoryFormHandler dans un module dédié. C'est plus robuste et survit aux mises à jour.

Étape 4 : Afficher le H1 dans le template front

Modifiez le template de la page catégorie pour afficher le H1 personnalisé.

PrestaShop 1.6 (Smarty)

Dans themes/votre-theme/category.tpl :

<h1>
    {if isset($category->h1_cat) && $category->h1_cat}
        {$category->h1_cat|escape:'html':'UTF-8'}
    {else}
        {$category->name|escape:'html':'UTF-8'}
    {/if}
</h1>

PrestaShop 1.7 / 8.x (Smarty)

Dans themes/votre-theme/templates/catalog/listing/category.tpl :

<h1 class="h1">
    {if isset($category.h1_cat) && $category.h1_cat}
        {$category.h1_cat|escape:'htmlall':'UTF-8'}
    {else}
        {$listing.label}
    {/if}
</h1>

Fallback intelligent : Le code vérifie toujours si le champ est rempli. Si le H1 personnalisé est vide, le nom de catégorie classique s'affiche. Cela permet une migration progressive sans casser les pages existantes.

Étape 5 : Import CSV en masse

Pour un catalogue avec des centaines de catégories, remplir les H1 un par un serait fastidieux. Voici comment ajouter le champ à l'importeur CSV natif.

Créez override/controllers/admin/AdminImportController.php :

<?php

class AdminImportController extends AdminImportControllerCore
{
    public function __construct()
    {
        parent::__construct();

        // Ajout du champ H1 dans les colonnes d'import catégorie
        $this->available_fields['h1_cat'] = [
            'label' => $this->l('H1 personnalisé (SEO)'),
        ];
    }
}

Votre fichier CSV devra contenir une colonne h1_cat :

id;name;h1_cat;active
2;Chaussures homme;Chaussures pour homme : baskets, mocassins et chaussures de ville;1
3;Chaussures femme;Chaussures femme : escarpins, sandales et sneakers tendance;1

N'oubliez pas de supprimer à nouveau le fichier class_index.php après avoir créé cet override.

Bonnes pratiques SEO pour vos H1 de catégories

Règles de rédaction

CritèreRecommandation Longueur30 à 70 caractères Mots-clésPlacer le mot-clé principal en début de phrase UnicitéChaque catégorie doit avoir un H1 unique CohérenceLe H1 doit correspondre à l'intention de recherche de la page LisibilitéPhrase naturelle, pas une liste de mots-clés

Erreurs fréquentes à éviter

1. **Dupliquer le title et le H1** — Ils doivent être complémentaires, pas identiques
2. **Bourrage de mots-clés** — Google pénalise les H1 sur-optimisés
3. **Oublier les catégories enfants** — Chaque niveau de profondeur mérite son H1 optimisé
4. **Négliger le multilingue** — Chaque langue doit avoir son propre H1 traduit et optimisé

Vérification et validation

Après mise en place, vérifiez que tout fonctionne :

# Vérifier en base que le champ est bien rempli
SELECT cl.id_category, cl.id_lang, cl.name, cl.h1_cat 
FROM ps_category_lang cl 
WHERE cl.h1_cat IS NOT NULL 
AND cl.h1_cat != '' 
ORDER BY cl.id_category;

Côté front, inspectez le code source de vos pages catégories (Ctrl+U) et vérifiez qu'il n'y a qu'un seul H1 par page. Plusieurs balises H1 diluent le signal SEO.

Utilisez un outil comme Screaming Frog ou Ahrefs pour crawler l'ensemble de vos catégories et valider l'unicité et la pertinence de chaque H1.