真实锚标签与纯JavaScript链接：为什么Google需要

如何通过查看源代码审计菜单、发现纯JavaScript链接，以及修复它们以改善可爬取性。

一位Shopify店主去年安装了一个高级大菜单应用。这个应用评价很高，动画精美，界面简洁。销售额保持平稳。三个月后，Google Search Console显示已爬取的页面下降了40%。问题不是菜单设计——而是菜单链接只存在于JavaScript中。Google爬虫看到的是一个没有指向分类页面的链接的首页。分类页面成了孤立页面。

这是我看到最常见的导航SEO错误：一个看起来对用户来说很完美的菜单，但对搜索引擎来说是看不见的。解决方案并不复杂，但需要理解真实HTML链接和纯JavaScript导航模式之间的区别——以及学会如何审计你自己的网站，在问题影响你的流量之前就发现它。

快速阅读

Google爬取带href属性的HTML锚标签——JavaScript点击处理器不算。
查看源代码显示的是JavaScript运行前的原始HTML——这是Google首先看到的。
常见错误：onclick处理器、javascript:void(0)、带data-url属性的div元素。
修复方法：在服务器上用HTML渲染链接，仅用JavaScript增强交互。

Google爬虫实际上看到什么

当Google爬取一个页面时，它向你的服务器发送HTTP请求并接收HTML响应。爬虫解析这个HTML来查找链接——特别是带有href属性的<a>标签。它找到的每个URL都被添加到爬取队列中。

这是第一阶段。Google的爬虫可以执行JavaScript（它在底层使用了一个版本的Chrome），但JavaScript渲染发生在第二阶段，并且不是对所有页面都保证的。Google优先考虑第一阶段的HTML爬取，因为它快速可靠。完全依赖JavaScript进行导航的页面处于劣势。

以下是Google查找的内容：

<a href="/collections/summer-shoes">Summer Shoes</a>

这是一个真实链接。href属性包含一个URL。Google的爬虫提取/collections/summer-shoes并将其添加到爬取队列。这个页面将被爬取和索引。

以下是Google在第一阶段忽略或遗漏的内容：

<div onclick="window.location='/collections/summer-shoes'">Summer Shoes</div>
<a href="javascript:void(0)" onclick="navigate('/collections/summer-shoes')">Summer Shoes</a>
<button data-url="/collections/summer-shoes">Summer Shoes</button>

这些都不是带有真实href属性的锚标签。URL在代码中存在（在onclick处理器或data属性中），但Google的第一阶段爬虫在发现链接时不会执行JavaScript或解析data属性。这些链接在初始爬取中是看不见的。

Google可能最终会通过其他方式发现这些页面（站点地图、外部反向链接、JavaScript渲染），但它们不会获得来自主导航HTML中的链接所带来的爬取优先级或链接权重。

查看源代码：最终的测试

你不需要特殊工具来检查你的导航是否可爬取。每个浏览器都有一个”查看源代码”功能，显示服务器发送的原始HTML，在任何JavaScript运行前。这正是Google第一阶段爬虫看到的。

如何检查

在Chrome、Firefox或Safari中打开你的店铺首页。
在页面上右键点击并选择”查看页面源代码”（或在Windows上按Ctrl+U，Mac上按Cmd+Option+U）。
新标签页显示原始HTML。
按Ctrl+F（Mac上是Cmd+F）并搜索你主分类页面之一的URL——例如，/collections/women。

如果你发现URL在一个锚标签中，像这样：

<a href="/collections/women">Women's Clothing</a>

你的导航是可爬取的。Google可以跟踪这个链接。

如果URL根本不出现在查看源代码中，或者只出现在<script>标签或data属性中，像这样：

<div class="menu-item" data-url="/collections/women">Women's Clothing</div>

你的导航在第一阶段不可爬取。Google的初始HTML爬取会遗漏它。

移动端与桌面端

许多店铺对移动端和桌面端使用不同的导航实现。桌面版本可能使用语义HTML锚标签，而移动版本使用纯JavaScript汉堡菜单。由于Google使用移动优先索引（移动版本是Google爬取的主要版本），你需要单独检查移动HTML。

在Chrome中：

打开开发者工具（F12或右键→检查）。
点击设备工具栏图标（或按Ctrl+Shift+M / Cmd+Shift+M）。
从下拉菜单中选择一个移动设备（例如iPhone SE）。
重新加载页面。
再次右键并查看源代码。

在移动HTML中搜索你的分类URL。如果它们不出现，Google的移动爬虫看不到你的导航链接。

未通过查看源代码测试的常见模式

模式1：JavaScript生成的大菜单

许多现代菜单应用的工作原理如下：

服务器发送最少的HTML——只是一个菜单触发按钮。
当用户悬停或点击时，JavaScript从API获取菜单数据或解析JSON对象。
JavaScript构建完整的DOM（包括所有<a>标签）并将其注入到页面中。

服务器发送的示例HTML：

<button id="mega-menu-trigger">Shop</button>
<div id="mega-menu-container"></div>
<script>
  const menuData = {
    "women": {"label": "Women", "url": "/collections/women"},
    "men": {"label": "Men", "url": "/collections/men"}
  };
  // JavaScript在用户交互时构建并注入链接
</script>

查看源代码显示的是按钮和空容器。链接还不存在。Google的第一阶段爬取看不到指向分类页面的链接。

模式2：单页应用路由

使用React、Vue或其他SPA框架构建的店铺经常使用客户端路由。菜单在框架代码中可能看起来像这样：

<Link to="/collections/summer-shoes">Summer Shoes</Link>

这是否可爬取取决于框架如何渲染它，以及应用是否使用服务器端渲染。如果应用是纯客户端SPA（服务器发送单个index.htmlshell而JavaScript渲染所有内容），查看源代码显示的是没有导航链接的空shell：

<!DOCTYPE html>
<html>
<head><title>Store</title></head>
<body>
  <div id="root"></div>
  <script src="/bundle.js"></script>
</body>
</html>

所有内容，包括导航，都由JavaScript渲染。Google的第一阶段爬取看不到任何内容。

模式3：无href的onclick处理器

一些菜单使用锚标签但将导航逻辑放在onclick处理器中，并使用javascript:void(0)作为href：

<a href="javascript:void(0)" onclick="goToCategory('women')">Women</a>

这对用户来说看起来像一个链接，点击时也表现得像一个链接，但javascript:void(0)不是一个真实的URL。Google的爬虫从href属性中提取javascript:void(0)并丢弃它，因为它不是一个可爬取的URL。真实的目的地（/collections/women）隐藏在JavaScript函数goToCategory()中，爬虫在第一阶段HTML解析时不会执行这个函数。

模式4：带data属性的div和button

开发者有时使用非语义元素构建导航：

<div class="nav-item" data-url="/collections/women" onclick="navigate(this.dataset.url)">
  Women
</div>

这对用户来说是有效的（JavaScript读取data属性并在点击时导航），但没有<a>标签也没有href属性。Google的爬虫不会在data属性中查找URL。链接是看不见的。

如何修复纯JavaScript链接

修复方法1：在HTML中渲染链接，用JavaScript增强

最佳方法：你的服务器（或静态网站生成器）输出带有真实锚标签的完整HTML。JavaScript在顶部添加交互性。

服务器渲染的HTML：

<nav>
  <a href="/collections/women">Women</a>
  <a href="/collections/men">Men</a>
  <a href="/collections/kids">Kids</a>
</nav>

这个HTML是可爬取的。Google立即看到这些链接。

然后JavaScript增强它：

document.querySelectorAll('nav a').forEach(link => {
  link.addEventListener('click', (e) => {
    // 添加平滑过渡、分析等
    // 让浏览器正常导航（不要preventDefault）
  });
});

导航在没有JavaScript的情况下工作（优雅降级），在有JavaScript的情况下完美工作（渐进增强），并且在两种情况下都可爬取。

修复方法2：为SPA使用服务器端渲染

如果你的店铺是用React、Vue或类似框架构建的单页应用，请实现服务器端渲染（SSR）或静态网站生成（SSG）。

使这变得容易的框架：

Next.js 用于React
Nuxt 用于Vue
SvelteKit 用于Svelte
Gatsby 用于静态网站

这些框架在服务器上渲染完整的HTML（包括导航）。初始页面加载提供完整、可爬取的HTML。然后JavaScript水化页面并接管后续导航，为用户提供SPA体验，为搜索引擎提供可爬取的HTML。

修复方法3：检查你的菜单应用设置

如果你正在使用Shopify菜单应用，检查应用的设置中是否有”SEO模式”或”服务器端渲染”选项。许多应用将此作为切换选项提供。启用时，应用会用Liquid（Shopify的服务器端模板语言）而不是JavaScript渲染导航链接。

如果你的应用不提供此选项，并且你已通过查看源代码确认你的导航不可爬取，考虑切换到提供此功能的应用。Navi+ AI Menu Builder默认在HTML中渲染所有链接——链接在初始HTML payload中，JavaScript仅处理交互和动画。

修复方法4：汉堡菜单的渐进增强

移动汉堡菜单经常隐藏导航，直到用户点击图标。只要链接存在于HTML中，菜单仍然可以是可爬取的：

<nav class="mobile-menu" aria-hidden="true">
  <a href="/collections/women">Women</a>
  <a href="/collections/men">Men</a>
</nav>

CSS默认隐藏菜单：

.mobile-menu {
  display: none;
}
.mobile-menu.is-open {
  display: block;
}

JavaScript在点击汉堡图标时切换类：

hamburgerButton.addEventListener('click', () => {
  mobileMenu.classList.toggle('is-open');
});

链接存在于HTML中（查看源代码显示它们），所以Google可以爬取它们，即使它们被CSS隐藏。这是可以的——Google不会惩罚隐藏内容，只要它不是欺骗性的（你没有隐藏关键词堆砌垃圾）。

不起作用的是：仅当用户点击汉堡菜单时才用JavaScript构建移动菜单DOM：

hamburgerButton.addEventListener('click', () => {
  const menu = document.createElement('nav');
  menu.innerHTML = '<a href="/zh-CN/collections/women">Women</a>...';
  document.body.appendChild(menu);
});

这个菜单在用户交互前不存在于HTML中。Google的爬虫不会点击汉堡图标。链接是看不见的。

测试你的修复

更新导航后，验证它现在是可爬取的：

查看源代码测试：重新加载你的首页并查看源代码。搜索分类URL。确认它们出现在锚标签中。
JavaScript禁用测试：在Chrome开发者工具中禁用JavaScript（设置→调试器→禁用JavaScript）。重新加载你的首页。确认导航链接可见且可点击。点击链接应该导航到分类页面（没有JavaScript页面看起来会被破坏，但导航应该是有效的）。
Google Search Console：等待几天，然后检查覆盖率报告（页面→已索引）。如果之前的孤立分类页面开始显示为已索引，你的修复就成功了。

检查桌面端和移动端在你网站的桌面端和移动端版本上运行查看源代码测试。如果你的移动导航使用不同的实现（汉堡菜单、不同应用、简化结构），单独测试它。Google的移动优先索引意味着移动版本对排名最重要。

为什么这比你想象的更重要

导航不仅仅是你网站上众多内部链接之一——它是Google看到最突出、最一致的一组链接。主导航出现在每个页面。它在标题中，在HTML文档的上部，在Google期望找到重要链接的地方。当Google爬取你的首页时，导航是它遇到的第一组链接。

如果这些链接不可爬取，Google不仅仅是遗漏几个页面。它失去了理解你网站架构的主要信号。分类页面成为孤立。仅从这些分类页面链接的产品成为孤立的孤立。整个网站结构从Google的角度崩溃。

并且因为导航是这么一致的（每个页面上都是相同的菜单），影响会复合。如果你的首页导航是纯JavaScript，你网站上的每个页面都有同样的问题。Google爬取100个页面，在所有100个页面上都找不到零个导航链接。这不是一个小问题——这是一个基础性的可爬取性失败。

查看源代码测试只需要30秒。如果你的分类URL不出现在原始HTML中，你发现了可以做的最重要的SEO修复。其他一切——关键词优化、反向链接、技术改进——都建立在Google可以爬取你的页面这个假设之上。没有可爬取的导航，那个假设是错误的。

This article is part of the larger guide on 导航SEO：确保Google能爬取你的菜单结构.

导航SEO：确保Google能爬取你的菜单结构