docs

HowTo

Add HowTo structured data to your Sanity-powered site. Surface step-by-step instructions as rich results in Google Search and AI overviews.

About HowTo

HowTo schema creates step-by-step rich results in Google Search, making your tutorial content more visible and actionable. These structured guides are also frequently cited by AI search engines when answering procedural queries.

Fields

Field	Type	Required	Description
`name`	string	✓	The title of the how-to guide.
`description`	string	—	A brief summary of what the how-to guide covers.
`step`	array of objects	✓	Ordered list of HowToStep objects, each with a name and text.
`step[].name`	string	✓	The title or label for this step.
`step[].text`	string	✓	The detailed instructions for this step.

Plugin Registration

sanity.config.ts

import { defineConfig } from "sanity";
import { schemaOrgHowToPlugin } from "sanity-plugin-seofields/schema";

export default defineConfig({
  // ... your project config
  plugins: [
    schemaOrgHowToPlugin(),
  ],
});

Schema Usage

Add theschemaOrgHowTo field to any document schema:

schemas/page.ts

import { defineField, defineType } from 'sanity'

export default defineType({
  name: 'page',
  title: 'Page',
  type: 'document',
  fields: [
    // ... your other fields
    defineField({
      name: 'schemaOrgHowTo',
      title: 'How-To Schema',
      type: 'schemaOrgHowTo',
    }),
  ],
})

GROQ Query

GROQ query

const query = groq`*[_type == "tutorial"][0]{
  "howTo": schemaOrgHowTo {
    name,
    description,
    step[] {
      name,
      text
    }
  }
}`;

Next.js Component

app/layout.tsx

import { HowToSchema } from "sanity-plugin-seofields/react";

export default function Layout({ children }: { children: React.ReactNode }) {
  // Fetch your HowTo data from Sanity
  const tutorial = await sanityClient.fetch(query);

  return (
    <html lang="en">
      <body>
        <HowToSchema data={tutorial.howTo} />
        {children}
      </body>
    </html>
  );
}

JSON-LD Output

Generated JSON-LD

{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "How to set up sanity-plugin-seofields",
  "description": "A step-by-step guide to adding structured data to your Sanity project.",
  "step": [
    {
      "@type": "HowToStep",
      "name": "Step 1: Install the plugin",
      "text": "Run npm install sanity-plugin-seofields in your project directory."
    },
    {
      "@type": "HowToStep",
      "name": "Step 2: Register the plugin",
      "text": "Add schemaOrgHowToPlugin() to your sanity.config.ts plugins array."
    },
    {
      "@type": "HowToStep",
      "name": "Step 3: Add the component",
      "text": "Import HowToSchema and pass your fetched data as a prop."
    }
  ]
}

08 / 24

←

FAQPage

BreadcrumbList

→

{schema.org}

Was this page helpful?