docs

Field Groups

Organize SEO fields into tabbed sections using Sanity's native groups feature — so editors can switch between Meta, Open Graph, and Twitter Card tabs instead of scrolling through a long field list.

Quick Start

Add the fieldGroups array to your plugin config. Each entry creates a tab in Studio:

sanity.config.ts

import seofields from 'sanity-plugin-seofields'

export default defineConfig({
  plugins: [
    seofields({
      fieldGroups: [
        {
          name: 'meta',
          title: 'Meta',
          default: true,
          fields: [
            'title',
            'description',
            'metaImage',
            'keywords',
            'canonicalUrl',
            'metaAttributes',
            'robots',
          ],
        },
        {
          name: 'openGraph',
          title: 'Open Graph',
          fields: ['openGraph'],
        },
        {
          name: 'twitter',
          title: 'Twitter Card',
          fields: ['twitter'],
        },
      ],
    }),
  ],
})

How it works: The plugin maps your fieldGroups config to Sanity's built-in groups and per-field group properties on the seoFields object type. This is a native Studio feature — no custom UI needed.

SeoFieldGroup Interface

Each group object accepts these properties:

Property	Type	Required	Description
`name`	string	Yes	Unique identifier for the group (e.g. 'meta', 'openGraph').
`title`	string	Yes	Human-readable label shown on the tab in Studio.
`default`	boolean	No	If true, this tab is selected by default when the editor opens the document. Only one group should be default.
`icon`	React.ComponentType	No	Optional icon component displayed next to the tab title.
`fields`	SeoObjectFieldName[]	Yes	Array of seoFields field names to include in this group.

Available Field Names

The fields array accepts top-level field names from the seoFields object. Use the SeoObjectFieldName type for type-safe configuration:

titleMeta title

descriptionMeta description

metaImageSocial sharing image

keywordsMeta keywords

canonicalUrlCanonical URL

metaAttributesCustom meta attributes

robotsRobots directives

previewSEO preview (if enabled)

openGraphOpen Graph fields (nested object)

twitterTwitter Card fields (nested object)

Two-Tab Layout

You can create any number of tabs. Here's a minimal two-tab setup separating basic SEO from social media fields:

Two tabs: SEO + Social

seofields({
  fieldGroups: [
    {
      name: 'seo',
      title: 'SEO',
      default: true,
      fields: ['title', 'description', 'metaImage', 'keywords', 'canonicalUrl', 'robots'],
    },
    {
      name: 'social',
      title: 'Social Media',
      fields: ['openGraph', 'twitter'],
    },
  ],
})

TypeScript Support

Both SeoFieldGroup and SeoObjectFieldName are exported from the package for type-safe configuration:

Type-safe field groups

import seofields, {
  type SeoFieldGroup,
  type SeoObjectFieldName,
} from 'sanity-plugin-seofields'

const myGroups: SeoFieldGroup[] = [
  { name: 'meta', title: 'Meta', default: true,
    fields: ['title', 'description', 'metaImage'] },
  { name: 'og', title: 'Open Graph',
    fields: ['openGraph'] },
]

export default defineConfig({
  plugins: [seofields({ fieldGroups: myGroups })],
})

Tip: Fields not assigned to any group will appear in all tabs. If you want a field to only show on a specific tab, make sure to include it in exactly one group's fields array.

Compatibility: fieldGroups works alongside fieldVisibility, fieldOverrides, and all other plugin options. Hidden fields will remain hidden regardless of group assignment.

Was this page helpful?