GitHub托管食谱站：如何让爬虫识别JS生成的导航菜单？

一、优先用渐进式增强重构关键内容（核心解决无出站链接问题） #

不要完全依赖JS生成导航、页脚这类核心链接结构，先在HTML中写入基础可爬取的静态内容，再用JS做交互增强：

• 导航菜单：在<div id="nav-container" class="nav-container">里预先写入静态的导航链接（比如首页、分类、热门食谱），JS后续仅负责样式优化或动态补充内容（如果有需要）。示例：

<div id="nav-container" class="nav-container">
  <ul class="nav-menu">
    <li><a href="/">首页</a></li>
    <li><a href="/breakfast/">早餐食谱</a></li>
    <li><a href="/dinner/">正餐食谱</a></li>
  </ul>
</div>

这样爬虫无需等待JS执行，就能直接抓取到出站链接，解决“死胡同”问题。

• 页脚：同理，把页脚的核心链接（比如关于我们、隐私政策）直接写在HTML里，JS只做动态部分的补充。

二、修正折叠内容的渲染逻辑（解决烹饪方法不被识别） #

不要把烹饪方法藏在JS动态生成或点击才加载的容器里，默认在HTML中输出完整的烹饪方法内容，用JS控制显示/隐藏：

<div class="recipe-section">
  <button id="toggle-steps">切换烹饪方法</button>
  <!-- 直接写入完整的烹饪方法，默认用CSS隐藏，JS控制切换 -->
  <div class="cooking-steps" style="display: none;">
    <ol>
      <li>热锅倒入食用油</li>
      <li>放入蒜末爆香...</li>
    </ol>
  </div>
</div>

对应的JS只负责切换样式：

document.getElementById('toggle-steps').addEventListener('click', () => {
  const steps = document.querySelector('.cooking-steps');
  steps.style.display = steps.style.display === 'none' ? 'block' : 'none';
});

这样爬虫能直接读取到完整的烹饪方法内容，不会因为需要交互而遗漏。

三、优化脚本加载方式（消除DOM解析报错风险） #

把脚本放到<head>并添加defer属性是安全且有效的：

• defer会等待整个DOM解析完成后，按脚本的加载顺序执行，和你之前把脚本放在</body>前的执行时机一致，但更符合现代前端规范，也能让爬虫更清晰地识别脚本的执行逻辑。
• 完全不用考虑async，因为它会在脚本加载完成后立即执行，此时DOM可能还没解析完，确实会导致找不到nav-container这类元素的报错。

四、静态生成工具替代纯客户端JS（适合大量动态内容的场景） #

因为托管在GitHub Pages，你可以用静态站点生成工具（比如Eleventy、Hugo），在本地构建时把JS生成的食谱卡片、导航等内容提前转换成静态HTML，再部署到GitHub。这样爬虫抓取到的就是完整的静态页面，完全不需要依赖客户端JS渲染。

• 比如把recipecards.js的逻辑改成在构建时读取食谱数据，生成对应的HTML卡片，部署后页面直接包含所有食谱链接，爬虫能直接抓取。

五、验证爬虫渲染效果 #

用Google Search Console的「URL检查工具」，查看页面的“渲染”标签，确认导航、页脚、烹饪方法等内容是否被正确渲染。如果渲染后仍有缺失，检查脚本是否有报错（比如控制台是否有DOM找不到的错误），或者是否有依赖未加载的资源导致脚本执行中断。

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