如何在Shopify商品页动态区块渲染时避免重复<h1>标签？

问题背景 #

在自定义Liquid模板开发Shopify商品页时，多个动态区块支持通过主题自定义器配置是否显示标题，但当前实现会生成多个<h1>标签，违反SEO规范（单页面仅应存在一个<h1>，通常为商品标题）。

当前简化代码：

{% if section.settings.heading != blank %}
  <h1>{{ section.settings.heading }}</h1>
{% endif %}

解决方案 #

以下两种方案均基于服务端渲染（Liquid）实现，避免依赖JavaScript，确保SEO友好，同时保留自定义器的动态配置能力。

方案1：自动降级标题层级 #

通过页面级变量追踪<h1>是否已被使用，自动将后续区块的标题降级为<h2>。

1. 在商品页主模板（如product-template.liquid）的开头添加变量：

{% assign h1_used = false %}

2. 商品标题区块（固定为<h1>）的代码：

<h1>{{ product.title }}</h1>
{% assign h1_used = true %}

3. 其他动态区块的标题代码修改为：

{% if section.settings.heading != blank %}
  {% if h1_used == false %}
    <h1>{{ section.settings.heading }}</h1>
    {% assign h1_used = true %}
  {% else %}
    <h2>{{ section.settings.heading }}</h2>
  {% endif %}
{% endif %}

该方案无需商家额外配置，自动确保页面仅一个<h1>，其他标题统一降级为<h2>。

方案2：自定义标题层级（灵活配置） #

通过在主题自定义器中为每个区块添加“标题层级”选项，让商家手动指定标题标签，同时限制仅商品标题区块可选择<h1>。

1. 修改每个动态区块的schema配置，添加标题层级选择项：

{
  "type": "select",
  "id": "heading_level",
  "label": "标题层级",
  "options": [
    {
      "value": "h2",
      "label": "H2"
    },
    {
      "value": "h3",
      "label": "H3"
    }
  ],
  "default": "h2"
}

2. 商品标题区块的schema中增加<h1>选项：

{
  "type": "select",
  "id": "heading_level",
  "label": "标题层级",
  "options": [
    {
      "value": "h1",
      "label": "H1（仅建议商品标题使用）"
    },
    {
      "value": "h2",
      "label": "H2"
    }
  ],
  "default": "h1"
}

3. 所有区块的标题渲染代码修改为：

{% if section.settings.heading != blank %}
  <{{ section.settings.heading_level }}>{{ section.settings.heading }}</{{ section.settings.heading_level }}>
{% endif %}

该方案更灵活，商家可根据内容结构调整标题层级，同时通过选项引导正确使用<h1>。

注意事项 #

• 优先选择服务端渲染方案，避免使用JavaScript修改标题标签（爬虫可能无法识别JS动态修改的内容）。
• 确保商品标题作为页面核心内容，始终设置为<h1>，符合SEO最佳实践。

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