Skip to content

component

SEO FAQ Accordion

By Isaac Yi

Details

Summary

Search, tabs, Google FAQ schema.

Description

Most FAQ accordions on Framer are purely visual — clean animation, but no structure Google can read. Getting the expandable rich-result snippet in search (the one listing each question under your link) requires FAQPage JSON-LD schema markup, and most accordions on the marketplace skip it entirely or charge premium-tier pricing for it. FAQ Pro bundles all three things a real FAQ section needs — live search, category organization, and auto-generated schema — into one lightweight, dependency-free component. What you get: — Auto-generated FAQPage JSON-LD schema, toggle on/off, always in sync with your content — Live search across questions and answers, case-insensitive, with a clean empty state — Category tabs auto-extracted from your items — set once, no manual tab wiring, and tabs auto-hide with only one category — Single-open or multi-open accordion modes, smooth height animation with zero layout shift — Full keyboard and screen-reader support — native buttons, aria-expanded, aria-controls — Light/dark theme, single accent color, cross-fade transitions on every state change Built for SaaS help centers, pricing pages, and marketing sites that want their FAQ to actually show up in Google's rich results — without upgrading to a premium-tier accordion to get there.

Introduction

Search, tabs, Google FAQ schema.

Rank history

Daily rank per list, from the first snapshot — lower is better.

12001400157538/148/228/309/79/15
  • All · #5753