不少站点为了页面整洁,会把产品参数、常见问题、补充说明折叠起来,用户点一下才展开。对真实用户来说这是体验优化,但如果处理方式不当,搜索引擎拿到的可能就是一个空壳页面。折叠本身不是问题,问题在于内容是不是从一开始就放在 HTML 里。
折叠内容为什么容易被漏掉
搜索引擎抓取的是服务端返回的 HTML 源码。如果折叠区域只是一段占位符,真正的文字要靠点击后的接口请求或前端渲染才出现,抓取程序通常不会替你点那一下。结果是页面上肉眼能看到的段落,在源码里完全不存在。
另一种情况是内容确实在源码里,只是用 display:none 或高度为零的容器藏起来。这种写法一般仍会被抓取和索引,但权重判断上可能不如直接可见的内容,而且不同引擎的处理方式有差异,不适合把核心信息全部押在上面。
自查清单
- 在页面源码里搜索折叠区那段文字,能否直接搜到完整内容。
- 折叠用的是纯 CSS、details/summary 标签,还是点击后异步加载。
- 折叠标题是否写成了有意义的短语,而不是「展开更多」这类含糊文字。
- 折叠区域内部的链接,是否要等展开后才插入 DOM,导致蜘蛛看不到这条路径。
- 同一模板下的所有页面,是否把所有段落都塞进了折叠,从首屏到源码都看不到实质内容。
- 移动端点击折叠时,页面是否跳动或遮挡正文,影响用户继续阅读。
- 关闭 JavaScript 后访问,核心内容是否还在。
可以怎么调整
- 内容先渲染,再用样式折叠。把完整文字写进 HTML,用 CSS 或 details 标签控制展开收起,让用户看到的和源码里的保持一致。
- 把关键信息放到默认展开的位置。价格、规格、适用范围、售后政策这类决定用户是否继续看的内容,不要藏在第二层折叠里。
- 异步加载只用于次要模块。如果是评论、推荐商品这类辅助区域,可以用接口加载,但要保证主内容不依赖它。
- 折叠区内的链接要能直接访问。别让链接地址只在点击后才生成,重要路径最好在页面上有对应的可抓取入口。
- 给折叠标题加上清晰文案。标题本身也是内容的一部分,写清这一段讲什么,比写「点击查看」更有价值。
- 抽查几个典型页面。取首页、栏目页、详情页各一到两个,用查看源码和纯文本渲染工具过一遍,确认内容层面没有缺口。
一个容易忽略的细节
有的折叠组件会在展开时把内容整体移动到另一个容器,或者用动画逐步显示。这类实现如果只在交互后触发 DOM 插入,源码里依然什么都没有。调整时优先选择不依赖交互的渲染方式。
折叠是为了让页面更好读,不是为了把内容藏起来。判断标准很简单:把页面源码复制成纯文本,页面上最重要的信息还在不在。
小结
折叠内容属于典型的「用户看得到、蜘蛛看不到」问题。处理方式并不复杂:把内容放在 HTML 里,把关键信息放在显眼处,把次要模块的异步加载限制在辅助区域,基本就能兼顾阅读体验和信息可发现性。定期抽检几个页面,比等收录或排名出问题再回头排查要省事得多。