FAQs that Google, Claude, ChatGPT, and other crawlers can read

FAQs that Google, Claude, ChatGPT, and other crawlers can read

FAQs that Google, Claude, ChatGPT, and other crawlers can read

An FAQ component that works as an accordion or a plain list, and adds structured data + accessibility + markdown visibility

An FAQ component that works as an accordion or a plain list, and adds structured data + accessibility + markdown visibility

An FAQ component that works as an accordion or a plain list, and adds structured data + accessibility + markdown visibility

What your users see

What your users see

Pick a Style: Cards for separate items, Joined for one block with dividers, or Minimal for simple lines. The Item group sets fill, hover and open colors, border, radius, padding and shadows.

Chevron, Plus / Minus, Plus / Close, Arrow or none. Place the icon on the left or right, adjust its size and stroke, and add a circular background that changes color when open.

Set Prefix to 01 for numbered questions, or Q / A to label questions and answers. Prefix color is set in Text Colors.

Each question is a real button that announces whether it is open. Visitors can use Tab, the arrow keys, Home and End to move between questions, with a focus ring you can recolor.

SEO Schema adds FAQPage structured data. Closed answers stay in the page so search engines can still read them. Turn it off if another FAQ on the same page already adds schema.

What crawlers see

What crawlers see

JSON-LD
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "How do I change the look?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Pick a Style: Cards for separate items, Joined for one block with dividers, or Minimal for simple lines. The Item group sets fill, hover and open colors, border, radius, padding and shadows."
}
},
{
"@type": "Question",
"name": "Which icons are available?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Chevron, Plus / Minus, Plus / Close, Arrow or none. Place the icon on the left or right, adjust its size and stroke, and add a circular background that changes color when open."
}
},
{
"@type": "Question",
"name": "Can I number the questions?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Set Prefix to 01 for numbered questions, or Q / A to label questions and answers. Prefix color is set in Text Colors."
}
},
{
"@type": "Question",
"name": "Is it accessible?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Each question is a real button that announces whether it is open. Visitors can use Tab, the arrow keys, Home and End to move between questions, with a focus ring you can recolor."
}
},
{
"@type": "Question",
"name": "How does it help SEO?",
"acceptedAnswer": {
"@type": "Answer",
"text": "SEO Schema adds FAQPage structured data. Closed answers stay in the page so search engines can still read them. Turn it off if another FAQ on the same page already adds schema."
}
}
]
}

Every setting, right in the properties panel

Every setting, right in the properties panel

Every setting, right in the properties panel

Every instance can be tuned from the properties panel. Settings marked accordion only are hidden when Display is set to List.


  • Content: choose Items or Rich Text as the source

    • Items: type each question and its answer; a blank line starts a new paragraph

    • Rich Text: bind a CMS field; headings become questions, everything below becomes the answer

  • Display: Accordion or List

  • Style: Cards, Joined or Minimal (accordion only)

  • Allow Multiple: let several answers stay open at once (accordion only)

  • Initially Open: None, First or All (accordion only)

  • Prefix: None, 01 numbering, or Q / A labels

  • Answer Divider: a line between the question and its answer (accordion only)

  • Item Gap: space between items

  • Q → A Spacing: space between a question and its answer

  • Paragraph Gap: space between paragraphs inside an answer

  • Question Font and Answer Font: family, weight, size, letter spacing and line height

  • Text Colors

    • Question

    • Question Open

    • Answer

    • Prefix

    • Links

    • Question Tag: H2, H3, H4 or P

  • Item (accordion only)

    • Fill, Hover Fill and Open Fill

    • Border and Open Border

    • Radius and Padding

    • Shadow and Open Shadow

  • Icon (accordion only)

    • Type: Chevron, Plus / Minus, Plus / Close, Arrow or None

    • Position: Left or Right

    • Size and Stroke

    • Color and Open Color

    • Background, with Fill, Open Fill and Fill Size

  • Focus Ring: color of the keyboard focus outline (accordion only)

  • Animation: the open and close transition (accordion only)

  • SEO Schema: turn FAQPage structured data on or off

Create a free website with Framer, the website builder loved by startups, designers and agencies.