# Heading

A section heading, level 2 to 4. The article title is not a block: render it as the page's h1.



## The block

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

```json
{
  "type": "heading",
  "level": 2,
  "text": "Crawling, indexing, ranking",
  "id": "crawling-indexing-ranking"
}
```

## 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 { HeadingBlock } from "@/lib/seoforsaas/types";

const DefaultHeading = defaultComponents.heading;

function MyHeading({ block }: { block: HeadingBlock }) {
  return (
    <div className="my-heading">
      <DefaultHeading block={block} />
    </div>
  );
}

<Article blocks={article.blocks} components={{ heading: MyHeading }} />
```

## Notes

- `id` is derived from the heading text and unique within the article: use it for anchors and a table of contents. A rewrite that changes the heading changes its id.
- Levels start at 2 because your page already has the h1.