需要组织 FAQ、步骤或规格等可折叠内容时…

为 FAQ、教程步骤、产品规格、定价档位、长指南等内容做标签页或折叠面板时，用于减少页面纵向空间，同时确保内容可索引、可访问且不稀释主题。

适用场景

解决思路

1. 选择垂直手风琴：采用堆叠布局，一次展开/折叠一个，用于 FAQ、Q&A、长列表、异议处理。
2. 选择水平标签：采用并排标签，一次显示一个面板，用于 how-to 步骤、产品规格、定价档位、对比。
3. 移动端布局：小屏优先用垂直手风琴；水平标签拥挤时改用 accordion、dropdown 或可横向滚动的全宽标签栏。
4. SEO 认知：Google 会完整索引和排名 tabs/accordion 内容，隐藏内容获得完整权重（自 2016 mobile-first indexing 起确认）。
5. SEO 实践：常显内容可能排名优于隐藏内容；仅把 tabs/accordion 用于次要内容。
6. 内容放置：主要/排名关键内容放在首屏可见区域，不隐藏。
7. 内容放置：次要/支持内容可放 tabs/accordion。
8. 内容放置：FAQ 答案可放 accordion，第一项默认展开。
9. 索引要求：所有 tab/accordion 内容必须在页面加载时就在 DOM 中。
10. 索引要求：Google 不模拟用户点击，不能“点击”标签来发现内容。
11. 索引实现：所有 tab 内容在初始 HTML 中可被索引；点击时 AJAX 加载的内容不可被索引。
12. 索引实现：服务端渲染所有 tab 内容到初始 HTML，仅用 CSS/JS 显示/隐藏。
13. 索引实现：优先用 `<details>`/`<summary>` 或等效服务端渲染标记。
14. 水平标签技术：若所有内容在加载时在 DOM，更多 tabs = 更多可索引内容；移动优先索引给 HTML 中 tabbed 内容完整权重。
15. 水平标签战略：不总是用 tabs；许多 tabs 代表一页很多不同主题时会造成信号稀释。
16. 水平标签战略：信号稀释会让 Google 难判断页面应排名哪个 query，topical authority 和关键词聚焦被分散。
17. 水平标签场景：同一主题（How-to Step 1/2/3；产品规格：尺寸、材料、运输）用 tabs。
18. 水平标签场景：不同主题（Service A、Service B、Portfolio、Blog）不用 tabs，为每个主题使用单独 URL。
19. 水平标签可用条件：所有 tabs 语义相关到同一个 query（一个 how-to、一个产品）。
20. 水平标签拆分条件：每个 tab 是独立主题、值得自己的 URL、爬取和排名机会时，使用单独页面。
21. 原生 HTML：使用 `<details>` 和 `<summary>`，无需 JavaScript，可访问且可爬取。
22. 原生 HTML：第一个 tab/accordion 添加 `open` 属性，使其默认展开。
23. 原生 HTML：`<summary>` 必须是 `<details>` 的第一个子元素，并作为切换控件。
24. 渐进增强：用 CSS 样式化；仅必要时添加 JS，例如一个打开时关闭其他。
25. JS tabs：如果使用仅 JS tabs，确保所有 tab 内容在页面加载时在 DOM，不在点击时通过 AJAX 加载。
26. JS tabs：Google 不模拟 tab 点击；优先 `<details>`/`<summary>` 或服务端渲染 HTML。
27. 避免：内容仅在用户点击后加载（AJAX、通过 fetch 懒加载），爬虫不会索引。
28. 避免：对主要 content 使用 `display: none` 或 `visibility: hidden`，Google 可能不同处理。
29. 避免：一页放许多不相关主题的 tabs，造成信号稀释；改用单独 URL。
30. 内容最佳实践：第一项展开，确保主要 content 加载时可见，利于 SEO 和 UX。
31. 内容最佳实践：使用描述性头部；`<summary>`/tab 标签清晰描述内容，并自然包含关键词。
32. 内容最佳实践：使用逻辑结构；用 H2/H3 分节，支持 snippet extraction。
33. 内容最佳实践：FAQ 采用 answer-first，先写 40–60 词直接答案，再写细节。
34. 用例 FAQ：Accordion + Vertical；添加 FAQPage schema；第一个问题展开。
35. 用例 How-to steps：Tabs + Horizontal；使用编号“Step n”或描述性 tab 标题；保持顺序流程；若 H2 使用数字，tab 步骤数与 section H2 的步骤数一致。
36. 用例 产品规格：Tabs + Horizontal；放尺寸、材料、运输；作为 hero 的次要内容。
37. 用例 长指南：Accordion + Vertical；可折叠 section。
38. 用例 定价档位：Tabs + Horizontal；比较 plan；主要 CTA 可见。
39. 用例 异议处理：Accordion + Vertical；用“What about X?”支持转化。
40. Schema FAQ：vertical accordion 使用 FAQPage JSON-LD；schema 必须与页面内容完全匹配。
41. Schema How-to：horizontal tabs 对 step-by-step 内容使用 HowTo schema。
42. Schema 其他 tabs：无特定 schema；确保语义 HTML（headings、structure）。
43. UX 可访问性：用箭头、加/减号或 chevron 显示展开/折叠状态。
44. UX 可访问性：`<details>`/`<summary>` 原生支持键盘可访问。
45. Core Web Vitals：展开时避免 layout shift（CLS）；预留空间或平滑动画。
46. 移动端：触控目标 ≥44×44px；小屏垂直手风琴通常优于水平 tabs（tabs 可能拥挤；accordion 自然滚动）。
47. 预实现检查：所有 tab/accordion 内容在页面加载时在 DOM（点击时无 AJAX）。
48. 预实现检查：主要排名内容可见，不隐藏。
49. 预实现检查：第一个 tab/accordion 默认展开。
50. 预实现检查：使用 `<details>`/`<summary>` 或等效服务端渲染 HTML。
51. 预实现检查：头部描述性；关键词自然。
52. 预实现检查：tabs 共享一个主题（避免信号稀释）；若不同主题，考虑单独页面。
53. 预实现检查：FAQ 的 FAQPage schema 与内容匹配。

适用边界 · 注意事项

• 主要、关键词关键内容不要默认隐藏；应放在首屏可见区域。
• 同一页的水平标签若承载不同主题（如 Service A、Service B、Portfolio、Blog），不要用标签页，应为每个主题拆独立 URL。
• 不要只在用户点击后通过 AJAX/fetch 懒加载标签内容；爬虫不会点击，内容不会被索引。