# 组件：选项卡和手风琴指南选项卡和手风琴实施用于组织内容而无需过多的垂直空间。两种布局模式：**垂直手风琴**（常见问题解答样式，堆叠）和**水平选项卡**（操作方法样式，并排）。两者都通过减少滚动来改善用户体验； SEO 影响取决于实施和内容放置。 **调用时**：**首次使用**时，如果有帮助，请用 1-2 句话开头说明该技能涵盖的内容及其重要性，然后提供主要输出。在 **后续使用** 或当用户要求跳过时，直接转到主输出。 ## 布局模式图案|布局|最适合 |示例 ---|---|---|--- **立式手风琴** |堆叠；一次展开/折叠一个 |常见问题解答、问答、长列表、异议处理 | “我怎么回去？” → 回答如下 **水平选项卡** |并排标签；一个面板可见 |操作步骤、产品规格、定价等级、比较 | “步骤 1 | 步骤 2 | 步骤 3” **移动**：垂直手风琴在小屏幕上运行良好（自然滚动）。水平选项卡可能会让人感觉局促——考虑一下手风琴、下拉菜单或滚动的全宽选项卡栏。 ## SEO：友好吗？ **谷歌的立场**：谷歌对选项卡和手风琴内的内容进行索引和排名；隐藏内容获得全部权重（自 2016 年移动优先索引以来得到确认）。 Gary Illyes：“我们对内容进行索引，排名时充分考虑其权重。” **实际的细微差别**：一些测试显示，在排名中始终可见的内容优于隐藏内容。为**次要**内容保留选项卡/折叠式面板；将主要的、关键字关键的内容放在可见区域。内容类型 |安置 ---|--- **主要/注重排名** |折叠上方可见；不隐藏 **次要/辅助** |可接受制表符、手风琴 **常见问题解答** |手风琴可以；第一项默认展开；请参阅 **常见问题解答页面生成器** ### 索引要求 **页面加载时内容必须位于 DOM 中。** Google 不会模拟用户点击；它无法“单击”选项卡来发现内容。实施 |索引？ ---|--- 加载时所有选项卡内容均采用 HTML 格式 | ✅ 是的通过选项卡上的 AJAX 加载的内容单击 | ❌ 没有 **建议** ：服务器渲染初始 HTML 中的所有选项卡内容；仅使用 CSS/JS 来显示/隐藏。首选 `

`/`

` 或等效的服务器渲染标记。 ### 水平选项卡：更多选项卡，更多内容？ **技术上**：是的 - 如果加载时所有内容都在 DOM 中，则更多选项卡 = 更多可索引内容。移动优先索引充分重视 HTML 中的选项卡式内容。 **战略上**：并非总是如此。当许多选项卡=一页上有许多不同主题时，**信号稀释**就会发生。 Google 可能很难理解该页面应该针对哪个查询进行排名；话题权威和关键词焦点分散。场景 |使用选项卡？ |另类 ---|---|--- **相同主题**（操作方法步骤 1/2/3；产品规格：尺寸、材料、运输）| ✅ 是的 | — **不同主题**（服务 A、服务 B、作品集、博客）| ❌ 否 |每个主题有单独的 URL；请参阅支柱/集群的**内容策略** **当许多水平选项卡起作用时**：所有选项卡在语义上都与一个查询相关（例如，一项操作方法、一项产品）。 **何时使用单独的页面**：每个选项卡都是一个独特的主题，值得拥有自己的 URL、爬网和排名机会。 ## 实施 ### 原生 HTML（推荐）使用“

”和“

”——无需 JavaScript；无障碍；可爬行。 <详情公开>

第一个问题（默认展开）

在此处回答内容。

<详情>

第二个问题

在此处回答内容。

* **第一个选项卡/手风琴** : 添加 `open` 属性，使其默认展开 * **`

`**：必须是 `

` 的第一个子级；充当切换开关 * **渐进增强** ：使用 CSS 样式；仅在需要时添加 JS（例如，当一个打开时关闭其他） ### JavaScript 相关选项卡如果使用纯 JS 选项卡：**确保所有选项卡内容在页面加载时都位于 DOM 中**，而不是在单击时通过 AJAX 加载。 Google 不会模拟标签点击。首选 `

`/`

` 或服务器渲染的 HTML。 ### 避免 * 仅在用户点击后加载内容（AJAX，通过获取延迟加载）——爬虫不会对其进行索引 * 主要内容的“显示：无”或“可见性：隐藏” - Google 可能会采取不同的处理方式 * 一页上有许多不相关主题的选项卡——导致信号稀释；使用单独的 URL 代替 ## 内容最佳实践实践|目的 ---|--- **第一项已展开** |确保主要内容在加载时可见；更适合 SEO 和 UX **描述性标题** | `

`/选项卡标签应清楚地描述内容；自然地包含关键字 **逻辑结构** | H2/H3 部分；支持片段提取；请参阅**精选片段** **先回答** | FAQ：40-60字直接回答；然后详细说明；请参阅 **常见问题解答页面生成器** ## 用例使用案例 |格式|布局|注释 ---|---|---|--- **常见问题** |手风琴 |垂直| FAQ页面架构；第一个 Q 扩展；请参阅 **常见问题解答页面生成器** **操作步骤** |标签 |卧式|步骤1、步骤2、步骤3；顺序流 **产品规格** |标签 |卧式|尺寸、材料、运输——次要于英雄 **长指南** |手风琴 |垂直|可折叠部分；请参阅 **toc 生成器** **定价等级** |标签 |卧式|比较计划；主要 CTA 可见 **异议处理** |手风琴 |垂直| “X怎么样？”——支持转换 ## 架构和丰富结果 * **常见问题解答（垂直手风琴）** ：FAQPage JSON-LD；架构必须与页面内容完全匹配；请参阅 **架构标记** 、**常见问题解答页面生成器** * **操作方法（水平选项卡）**：分步内容的操作方法架构；请参阅 **架构标记** 、**特色片段** * **其他选项卡** ：没有特定架构；确保 HTML 语义（标题、结构） ## 用户体验和辅助功能 * **视觉指示器**：箭头、加号/减号或 V 形来显示展开/折叠状态 * **键盘** ：`

`/`

` 本机键盘可访问 * **Core Web Vitals** ：扩展时避免布局移位（CLS）；预留空间或顺利制作动画 * **移动**：触摸目标≥44×44px；在小屏幕上，垂直手风琴通常比水平选项卡更好（选项卡可能会狭窄；手风琴自然滚动） ## 实施前检查清单 * 页面加载时 DOM 中的所有选项卡/手风琴内容（点击时无 AJAX） * 主要排名内容可见，不隐藏 * 第一个选项卡/手风琴默认展开 * 使用 `

`/`

` 或等效的服务器渲染 HTML * 标题描述性；关键词自然 * 选项卡共享一个主题（避免信号稀释）；如果主题不同，请考虑单独的页面 * 对于常见问题解答：FAQPage 架构与内容匹配 ## 相关技能 * **faq-page-generator** ：常见问题解答结构、答案长度、模式；手风琴是常见的常见问题解答 UI * **特色片段**：答案优先，H2/H3；可以提取手风琴中的内容 * **模式标记** ：常见问题解答手风琴的常见问题解答页面；分步选项卡的操作方法 * **内容策略**：支柱/集群架构；何时使用单独的页面和选项卡 * **目录生成器** ：可折叠目录；类似的披露模式 * **内容优化**：可扩展部分中的字数、结构、多媒体

标签手风琴

包含技能