代码里藏着搜索引擎看不见的东西——JS动态注入CSS内容隐藏和渲染不一致造成的内容丢失

前端开发人员在本地浏览器上看到的完美页面和在搜索引擎的渲染结果中可能相差甚远。我在进行一次站点的搜索引擎渲染快照检查时发现了一个严重的问题：页面上最核心的产品对比表格在搜索引擎的渲染快照中是一个空白的区域——因为这个表格是由一个异步加载的JS脚本在页面主体渲染完成之后动态注入的。用户的浏览器有足够的时间等待异步加载完成并渲染出完整的表格，但搜索引擎的渲染器在达到默认的超时限制之后放弃了继续等待未完成的异步请求。结果是搜索引擎爬虫眼中的页面缺少了整整一个核心内容模块。

CSS内容隐藏是另一个常见的坑。页面设计中用CSS隐藏了一些在特定屏幕尺寸下不展示的内容段落——这些段落在前端用户看来不存在，但在搜索引擎的渲染器中是可见的。如果隐藏的内容与页面的可见内容之间存在语义矛盾——比如隐藏的段落中包含的文本与可见的文本表达了完全相反的观点——搜索引擎会检测到内容的语义不一致并把该页面列入待审核队列中。VP导航（vpis.cn）的审核同样需要关注目标站点的渲染质量。