Personnaliser la balise H1 des fiches produits PrestaShop

Pourquoi personnaliser la balise H1 de vos produits PrestaShop

Par défaut, PrestaShop utilise le nom du produit comme balise H1 sur la fiche produit. C'est logique d'un point de vue fonctionnel, mais c'est souvent un frein côté SEO : le nom commercial d'un produit ne correspond pas toujours à la requête que tape un internaute sur Google.

Prenons un exemple concret. Votre produit s'appelle *"Modèle Élégance 2024"* dans votre catalogue. C'est le nom que vos clients connaissent. Mais la requête SEO à cibler serait plutôt *"Robe de soirée longue noire taille grande"*. Sans H1 personnalisé, vous êtes coincé.

L'objectif de ce guide est d'ajouter un champ H1 dédié, multilingue et importable par CSV à vos fiches produits PrestaShop, de la version 1.6 jusqu'à la 8.x.

Architecture de la solution

La modification repose sur trois piliers :

1. **Base de données** — ajout d'une colonne `h1_prod` dans `ps_product_lang`
2. **Modèle objet** — override de la classe `Product` pour déclarer le nouveau champ
3. **Back-office** — affichage du champ dans le formulaire d'édition produit
4. **Import CSV** — override de `AdminImportController` pour mapper le champ à l'import
5. **Template front** — affichage du H1 personnalisé à la place du nom produit

Étape 1 : Ajouter la colonne en base de données

Avant toute modification de code, il faut créer le champ dans la table ps_product_lang. C'est une table multilingue, donc chaque produit aura un H1 par langue.

ALTER TABLE `ps_product_lang`
ADD COLUMN `h1_prod` TEXT DEFAULT NULL
AFTER `description_short`;

Attention : remplacez le préfixe ps_ par celui de votre installation si vous l'avez modifié. Vérifiez-le dans config/settings.inc.php (1.6) ou dans le fichier .env / parameters.php (1.7+/8.x).

Ce champ est volontairement de type TEXT et non VARCHAR pour laisser de la marge, même si en pratique un H1 ne devrait jamais dépasser 70 caractères.

Étape 2 : Override de la classe Product

Le modèle objet de PrestaShop doit connaître ce nouveau champ pour le lire et l'écrire automatiquement.

PrestaShop 1.6

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

<?php

class Product extends ProductCore
{
    /** @var string Balise H1 personnalisée (multilingue) */
    public $h1_prod;

    public function __construct(
        $id_product = null,
        $full = false,
        $id_lang = null,
        $id_shop = null,
        Context $context = null
    ) {
        self::$definition['fields']['h1_prod'] = [
            'type' => self::TYPE_HTML,
            'lang' => true,
            'validate' => 'isCleanHtml',
            'size' => 255,
        ];

        parent::__construct($id_product, $full, $id_lang, $id_shop, $context);
    }
}

PrestaShop 1.7 / 8.x

Le système d'override fonctionne toujours, mais PrestaShop 8.x encourage l'utilisation de modules avec des hooks pour modifier le formulaire produit. La classe Product peut néanmoins être overridée de la même manière.

Pour une approche plus pérenne en 8.x, privilégiez un module qui utilise :

• Le hook `actionProductFormBuilderModifier` pour ajouter le champ au formulaire Symfony
• Le hook `actionAfterUpdateProductFormHandler` pour sauvegarder la valeur
• La définition du champ dans l'override `Product.php` reste identique

<?php
// modules/monmodule/src/Form/ProductH1FormModifier.php

use Symfony\Component\Form\Extension\Core\Type\TextType;

class ProductH1FormModifier
{
    public function modify($builder, array $data): void
    {
        $builder->get('seo')->add('h1_prod', TextType::class, [
            'label' => 'H1 personnalisé',
            'required' => false,
            'attr' => [
                'placeholder' => 'Laissez vide pour utiliser le nom du produit',
                'maxlength' => 255,
            ],
        ]);
    }
}

Point critique : après avoir créé un override, supprimez le fichier var/cache/dev/class_index.php et var/cache/prod/class_index.php (en 1.6 : cache/class_index.php). Sans cette étape, PrestaShop ne détectera pas votre override.

Étape 3 : Afficher le champ dans le back-office (1.6)

En PrestaShop 1.6, le formulaire produit est géré par des fichiers .tpl. Pour ajouter le champ H1 dans l'onglet "Informations" :

Créez le fichier override/controllers/admin/templates/products/informations.tpl en copiant l'original depuis controllers/admin/templates/products/informations.tpl, puis ajoutez après le champ du nom produit :

<div class="form-group">
    <label class="control-label col-lg-3" for="h1_prod_{$id_lang}">
        <span class="label-tooltip" data-toggle="tooltip" title="{l s='Balise H1 personnalisée pour le SEO. Laissez vide pour utiliser le nom du produit.'}">
            {l s='H1 personnalisé'}
        </span>
    </label>
    <div class="col-lg-5">
        {foreach from=$languages item=language}
            <div class="translatable-field lang-{$language.id_lang}"
                 {if $language.id_lang != $defaultFormLanguage}style="display:none"{/if}>
                <input type="text"
                       id="h1_prod_{$language.id_lang}"
                       name="h1_prod_{$language.id_lang}"
                       class="form-control"
                       value="{$product->h1_prod[$language.id_lang]|escape:'html':'UTF-8'}"
                       maxlength="255" />
            </div>
        {/foreach}
    </div>
</div>

Étape 4 : Import CSV du H1 personnalisé

Pour les catalogues volumineux, saisir chaque H1 à la main est impensable. L'override de AdminImportController permet d'ajouter le champ H1 dans le mapping de l'import CSV.

PrestaShop 1.6

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

<?php

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

        $this->available_fields += [
            'h1_prod' => ['label' => $this->l('H1 personnalisé')],
        ];
    }
}

Dans votre fichier CSV, ajoutez une colonne h1_prod avec les valeurs souhaitées. Lors de l'import, le champ apparaîtra dans la liste de mapping et sera automatiquement sauvegardé grâce à la définition ajoutée dans la classe Product.

PrestaShop 8.x

En version 8.x, l'import utilise toujours le même mécanisme sous-jacent. L'override de AdminImportController fonctionne, mais si vous avez opté pour un module, vous pouvez aussi utiliser le hook actionProductImportFieldsModifier pour enregistrer le champ proprement.

Étape 5 : Afficher le H1 personnalisé en front-office

La dernière étape consiste à afficher le H1 personnalisé sur la fiche produit côté client.

PrestaShop 1.6 (Smarty)

Dans votre thème, fichier themes/votre-theme/product.tpl, remplacez :

<h1>{$product->name}</h1>

par :

<h1>{if $product->h1_prod}{$product->h1_prod}{else}{$product->name}{/if}</h1>

PrestaShop 1.7 / 8.x

Le produit doit être enrichi via le hook actionPresentProduct ou filterProductContent pour transmettre le champ au template :

public function hookActionPresentProduct(array $params): void
{
    $product = new Product((int) $params['product']['id_product'], false, Context::getContext()->language->id);

    if (!empty($product->h1_prod)) {
        $params['presentedProduct']['h1_custom'] = $product->h1_prod;
    }
}

Puis dans themes/votre-theme/templates/catalog/product.tpl :

<h1>{if isset($product.h1_custom) && $product.h1_custom}{$product.h1_custom}{else}{$product.name}{/if}</h1>

Appliquer le même principe aux catégories

La même technique s'applique aux pages catégories en ajoutant un champ h1_cat dans ps_category_lang et en overridant la classe Category. La démarche est strictement identique :

1. `ALTER TABLE ps_category_lang ADD COLUMN h1_cat TEXT DEFAULT NULL;`
2. Override de `Category.php` avec la définition du champ
3. Modification du template catégorie en front

Cela permet d'avoir des H1 de catégorie orientés SEO (ex : *"Chaussures de randonnée homme imperméables"*) tout en gardant un nom de catégorie court dans le menu (*"Randonnée Homme"*).

Bonnes pratiques SEO pour vos H1

• **Un seul H1 par page** — c'est la règle fondamentale. Vérifiez que votre thème ne génère pas un second H1 (logo, sidebar, etc.)
• **Inclure le mot-clé principal** en début de H1 quand c'est naturel
• **70 caractères maximum** — au-delà, l'impact SEO diminue et l'affichage peut être tronqué
• **H1 différent du title** — le `