tab-accordion

$28

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

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. See rendering-strategies for SSR, SSG, CSR and crawler visibility.

Horizontal Tabs: More Tabs, More Content?

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.

Implementation

Native HTML (Recommended)

Use <details> and <summary>—no JavaScript required; accessible; crawlable.

<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)

JavaScript-Dependent Tabs

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. See rendering-strategies.

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

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

Use Cases

Use case

Format

Layout

Notes

FAQ

Accordion

Vertical

FAQPage schema; first Q expanded; see faq-page-generator

How-to steps

Tabs

Horizontal

Numbered “Step n” or descriptive tab titles; sequential flow; same step count as section H2 if the H2 uses a number (howto-section-generator)

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

Schema & Rich Results

• 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 howto-section-generator, schema-markup, featured-snippet

• Other tabs: No specific schema; ensure semantic HTML (headings, structure)

UX & Accessibility

• 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)

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

Related Skills

• faq-page-generator: FAQ structure, answer length, schema; accordion is common FAQ UI

• howto-section-generator: HowTo section; steps in tabs vs FAQ; JSON-LD alignment

• featured-snippet: Answer-first, H2/H3; content in accordions can be extracted

• schema-markup: FAQPage for FAQ accordions; HowTo for step-by-step tabs

• content-strategy: Pillar/cluster architecture; when to use separate pages vs tabs

• toc-generator: Collapsible TOC; similar disclosure pattern

• content-optimization: Word count, structure, multimedia in expandable sections

• rendering-strategies: SSR, SSG, CSR; content in initial HTML for crawlers