站点运营

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

折叠、選項卡、点击展開,這些交互让頁面更整洁,但也可能让正文只存在于用戶点击之後。本文给出一份折叠内容自查清單,從源碼可见性、异步加载、折叠区内連結等角度,帮你確認重要信息没有被挡在交互後面。

站点运营

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

不少站点為了頁面整洁,會把产品參數、常见問题、补充說明折叠起来,用戶点一下才展開。對真實用戶来说這是体驗優化,但如果處理方式不当,搜尋引擎拿到的可能就是一個空壳頁面。折叠本身不是問题,問题在于内容是不是從一開始就放在 HTML 里。

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

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

另一種情况是内容确實在源碼里,只是用 display:none 或高度為零的容器藏起来。這種寫法一般仍會被抓取和索引,但權重判断上可能不如直接可见的内容,而且不同引擎的處理方式有差异,不适合把核心信息全部押在上面。

自查清單

  • 在頁面源碼里搜尋折叠区那段文字,能否直接搜到完整内容。
  • 折叠用的是纯 CSS、details/summary 标簽,還是点击後异步加载。
  • 折叠标题是否寫成了有意义的短语,而不是「展開更多」這類含糊文字。
  • 折叠区域内部的連結,是否要等展開後才插入 DOM,導致蜘蛛看不到這條路径。
  • 同一模板下的所有頁面,是否把所有段落都塞進了折叠,從首屏到源碼都看不到實质内容。
  • 移動端点击折叠时,頁面是否跳動或遮挡正文,影响用戶繼續阅讀。
  • 關閉 JavaScript 後訪問,核心内容是否還在。

可以怎么調整

  1. 内容先渲染,再用样式折叠。把完整文字寫進 HTML,用 CSS 或 details 标簽控制展開收起,让用戶看到的和源碼里的保持一致。
  2. 把關键信息放到預設展開的位置。價格、規格、适用范围、售後政策這類决定用戶是否繼續看的内容,不要藏在第二层折叠里。
  3. 异步加载只用于次要模块。如果是评论、推荐商品這類辅助区域,可以用接口加载,但要保證主内容不依赖它。
  4. 折叠区内的連結要能直接訪問。別让連結地址只在点击後才生成,重要路径最好在頁面上有對應的可抓取入口。
  5. 给折叠标题加上清晰文案。标题本身也是内容的一部分,寫清這一段讲什么,比寫「点击查看」更有價值。
  6. 抽查几個典型頁面。取首頁、栏目頁、詳情頁各一到两個,用查看源碼和纯文本渲染工具過一遍,確認内容层面没有缺口。

一個容易忽略的细节

有的折叠组件會在展開时把内容整体移動到另一個容器,或者用動画逐步顯示。這類實現如果只在交互後触發 DOM 插入,源碼里依然什么都没有。調整时優先選擇不依赖交互的渲染方式。

折叠是為了让頁面更好讀,不是為了把内容藏起来。判断标准很简單:把頁面源碼複製成纯文本,頁面上最重要的信息還在不在。

小结

折叠内容属于典型的「用戶看得到、蜘蛛看不到」問题。處理方式並不复杂:把内容放在 HTML 里,把關键信息放在顯眼處,把次要模块的异步加载限制在辅助区域,基本就能兼顾阅讀体驗和信息可發現性。定期抽检几個頁面,比等收錄或排名出問题再回头排查要省事得多。