Components

Paragraph

Body text as rich text runs: bold, italic, inline code and links.

Paragraph block

Quick answer: Google finds pages by crawling, stores what it understands in an index, and ranks the indexed pages for each query by how well they answer it. Most of what you can influence happens in the last step.

The block

As the API returns it, from the example article:

json

{  "type": "paragraph",  "content": [    {      "text": "Quick answer: ",      "bold": true    },    {      "text": "Google finds pages by crawling, stores what it understands in an index, and ranks the indexed pages for each query by how well they answer it. "    },    {      "text": "Most of what you can influence happens in the last step.",      "italic": true    }  ],  "id": "paragraph-1"}

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 { ParagraphBlock } from "@/lib/seoforsaas/types";const DefaultParagraph = defaultComponents.paragraph;function MyParagraph({ block }: { block: ParagraphBlock }) {  return (    <div className="my-paragraph">      <DefaultParagraph block={block} />    </div>  );}<Article blocks={article.blocks} components={{ paragraph: MyParagraph }} />

Notes

rel: Set on every link to a research source, currently nofollow ugc noopener. Pass it to the anchor unchanged.
Never render runs as HTML. Every run is text.