Sanity SEO Fields Plugin

sanity-plugin-seofields

SEO fields, social metadata, Schema.org JSON-LD, AI generation, and SEO health checks for Sanity Studio.

Documentation · Quick start · Configuration · AI · Schema.org · CLI

Features

• Complete seoFields object type for title, description, canonical URL, keywords, meta image, robots, Open Graph, X/Twitter, hreflang, and custom meta tags
• Live SEO preview inside Sanity Studio
• Optional SEO Health Dashboard for document audits and CSV/JSON exports
• AI-assisted SEO copy generation with server-side proxy helpers
• Schema.org JSON-LD schema types and React/Next.js render helpers
• Framework-neutral head helpers for Next.js, Astro, Nuxt, Vue, SvelteKit, Remix, and custom renderers
• CLI for setup, diagnostics, reports, and exports

Installation

npm install sanity-plugin-seofields

Peer dependencies:

sanity          ^3 || ^4 || ^5 || ^6
@sanity/icons   >=3
react           ^18 || ^19

Sanity Studio 3, 4, 5 and 6 are all supported. Icons are rendered through the root <Icon symbol="…" /> API from @sanity/icons, the one entry point shared by icons v3, v4 and v5 — so the plugin works on Studio 6 (which ships @sanity/icons@5, where the named icon exports such as ApiIcon were removed) without dropping older Studios.

Quick Start

Register the plugin in sanity.config.ts:

import {defineConfig} from 'sanity'
import seofields from 'sanity-plugin-seofields'

export default defineConfig({
  // ...
  plugins: [seofields()],
})

Add SEO fields to a document schema:

import {defineField, defineType} from 'sanity'

export default defineType({
  name: 'page',
  title: 'Page',
  type: 'document',
  fields: [
    defineField({
      name: 'title',
      type: 'string',
    }),
    defineField({
      name: 'seo',
      title: 'SEO',
      type: 'seoFields',
    }),
  ],
})

Render SEO metadata in Next.js:

import type {Metadata} from 'next'
import {buildSeoMeta} from 'sanity-plugin-seofields/next'

export async function generateMetadata(): Promise<Metadata> {
  const page = await getPage()

  return buildSeoMeta({
    seo: page.seo,
    baseUrl: 'https://example.com',
    path: `/${page.slug}`,
    defaults: {
      title: page.title,
      description: 'Default site description',
    },
  })
}

For Astro, Nuxt, Vue, SvelteKit, Remix, or custom renderers, use buildSeoHead() from sanity-plugin-seofields/head.

Full guide: Frontend integration

Common Links

Package Exports

CLI

npx seofields

Docs: CLI guide

Compatibility

Contributing

• GitHub repository
• Open an issue
• Contributing guide

License

MIT © Hardik Desai