站点运营

站点运营:折叠内容自查,别把正文藏进需要点击的地方

折叠、选项卡、点击展开,这些交互让页面更整洁,但也可能让正文只存在于用户点击之后。本文给出一份折叠内容自查清单,从源码可见性、异步加载、折叠区内链接等角度,帮你确认重要信息没有被挡在交互后面。

站点运营

站点运营:折叠内容自查,别把正文藏进需要点击的地方

不少站点为了页面整洁,会把产品参数、常见问题、补充说明折叠起来,用户点一下才展开。对真实用户来说这是体验优化,但如果处理方式不当,搜索引擎拿到的可能就是一个空壳页面。折叠本身不是问题,问题在于内容是不是从一开始就放在 HTML 里。

折叠内容为什么容易被漏掉

搜索引擎抓取的是服务端返回的 HTML 源码。如果折叠区域只是一段占位符,真正的文字要靠点击后的接口请求或前端渲染才出现,抓取程序通常不会替你点那一下。结果是页面上肉眼能看到的段落,在源码里完全不存在。

另一种情况是内容确实在源码里,只是用 display:none 或高度为零的容器藏起来。这种写法一般仍会被抓取和索引,但权重判断上可能不如直接可见的内容,而且不同引擎的处理方式有差异,不适合把核心信息全部押在上面。

自查清单

  • 在页面源码里搜索折叠区那段文字,能否直接搜到完整内容。
  • 折叠用的是纯 CSS、details/summary 标签,还是点击后异步加载。
  • 折叠标题是否写成了有意义的短语,而不是「展开更多」这类含糊文字。
  • 折叠区域内部的链接,是否要等展开后才插入 DOM,导致蜘蛛看不到这条路径。
  • 同一模板下的所有页面,是否把所有段落都塞进了折叠,从首屏到源码都看不到实质内容。
  • 移动端点击折叠时,页面是否跳动或遮挡正文,影响用户继续阅读。
  • 关闭 JavaScript 后访问,核心内容是否还在。

可以怎么调整

  1. 内容先渲染,再用样式折叠。把完整文字写进 HTML,用 CSS 或 details 标签控制展开收起,让用户看到的和源码里的保持一致。
  2. 把关键信息放到默认展开的位置。价格、规格、适用范围、售后政策这类决定用户是否继续看的内容,不要藏在第二层折叠里。
  3. 异步加载只用于次要模块。如果是评论、推荐商品这类辅助区域,可以用接口加载,但要保证主内容不依赖它。
  4. 折叠区内的链接要能直接访问。别让链接地址只在点击后才生成,重要路径最好在页面上有对应的可抓取入口。
  5. 给折叠标题加上清晰文案。标题本身也是内容的一部分,写清这一段讲什么,比写「点击查看」更有价值。
  6. 抽查几个典型页面。取首页、栏目页、详情页各一到两个,用查看源码和纯文本渲染工具过一遍,确认内容层面没有缺口。

一个容易忽略的细节

有的折叠组件会在展开时把内容整体移动到另一个容器,或者用动画逐步显示。这类实现如果只在交互后触发 DOM 插入,源码里依然什么都没有。调整时优先选择不依赖交互的渲染方式。

折叠是为了让页面更好读,不是为了把内容藏起来。判断标准很简单:把页面源码复制成纯文本,页面上最重要的信息还在不在。

小结

折叠内容属于典型的「用户看得到、蜘蛛看不到」问题。处理方式并不复杂:把内容放在 HTML 里,把关键信息放在显眼处,把次要模块的异步加载限制在辅助区域,基本就能兼顾阅读体验和信息可发现性。定期抽检几个页面,比等收录或排名出问题再回头排查要省事得多。