FAQ, How-to and Table of contents blocks

Add FAQ, How-to and Table of contents blocks that output FAQPage, HowTo and navigation schema, with no JavaScript and a tiny stylesheet.

Updated 4 min read
On this page

RankKit SEO adds three blocks to the block editor that write visible content and the matching schema at the same time: FAQ (RankKit SEO), How-to (RankKit SEO) and Table of contents (RankKit SEO). You fill in the block once, and the page gets both the HTML your visitors read and the structured data search engines read.

The blocks render on the server. There is no front-end JavaScript, and the small stylesheet loads only on pages that use one of them.

Add a block

  1. In the block editor, click the + inserter (or type / in an empty paragraph).
  2. Search for FAQ, How-to or Table of contents and pick the block with "(RankKit SEO)" in its name.
  3. Fill it in. Block settings are in the block sidebar on the right.

FAQ block

"Questions and answers, output with FAQPage schema."

  • Type each Question and its answer, then click Add question for the next one. Write answers of 1 to 3 sentences that stand on their own: that is how Google and AI assistants quote them.
  • In FAQ settings, choose a Layout:
    • Collapsible (details/summary, no JavaScript), the default. Each question opens and closes like an accordion.
    • Headings and paragraphs. Questions show as headings. Choose the Question heading level: H2, H3 (default), H4 or P.

Schema: the page node becomes ["WebPage", "FAQPage"] with each question and answer as mainEntity. Questions with an empty answer are left out.

Tip Core WordPress Details blocks count as FAQ too: the summary is the question and the content is the answer. If you already use Details blocks for FAQs, you don't need to rebuild them.

How-to block

"Step-by-step instructions, output with HowTo schema."

Field Notes
Title Shown as a heading. Falls back to the post title in the schema.
Short introduction Optional description.
Total time (minutes) Shown as "Total time" on the page and converted to an ISO 8601 duration in the schema.
Supplies (one per line) Listed on the page and output as HowToSupply.
Tools (one per line) Listed on the page and output as HowToTool.
Steps Each step has a title, What to do in this step and an optional image. Click Add step for more.

The block outputs nothing until it has at least one step. Each step gets an anchor (#howto-step-1, #howto-step-2…) that the schema links to.

Table of contents block

"Links to the headings on this page, built when the page renders. No JavaScript."

Setting Default What it does
Title Table of contents The heading above the list.
Include headings H2, H3 Which heading levels to list.
Numbered list Off A numbered list instead of bullets.

The list is built from the rendered page, so it includes headings from blocks, classic content and page builders. Headings without an id get one automatically. The schema adds an ItemList of SiteNavigationElement entries pointing at each heading.

Block attributes

For developers who insert the blocks in templates, patterns or with code:

Block Name Attributes
FAQ (RankKit SEO) speedrank/faq items (array of {question, answer}), layout (details or plain, default details), headingTag (default h3)
How-to (RankKit SEO) speedrank/howto name, description, totalTime (minutes, integer), supplies and tools (one per line), steps (array of {title, text, image})
Table of contents (RankKit SEO) speedrank/toc title, levels (default [2, 3]), ordered (default false)

All three support an HTML anchor (Advanced → HTML anchor). Example:

<!-- wp:speedrank/faq {"layout":"plain","headingTag":"h3","items":[{"question":"Do you ship abroad?","answer":"Yes, to 30 countries."}]} /-->

Styling

The blocks use a small inline stylesheet registered as speedrank-blocks. WordPress loads it only on pages where one of the blocks (or the matching Elementor widget) is used, so other pages carry no extra CSS. Style the blocks from your theme with these classes:

Block Classes
FAQ .speedrank-faq, .speedrank-faq__item, .speedrank-faq__q, .speedrank-faq__a
How-to .speedrank-howto, .speedrank-howto__name, .speedrank-howto__meta, .speedrank-howto__steps, .speedrank-howto__step
Table of contents .speedrank-toc, .speedrank-toc__title

Using Elementor?

The same three are available as Elementor widgets in the RankKit SEO widget category, with the same output and schema. See Elementor.

FAQ

Do I also need to add FAQ schema in the Schema manager?

No. The block adds the schema. If you add an FAQ item in the Schema section of the RankKit SEO panel (the Schema manager) as well, it is skipped, so the questions are never output twice. The Schema section reminds you of this: "FAQ, How-to and table-of-contents schema also come from the RankKit SEO blocks in your content."

To see the final JSON-LD of the page, including what the blocks add, save the post, click Validate Current in the Schema section, then Show final JSON-LD. See Check and import schema.

Will Google show my FAQ as a rich result?

Google currently shows FAQ rich results only for a small set of authoritative government and health sites. The schema still helps search engines and AI assistants understand your questions and answers.

Can I use more than one Table of contents block?

You can, but one per page is what readers expect. The schema uses the settings of the first one.

Was this page helpful?

Still need help?

Email us with your WordPress and RankKit SEO versions and what you tried. Pro customers get priority replies.

Contact support