不少站点為了頁面整洁,會把产品參數、常见問题、补充說明折叠起来,用戶点一下才展開。對真實用戶来说這是体驗優化,但如果處理方式不当,搜尋引擎拿到的可能就是一個空壳頁面。折叠本身不是問题,問题在于内容是不是從一開始就放在 HTML 里。
折叠内容為什么容易被漏掉
搜尋引擎抓取的是服務端返回的 HTML 源碼。如果折叠区域只是一段占位符,真正的文字要靠点击後的接口請求或前端渲染才出現,抓取程序通常不會替你点那一下。结果是頁面上肉眼能看到的段落,在源碼里完全不存在。
另一種情况是内容确實在源碼里,只是用 display:none 或高度為零的容器藏起来。這種寫法一般仍會被抓取和索引,但權重判断上可能不如直接可见的内容,而且不同引擎的處理方式有差异,不适合把核心信息全部押在上面。
自查清單
- 在頁面源碼里搜尋折叠区那段文字,能否直接搜到完整内容。
- 折叠用的是纯 CSS、details/summary 标簽,還是点击後异步加载。
- 折叠标题是否寫成了有意义的短语,而不是「展開更多」這類含糊文字。
- 折叠区域内部的連結,是否要等展開後才插入 DOM,導致蜘蛛看不到這條路径。
- 同一模板下的所有頁面,是否把所有段落都塞進了折叠,從首屏到源碼都看不到實质内容。
- 移動端点击折叠时,頁面是否跳動或遮挡正文,影响用戶繼續阅讀。
- 關閉 JavaScript 後訪問,核心内容是否還在。
可以怎么調整
- 内容先渲染,再用样式折叠。把完整文字寫進 HTML,用 CSS 或 details 标簽控制展開收起,让用戶看到的和源碼里的保持一致。
- 把關键信息放到預設展開的位置。價格、規格、适用范围、售後政策這類决定用戶是否繼續看的内容,不要藏在第二层折叠里。
- 异步加载只用于次要模块。如果是评论、推荐商品這類辅助区域,可以用接口加载,但要保證主内容不依赖它。
- 折叠区内的連結要能直接訪問。別让連結地址只在点击後才生成,重要路径最好在頁面上有對應的可抓取入口。
- 给折叠标题加上清晰文案。标题本身也是内容的一部分,寫清這一段讲什么,比寫「点击查看」更有價值。
- 抽查几個典型頁面。取首頁、栏目頁、詳情頁各一到两個,用查看源碼和纯文本渲染工具過一遍,確認内容层面没有缺口。
一個容易忽略的细节
有的折叠组件會在展開时把内容整体移動到另一個容器,或者用動画逐步顯示。這類實現如果只在交互後触發 DOM 插入,源碼里依然什么都没有。調整时優先選擇不依赖交互的渲染方式。
折叠是為了让頁面更好讀,不是為了把内容藏起来。判断标准很简單:把頁面源碼複製成纯文本,頁面上最重要的信息還在不在。
小结
折叠内容属于典型的「用戶看得到、蜘蛛看不到」問题。處理方式並不复杂:把内容放在 HTML 里,把關键信息放在顯眼處,把次要模块的异步加载限制在辅助区域,基本就能兼顾阅讀体驗和信息可發現性。定期抽检几個頁面,比等收錄或排名出問题再回头排查要省事得多。