跳转到主要内容
ClickFrom.AI Logo ClickFrom.AI
🇨🇳
价格 客户故事 博客 Free Tools 常见问题
Shopify SEO H1 标签 首页优化

我如何修复 Shopify 商店首页 H1 标签：销售者分步指南

发现 Shopify 首页缺失 H1 标签的惊人真相，学习我在 Ride、Taste、Shapes 等热门主题中修复这个关键 SEO 问题的万无一失两步方法。

7 min read

作为一名资深的 Shopify 销售者，我以为我已经掌握了 SEO 基础。我优化产品标题，撰写独特的描述，并努力改善我的收藏。所以想象一下我的震惊，当我最近发现我的四个 Shopify 商店都缺少首页上最重要的页面 SEO 元素：H1 标签。

我花了两个令人沮丧的小时挖掘 Shopify 社区论坛，尝试各种”快速修复”方法，但都没有真正奏效。这就是为什么我要写这份指南。经过多次尝试和错误，我开发了一个万无一失的两步方法，干净地解决了我所有使用热门免费主题如 Ride、Taste 和 Shapes 的商店问题。

这份指南将带您了解我的确切过程。我们将揭示为什么这个问题存在，为什么您不应该简单地复制其他网站的做法，最终实现一个完美的专业级解决方案。

快速注意： 这份指南专门聚焦于首页。大多数 Shopify 主题都正确地将 H1 标签分配给您的产品标题、博客文章标题和收藏标题。首页是几乎总是被遗忘的那一个。

步骤 1：诊断 – 我的 H1 标签去哪了？

我学到的第一件事是，在大多数 Shopify 主题中，问题不是您没有 H1 标签。问题是您的 H1 标签被浪费在您商店的徽标上。

这对 SEO 不好。您的首页 H1 应该是一个包含主要关键词的描述性句子，告诉 Google 您整个商店的内容。您的徽标做不到这点。以下是如何在一分钟内检查您自己网站的方法。

一分钟诊断：

  1. 前往您商店的首页。
  2. 直接右键点击标题中的商店徽标。
  3. 从下拉菜单中选择**“检查”**。
  4. 您的浏览器开发者工具将打开，并高亮显示一行代码。查看该行和直接在其上方的行。您看到它被包裹在 <h1> 标签中吗？

开发者工具中的 H1 标签诊断

如果您看到您的徽标被包裹在 <h1> 中，您遇到了和我相同的问题。我们的任务是首先从徽标中”释放”这个 H1 标签，然后正确使用它。

当然，您也可以安装浏览器扩展程序来检查您的 H1 标签是否存在且正常运作。像这样：

SEO 扩展程序检查

快速绕道：为什么您不应该只是复制其他网站

在我的研究过程中，我找到了其他似乎已经解决这个问题的网站。但当我检查他们的代码时，我意识到他们犯了完全相同的错误：他们的 H1 仍然在他们的徽标上！PS：这实际上是一个知名的 DTC 品牌。我通过 Google 和 Shopify Plus 的官方推荐发现了他们，我从那时开始研究他们的营销。您可以看到他们的徽标被用作 H1 标签，这是懒惰且完全错误的。

品牌徽标 H1 示例

将徽标用作 H1 为搜索引擎和 AI 爬虫（如 Google、ChatGPT 或 Perplexity）提供了很少的信息价值。H1 充当您网站的标语——它应该是一个清晰、简洁的句子，立即告诉爬虫您的网站是关于什么的。除非您是 Nike、Coca-Cola 或 Disney——不需要介绍的品牌——这是一个错失的机会。

H1 标签最佳实践

结果，他们的许多产品和收藏页面最终重复使用了首页的 H1，这可能严重误导 Google 和 AI 爬虫如 ChatGPT。这直接影响网站质量的评估方式。这对他们网站的 AI 可见性产生了显著的负面影响。看下面的截图：他们在一个非常重要的收藏页面上没有 H1 标签！

缺失 H1 收藏页面

这是一个极其重要的教训：不要只是复制另一个网站的代码而不理解其背后的 SEO 原则。 将 H1 标签用于您的徽标是一个过时的做法，因为：

  • 它不富含关键词。 它只包含您的品牌名称，而不包含您销售的内容。
  • 它不是页面特定的。 徽标 H1 出现在每个单独的页面上，告诉 Google 您的”关于我们”页面和特定产品页面具有相同的标题。这是一个主要的 SEO 错误。

我们需要一个更好、更专业的解决方案。

终极修复：SEO 和设计的完美平衡

我们的目标很简单：

  1. 从徽标中移除 <h1>。
  2. 在首页添加一个新的、富含关键词的 <h1>，它对用户不可见但对 Google、ChatGPT 和其他 AI 爬虫完全可见。

哲学： 我们将使用特殊的 CSS 类来视觉上隐藏我们的新 H1 标签。重要的是不要使用 display: none;，因为 Google 可能会忽略它。相反，我们使用一种现代的、对可访问性友好的技术，对 SEO 完全安全。

两步大师计划

步骤 1：先决条件 - 修复 header.liquid

首先，我们需要告诉主题停止对徽标使用 <h1>。

  1. 在您的 Shopify 管理中，前往在线商店 > 主题。在您当前的主题上，点击 … 然后编辑代码。
  2. 打开 Sections 文件夹并点击 header.liquid 文件。
  3. 在文件中搜索（Ctrl+F 或 Cmd+F）<h1。您正在寻找包裹您徽标的代码。
  4. 您的工作是将开启的 <h1> 标签改为 <div>，将关闭的 </h1> 标签改为 </div>。您可能需要在文件内的一个或两个地方执行此操作。

修复前

修复前的标题

修复后：h1 改为 div

修复后的标题

特别注意： 在我的 Taste、Ride 和 Shapes 主题中，这个 <h1> 标签经常在 {% if template.name == 'index' %} 语句内。这没关系。修复是相同的：无论在哪里找到包裹徽标的地方，都将 h1 改为 div。

  1. 点击保存。H1 标签现在自由了。

步骤 2：实现 - 修改 theme.liquid

这是我们添加新的、强大的 H1 的地方。这个步骤涉及编辑您主题中最重要的文件，所以请小心。

  1. 首先，做备份！ 前往主题页面，在您的主题上点击 … 并选择复制。这会创建一个安全副本，如果出现问题您可以恢复。
  2. 在代码编辑器中，打开 Layout 文件夹并点击 theme.liquid。
  3. 找到文件顶部附近的开启 <body> 标签。它可能看起来像 <body class="gradient"> 或类似的东西。
  4. 在开启 <body> 标签正下方的新行粘贴以下代码。

Theme Liquid 实现

要粘贴的代码：

{%- if template.name == 'index' or template == 'index' -%}
  <style>
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      border: 0;
      white-space: nowrap;
    }
  </style>
  <h1 class="visually-hidden">您的出色首页标题 - 主要关键词在这里</h1>
{%- endif -%}
  1. 最重要的部分： 将文字”您的出色首页标题 - 主要关键词在这里”更改为您实际想要的 H1。例如：“手工皮革包包和极简主义钱包 – 您的品牌名称”。
  2. 点击保存。
阅读此指南后您的下一步是什么？

您的行动计划和最终思考

从发现的初始震惊到最终的完美解决方案，这个旅程教会了我宝贵的一课。优化您的商店是关于理解原则，而不仅仅是应用快速修复。

这是您的最终检查清单：

  • 首先诊断： 始终使用”检查”工具检查您自己网站的徽标，看看它是否被包裹在 <h1> 中。
  • 徽标不是 H1： 您的徽标属于 <div>，而不是标题标签。在 header.liquid 中修复这个。
  • 使用视觉隐藏方法： 这是在不影响您设计的情况下添加 H1 的专业标准。
  • 掌握工作流程： “修复 header.liquid -> 在 theme.liquid 中实现”过程是永久解决这个问题的最可靠方法。

我希望这个详细的指南能为您节省我花费的两小时挫折时间。正确设置您的首页 H1 标签是您 SEO 旅程中的一大步。

祝您好运，请随时在评论中分享您的成功！

您接下来想学习哪个 SEO 主题？

Related Articles