# FAQ

Questions and answers, rendered as native `details` elements.



## The block

As the API returns it, from the [example article](https://api.seoforsaas.dev/public/v1/fixtures/article):

```json
{
  "type": "faq",
  "items": [
    {
      "question": "How long does it take for a new page to appear in Google?",
      "answer": [
        {
          "text": "Anywhere from a few days to a few weeks. On our own sites the median is three days to the first impression."
        }
      ]
    },
    {
      "question": "Does submitting a sitemap guarantee indexing?",
      "answer": [
        {
          "text": "No. It helps Google find the URL; whether it is indexed depends on the page."
        }
      ]
    }
  ],
  "id": "faq-17"
}
```

## Replace it

Pass your own component for the type. It receives the block, typed, and every other type keeps its default. The default stays available, so you can wrap it instead of starting over:

```tsx
import { Article, defaultComponents } from "@/components/seoforsaas/article";
import type { FaqBlock } from "@/lib/seoforsaas/types";

const DefaultFaq = defaultComponents.faq;

function MyFaq({ block }: { block: FaqBlock }) {
  return (
    <div className="my-faq">
      <DefaultFaq block={block} />
    </div>
  );
}

<Article blocks={article.blocks} components={{ faq: MyFaq }} />
```

## Notes

- Works without JavaScript, and the answers stay in the HTML.
- The same questions are in `seo.jsonLd` as an FAQPage. Google shows FAQ rich results only for a few kinds of sites, so treat the markup as structure other tools can read, not as a promise of a rich result.