同一个页面，在浏览器里正文、导航、评论都齐了，搜索引擎拿到的初始 HTML 里却只有一个空容器标签——这种情况在改版或前端框架升级之后很常见。搜索引擎确实能执行一部分 JavaScript，但渲染要排队、要额外消耗资源，能直接读到的内容，通常比渲染后才出现的内容更稳。这篇讲怎么判断自己的页面是不是空壳，以及哪些东西应该直接写进 HTML。
一、先确认蜘蛛到底拿到了什么
判断方式不复杂，关键是别用错工具。
- 看网页源代码，而不是开发者工具里的元素面板。元素面板展示的是脚本执行后的结果，源码才是最初的 HTML，两者内容差得越多，依赖脚本的程度就越高。
- 用命令行抓一次，只看返回的 HTML 里有没有正文标题、段落文字和链接，不执行任何脚本。如果返回内容接近空白，说明首屏 HTML 基本没内容。
- 用搜索后台的 URL 检查工具，对比渲染后的 HTML 与截图，看正文、导航是否都出现，以及渲染是否报错。
- 看服务器日志，同一 URL 是否出现多次抓取：一次取初始 HTML，隔一段时间再来一次做渲染。重复抓取本身不一定是问题，但如果渲染那次经常被放弃，内容就等于没被抓到。
二、哪些内容最好直接写在 HTML 里
不是所有模块都要求服务端输出，优先级可以这样排：
- 文章的标题与正文主体、产品名称与关键参数、页面主标题与简介。
- 主导航、面包屑、分类入口、文章之间的相关阅读链接。
- 分页入口、上一篇下一篇、栏目列表的首屏若干条。
- 图片的替代文本、外链的目标地址。
评论、推荐流、弹窗表单、个性化推荐位这类次要模块，晚一点出现影响不大。
一个简单的判断标准：关掉 JavaScript 之后，页面还剩多少对用户有用的信息和可点的链接。剩下的越多，抓取和收录就越省事。
三、容易踩空的几种写法
- 内链用按钮或脚本跳转。写成按钮、并绑定点击事件去跳转，抓取程序通常不会去点它；换成普通链接形式，带上目标地址，才是一条能被跟随的入口。
- 接口取数据后再拼页面。首屏 HTML 里只有一个根节点，正文全部由接口返回后注入。用户看到内容要等，抓取到的初始文档也几乎是空的。
- 骨架屏占位过久。骨架屏只是占位符，本身不含任何有效文字，如果内容长期不落地，多次抓取都只能看到同一套占位结构。
- 无限滚动没有可访问的分页地址。用户能一直往下滑，抓取程序却找不到第二页入口，列表尾部的内容就没有路径被发现。
- 懒加载图片用脚本换地址。图片放在 data 属性里、滚动时才写入 src，早期抓取可能取不到图，图集类页面的内容也容易残缺。
四、可行的折中办法
全站改成服务端渲染代价不小，也从不是唯一答案。比较务实的顺序是：
- 首屏关键内容与导航、内链服务端输出，其余模块在客户端补齐。
- 把接口请求提前，让正文在首次渲染时就能拿到数据，缩短空窗期。
- 列表页保留传统的分页地址，无限滚动只是交互上的增强，两种入口并存并不冲突。
- 图片懒加载同时保留原始地址，并在 HTML 中写好替代文本。
- 重要链接避免依赖鼠标事件，用标准链接形式承载。
五、改完之后怎么验证
- 关闭脚本再看一遍页面，正文标题和主要链接是否还在。
- 用命令行抓取，确认返回 HTML 中能搜到正文里的独特词组。
- 在搜索后台对比渲染前后的 HTML，看是否有渲染报错或超时。
- 过一段时间看日志，同一个 URL 是否还在被反复抓取却迟迟不更新。
前端渲染和抓取并不对立，问题往往出在“把什么都推到客户端”。把对用户和搜索引擎都重要的那部分内容放回首屏 HTML，剩下的交给脚本去增强体验，是成本最低也最容易长期维持的做法。