Sanity SEO Fields Plugin
The Sanity SEO Fields Plugin makes SEO simple and accessible, helping teams and creators implement web-standard, social-ready content with ease. It bridges complex SEO needs and content creation, boosting visibility, engagement, and best-practice adoption across the community.
By Desai Hardik
Install command
npm i sanity-plugin-seofields
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
seoFieldsobject 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-seofieldsPeer dependencies:
sanity ^3 || ^4 || ^5
react ^18 || ^19Quick 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
| Topic | Link |
|---|---|
| Quick start | Docs |
| Plugin configuration | Docs |
| Frontend integration | Docs |
| AI content generation | Docs |
| SEO Health Dashboard | Docs |
| Schema.org structured data | Docs |
| CLI | Docs |
| License key | Get license |
Package Exports
| Import path | Use |
|---|---|
sanity-plugin-seofields | Studio plugin, schema types, dashboard helpers, shared types |
sanity-plugin-seofields/head | Framework-neutral SEO helpers |
sanity-plugin-seofields/server | Server-side AI proxy adapters |
sanity-plugin-seofields/next | Next.js metadata helpers and React meta tags |
sanity-plugin-seofields/schema | Schema.org Sanity schema plugins |
sanity-plugin-seofields/schema/next | Schema.org React JSON-LD components |
sanity-plugin-seofields/define-cli | CLI configuration helper |
CLI
npx seofieldsDocs: CLI guide
Compatibility
| Runtime | Supported |
|---|---|
| Node.js | >=18 |
| Sanity Studio | ^3, ^4, ^5 |
| React | ^18, ^19 |
| Module format | ESM and CommonJS |
| TypeScript | Included |