tab-accordion

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Components: Tab & Accordion

组件：Tab & Accordion

Guides tab and accordion implementation for organizing content without excessive vertical space. Two layout patterns: vertical accordion (FAQ-style, stacked) and horizontal tabs (how-to style, side-by-side). Both improve UX by reducing scroll; SEO impact depends on implementation and content placement.

When invoking: On first use, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.

指导Tab和Accordion的实现，用于在不占用过多垂直空间的前提下组织内容。包含两种布局模式：垂直Accordion（FAQ样式，堆叠排布）和水平Tab（操作指南样式，并排排布）。两者都能减少滚动长度，提升用户体验；SEO影响取决于实现方式和内容摆放位置。

调用规则：首次使用时，如果有帮助，可以先用1-2句话介绍本技能覆盖的范围和价值，再提供核心输出。后续调用或用户要求跳过介绍时，直接输出核心内容即可。

Layout Patterns

布局模式

Pattern	Layout	Best for	Example
Vertical accordion	Stacked; expand/collapse one at a time	FAQ, Q&A, long lists, objection handling	"How do I return?" → answer below
Horizontal tabs	Side-by-side labels; one panel visible	How-to steps, product specs, pricing tiers, comparisons	"Step 1 \| Step 2 \| Step 3"

Mobile: Vertical accordion works well on small screens (natural scroll). Horizontal tabs can feel cramped—consider accordion, dropdown, or full-width tab bar that scrolls.

模式	布局	适用场景	示例
垂直Accordion	堆叠排布，同一时间仅可展开一项	FAQ、问答、长列表、异议处理	「我如何退货？」 → 下方展示答案
水平Tab	标签并排排布，同一时间仅展示一个面板	操作步骤、产品规格、定价档位、对比内容	「步骤1

移动端适配：垂直Accordion在小屏设备上表现良好（符合自然滚动习惯）。水平Tab会显得拥挤，可考虑替换为Accordion、下拉菜单，或者支持横向滚动的通宽标签栏。

SEO: Is It Friendly?

SEO：是否友好？

Google's position: Google indexes and ranks content inside tabs and accordions fully; hidden content receives full weight (confirmed since 2016 mobile-first indexing). Gary Illyes: "we index the content, its weight is fully considered for ranking."

Practical nuance: Some tests show always-visible content outperforms hidden content in rankings. Reserve tabs/accordions for secondary content; place primary, keyword-critical content in visible areas.

Content type	Placement
Primary / ranking-focused	Visible above fold; not hidden
Secondary / supporting	Tabs, accordions acceptable
FAQ answers	Accordion OK; first item expanded by default; see faq-page-generator

Google官方立场：Google会完整索引和排序Tab与Accordion内的内容；隐藏内容会被计入全部权重（自2016年移动优先索引起已确认）。Gary Illyes表示：「我们会索引这些内容，其权重会被完全纳入排名考量。」

实际注意事项：部分测试显示，始终可见的内容排名表现优于隐藏内容。建议将Tab/Accordion用于二级内容；将核心、关键词相关的重点内容放在可见区域。

内容类型	摆放位置
核心/排名导向内容	首屏可见区域，不隐藏
二级/辅助内容	可放入Tab、Accordion
FAQ答案	可放入Accordion，默认展开第一项；参考 faq-page-generator

Indexing Requirements

索引要求

Content must be in the DOM on page load. Google does not simulate user clicks; it cannot "click" tabs to discover content.

Implementation	Indexed?
All tab content in HTML at load	✅ Yes
Content loaded via AJAX on tab click	❌ No

Recommendation: Server-render all tab content in the initial HTML; use CSS/JS only to show/hide. Prefer

<details>

<summary>

or equivalent server-rendered markup.

内容必须在页面加载时就存在于DOM中。 Google不会模拟用户点击行为，无法通过「点击」Tab来发现内容。

实现方式	是否可被索引？
所有Tab内容在页面加载时已存在于HTML中	✅ 是
点击Tab时通过AJAX加载内容	❌ 否

推荐方案：在初始HTML中服务端渲染所有Tab内容；仅使用CSS/JS控制展示/隐藏。优先使用

<details>

<summary>

或等效的服务端渲染标记。

Horizontal Tabs: More Tabs, More Content?

水平Tab：标签越多，内容越多越好？

Technically: Yes—if all content is in the DOM at load, more tabs = more indexable content. Mobile-first indexing gives full weight to tabbed content in HTML.

Strategically: Not always. Signal dilution occurs when many tabs = many different topics on one page. Google may struggle to understand which query the page should rank for; topical authority and keyword focus get spread thin.

Scenario	Use tabs?	Alternative
Same topic (How-to Step 1/2/3; product specs: dimensions, materials, shipping)	✅ Yes	—
Different topics (Service A, Service B, Portfolio, Blog)	❌ No	Separate URLs per topic; see content-strategy for pillar/cluster

When many horizontal tabs work: All tabs semantically related to one query (e.g., one how-to, one product). When to use separate pages: Each tab is a distinct topic deserving its own URL, crawl, and ranking opportunity.

技术层面：是的——如果所有内容在页面加载时都存在于DOM中，更多标签等于更多可索引内容。移动优先索引会为HTML中的Tab内容赋予完整权重。

策略层面：并非总是如此。如果大量Tab对应多个不同主题，会出现信号稀释问题。Google可能难以判断页面应该匹配哪些搜索query，主题权威性和关键词聚焦度会被分散。

场景	是否使用Tab？	替代方案
同一主题（操作步骤1/2/3；产品规格：尺寸、材质、配送）	✅ 是	—
不同主题（服务A、服务B、作品集、博客）	❌ 否	每个主题使用独立URL；参考 content-strategy 了解支柱/集群架构

适合使用多水平Tab的场景：所有Tab都语义上关联同一个搜索query（例如单篇操作指南、单个产品）。适合使用独立页面的场景：每个Tab对应独立主题，需要独立的URL、爬取和排名机会。

Implementation

实现方案

Native HTML (Recommended)

原生HTML（推荐）

Use

<details>

and

<summary>

—no JavaScript required; accessible; crawlable.

html

<details open>
  <summary>First question (expanded by default)</summary>
  <p>Answer content here.</p>
</details>
<details>
  <summary>Second question</summary>
  <p>Answer content here.</p>
</details>

First tab/accordion: Add
```
open
```
attribute so it's expanded by default
<summary>
: Must be first child of
```
<details>
```
; acts as toggle
Progressive enhancement: Style with CSS; add JS only if needed (e.g., close others when one opens)

使用

<details>

和

<summary>

——无需JavaScript；无障碍友好；可被爬虫抓取。

html

<details open>
  <summary>First question (expanded by default)</summary>
  <p>Answer content here.</p>
</details>
<details>
  <summary>Second question</summary>
  <p>Answer content here.</p>
</details>

第一个Tab/Accordion：添加
```
open
```
属性，默认展开
<summary>
：必须是
```
<details>
```
的第一个子元素，作为切换触发器
渐进增强：使用CSS样式控制；仅在需要时添加JS（例如展开一项时自动关闭其他项）

JavaScript-Dependent Tabs

依赖JavaScript的Tab

If using JS-only tabs: ensure all tab content is in the DOM at page load, not loaded via AJAX on click. Google does not simulate tab clicks. Prefer

<details>

<summary>

or server-rendered HTML.

如果使用纯JS实现的Tab：确保所有Tab内容在页面加载时就存在于DOM中，不要在点击时通过AJAX加载。Google不会模拟Tab点击行为。优先使用

<details>

<summary>

或服务端渲染的HTML。

Avoid

禁用方案

Content loaded only after user click (AJAX, lazy-loaded via fetch)—crawlers will not index it
```
display: none
```
or
```
visibility: hidden
```
for primary content—Google may treat differently
Many tabs with unrelated topics on one page—causes signal dilution; use separate URLs instead

仅在用户点击后加载内容（AJAX、fetch懒加载）——爬虫无法索引这部分内容
对核心内容使用
```
display: none
```
或
```
visibility: hidden
```
——Google可能会区别对待
单页面内放置大量关联不同主题的Tab——会导致信号稀释，改用独立URL

Content Best Practices

内容最佳实践

Practice	Purpose
First item expanded	Ensures primary content visible on load; better for SEO and UX
Descriptive headers	`<summary>` / tab labels should clearly describe content; include keywords naturally
Logical structure	H2/H3 for sections; supports snippet extraction; see featured-snippet
Answer-first	For FAQ: 40–60 words direct answer; then detail; see faq-page-generator

实践	目的
默认展开第一项	确保核心内容加载时可见，提升SEO和UX表现
描述性标题	`<summary>` /Tab标签应清晰描述内容，自然植入关键词
逻辑结构	区块使用H2/H3标题，支持摘要提取；参考 featured-snippet
答案优先	FAQ场景下，先给出40-60字的直接答案，再补充细节；参考 faq-page-generator

Use Cases

使用场景

Use case	Format	Layout	Notes
FAQ	Accordion	Vertical	FAQPage schema; first Q expanded; see faq-page-generator
How-to steps	Tabs	Horizontal	Step 1, Step 2, Step 3; sequential flow
Product specs	Tabs	Horizontal	Dimensions, materials, shipping—secondary to hero
Long guides	Accordion	Vertical	Collapsible sections; see toc-generator
Pricing tiers	Tabs	Horizontal	Compare plans; primary CTA visible
Objection handling	Accordion	Vertical	"What about X?"—supporting conversion

场景	格式	布局	注意事项
FAQ	Accordion	垂直	搭配FAQPage schema；默认展开第一个问题；参考 faq-page-generator
操作步骤	Tab	水平	步骤1、步骤2、步骤3，符合顺序流程
产品规格	Tab	水平	尺寸、材质、配送，属于首屏主内容的辅助信息
长指南	Accordion	垂直	可折叠区块；参考 toc-generator
定价档位	Tab	水平	对比方案，核心CTA保持可见
异议处理	Accordion	垂直	「X相关问题怎么解决？」，辅助转化

Schema & Rich Results

Schema与富摘要

FAQ (vertical accordion): FAQPage JSON-LD; schema must match on-page content exactly; see schema-markup, faq-page-generator
How-to (horizontal tabs): HowTo schema for step-by-step content; see schema-markup, featured-snippet
Other tabs: No specific schema; ensure semantic HTML (headings, structure)

FAQ（垂直Accordion）：使用FAQPage JSON-LD；schema必须与页面内容完全匹配；参考 schema-markup、faq-page-generator
操作指南（水平Tab）：步骤类内容使用HowTo schema；参考 schema-markup、featured-snippet
其他Tab：无专用schema，确保使用语义化HTML（标题、结构）即可

UX & Accessibility

UX与无障碍

Visual indicator: Arrow, plus/minus, or chevron to show expand/collapse state
Keyboard:
```
<details>
```
/
```
<summary>
```
natively keyboard-accessible
Core Web Vitals: Avoid layout shift (CLS) when expanding; reserve space or animate smoothly
Mobile: Touch targets ≥44×44px; vertical accordion often better than horizontal tabs on small screens (tabs can be cramped; accordion scrolls naturally)

视觉指示：使用箭头、加减号、chevron标识展开/收起状态
键盘操作：
```
<details>
```
/
```
<summary>
```
原生支持键盘无障碍访问
Core Web Vitals：展开时避免布局偏移（CLS），提前预留空间或使用平滑动画
移动端适配：触摸目标尺寸≥44×44px；小屏设备上垂直Accordion通常优于水平Tab（Tab容易拥挤，Accordion符合自然滚动习惯）

Pre-Implementation Checklist

实现前检查清单

All tab/accordion content in DOM at page load (no AJAX on click)
Primary ranking content visible, not hidden
First tab/accordion expanded by default
Using
```
<details>
```
/
```
<summary>
```
or equivalent server-rendered HTML
Headers descriptive; keywords natural
Tabs share one topic (avoid signal dilution); if different topics, consider separate pages
For FAQ: FAQPage schema matches content

所有Tab/Accordion内容在页面加载时已存在于DOM中（点击时不加载AJAX内容）
核心排名内容可见，不隐藏
默认展开第一个Tab/Accordion
使用
```
<details>
```
/
```
<summary>
```
或等效的服务端渲染HTML
标题描述清晰，关键词植入自然
所有Tab对应同一主题（避免信号稀释）；如果是不同主题，考虑使用独立页面
FAQ场景下，FAQPage schema与内容匹配