如何解决PrestaShop网店点击查看长描述后双H1的SEO问题

咱们先把问题根源理清楚：

• 你当前的「查看更多」是直接跳转到当前分类页面的URL，页面刷新后，短描述和长描述容器可能同时被渲染（或者前端逻辑没处理刷新后的状态），再加上分类页本身的分类名称H1，就出现了双H1的情况。
• 另一个常见原因是你在分类描述里手动添加了H1标签——这本身就违反SEO规范，分类页的核心H1必须是分类名称，描述里的标题应该用H2及以下层级的标签。

下面给你两个层面的解决方案，从根本上解决问题：

1. 把「查看更多」改成前端切换（不跳转页面） #

现在的跳转逻辑完全没必要，用JS切换显示/隐藏既提升用户体验，又能避免页面刷新导致的重复渲染问题。修改你的category.tpl代码如下：

{if $category->description}
    <div class="cat_desc rte">
        {if Tools::strlen($category->description) > 350}
            <div id="category_description_short">{$description_short}</div>
            <div id="category_description_full" class="unvisible">{$category->description}</div>
            <a href="javascript:void(0)" class="lnk_more toggle-description">{l s='查看更多'}</a>
            <a href="javascript:void(0)" class="lnk_more toggle-description unvisible">{l s='收起'}</a>
        {else}
            <div>{$category->description}</div>
        {/if}
    </div>
{/if}

然后添加对应的JS逻辑（可以放在模板底部或者主题的自定义JS文件里）：

document.addEventListener('DOMContentLoaded', function() {
    const toggleBtns = document.querySelectorAll('.toggle-description');
    const shortDesc = document.getElementById('category_description_short');
    const fullDesc = document.getElementById('category_description_full');

    toggleBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            shortDesc.classList.toggle('unvisible');
            fullDesc.classList.toggle('unvisible');
            toggleBtns.forEach(b => b.classList.toggle('unvisible'));
        });
    });
});

2. 强制替换描述中的H1标签（规范SEO结构） #

即使解决了跳转问题，如果描述里本身有H1标签，还是会出现双H1。所以我们可以在模板里用Smarty的替换函数，自动把描述里的H1转换成H2：

修改后的完整代码如下（替换了H1标签）：

{if $category->description}
    <div class="cat_desc rte">
        {if Tools::strlen($category->description) > 350}
            <div id="category_description_short">{$description_short|replace:'<h1>':'<h2>'|replace:'</h1>':'</h2>'}</div>
            <div id="category_description_full" class="unvisible">{$category->description|replace:'<h1>':'<h2>'|replace:'</h1>':'</h2>'}</div>
            <a href="javascript:void(0)" class="lnk_more toggle-description">{l s='查看更多'}</a>
            <a href="javascript:void(0)" class="lnk_more toggle-description unvisible">{l s='收起'}</a>
        {else}
            <div>{$category->description|replace:'<h1>':'<h2>'|replace:'</h1>':'</h2>'}</div>
        {/if}
    </div>
{/if}

额外注意事项 #

• 确认你的分类页核心H1是分类名称（PrestaShop默认逻辑就是这样），不要在其他模块或自定义代码中重复添加H1。
• 修改模板后记得清除PrestaShop的缓存和浏览器缓存，确保新代码生效。

内容的提问来源于stack exchange，提问作者Jauf