使用W3Schools响应式导航模板后，如何让菜单链接可被爬虫抓取？

W3Schools的这款响应式导航模板，核心问题在于默认移动端菜单折叠时，依赖JavaScript触发显示，且部分实现存在链接结构不规范的情况，导致不执行JS的爬虫无法识别这些链接。以下是具体修复方案：

• 确保导航链接直接存在于HTML源码中
  不要通过JavaScript动态生成导航链接，所有需要被抓取的链接都要直接写在HTML里，哪怕默认是隐藏状态。爬虫会读取原始HTML，只要链接存在于源码中，即使被CSS隐藏，也能被识别。

• 使用语义化的导航结构
  用<nav>标签包裹整个导航区域，内部用<ul>和<li>组织链接，让爬虫清晰识别导航模块：

  <nav>
    <ul class="topnav">
      <li><a href="/home">首页</a></li>
      <li><a href="/about">关于我们</a></li>
      <li><a href="/services">服务</a></li>
    </ul>
  </nav>
  

• 必须使用标准<a>标签实现链接
  禁止用<div>、<span>等非链接元素配合onclick事件模拟跳转。爬虫只会识别带有href属性的<a>标签作为可抓取的链接，纯JS触发的跳转爬虫无法解析。

• 优化折叠菜单的CSS隐藏方式
  移动端折叠菜单不要用display: none完全隐藏（部分爬虫可能忽略这种状态的元素），改用max-height或transform实现视觉隐藏，同时保留DOM结构：

  .topnav .links {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .topnav .links.active {
    max-height: 600px; /* 足够容纳所有导航项的高度 */
  }
  

  这种方式既不影响前端交互，也能让爬虫读取到所有链接。

• 验证修复效果
  修改后重新运行Lighthouse检测，确认“可爬取链接”项通过。也可以直接查看页面源代码，确认所有导航链接都是标准的<a href="...">格式且存在于源码中。

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