docs

Quick Start

Get SEO fields running in your Sanity Studio in under 2 minutes.

AI agent setup prompt

Install, implement, and wire every feature

Paste this into Cursor, Codex, Claude Code, or another coding agent when you want it to integrate the plugin across Sanity schemas and the frontend, not just configure AI generation.

✓Package installation and Studio registration

✓Schema fields for pages, posts, products, or custom types

✓Frontend metadata, social tags, robots, and JSON-LD

✓Optional dashboard, field visibility, and secure AI endpoint

Installation docs Frontend docs

short-setup-agent-prompt.md

Install and implement sanity-plugin-seofields in this project.

Tasks:
1. Inspect package.json, sanity.config.ts, Sanity schemas, and frontend routes.
2. Install sanity-plugin-seofields with the project's package manager.
3. Register seofields() in the existing Sanity config without removing other plugins.
4. Add an seo field using type seoFields to the right document schemas.
5. Query the seo field in the frontend and render metadata, canonical URL, robots, Open Graph, X/Twitter cards, custom meta tags, and JSON-LD where supported.
6. For Next.js App Router, use buildSeoMeta from sanity-plugin-seofields/next inside generateMetadata.
7. Keep AI provider keys out of Sanity Studio. If AI generation is needed, use ai.endpoint with a server-side route.
8. Run lint, typecheck, build, and relevant tests.

Acceptance:
1. Sanity Studio starts without schema errors.
2. The selected document types show SEO fields.
3. Frontend pages render correct head metadata with safe fallbacks.
4. Summarize changed files and any required env vars.

1. Add the Plugin

sanity.config.ts

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

export default defineConfig({
  name: 'your-project',
  title: 'Your Project',
  projectId: 'your-project-id',
  dataset: 'production',
  plugins: [
    seofields(),  // Zero-config setup
  ],
  schema: {
    types: [/* your schemas */],
  },
})

2. Add SEO Fields to Documents

Add the seoFields type to any document schema:

schemas/page.ts

import { defineField, defineType } from 'sanity'

export default defineType({
  name: 'page',
  title: 'Page',
  type: 'document',
  fields: [
    defineField({
      name: 'title',
      title: 'Title',
      type: 'string',
    }),
    defineField({
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      options: { source: 'title' },
    }),
    defineField({
      name: 'content',
      title: 'Content',
      type: 'text',
    }),
    // Add the complete SEO package
    defineField({
      name: 'seo',
      title: 'SEO',
      type: 'seoFields',
    }),
  ],
})

3. Use Individual Components

Or pick only the components you need:

schemas/article.ts

import { defineField, defineType } from 'sanity'

export default defineType({
  name: 'article',
  title: 'Article',
  type: 'document',
  fields: [
    // ... other fields

    // Core meta fields (title, description, image, keywords, canonical URL)
    defineField({
      name: 'baseMeta',
      title: 'Meta Information',
      type: 'baseMeta',
    }),
    defineField({
      name: 'openGraph',
      title: 'Open Graph',
      type: 'openGraph',
    }),
    defineField({
      name: 'twitterCard',
      title: 'X (Twitter) Card',
      type: 'twitter',
    }),
    defineField({
      name: 'metaAttributes',
      title: 'Custom Meta Tags',
      type: 'metaTag',
    }),
  ],
})

4. Check the Dashboard

Open your Sanity Studio — the SEO Health tab appears automatically in the navigation. It scans all documents with an seo field and displays completeness scores, issues, and direct links to each document. Learn more about all dashboard features in the SEO Health Dashboard docs →

What's included out of the box: Meta title & description with character counters, Open Graph tags, X Card tags, robots directives, keyword management, custom meta attributes, image management, live SERP preview, and the SEO Health Dashboard.

Was this page helpful?