Feature

Open Graph and X Card metadata for Sanity content

Control how Sanity-powered pages appear when shared on LinkedIn, Slack, Facebook, X, and other platforms. Editors can set dedicated titles, descriptions, card types, handles, and social images.

See schema types View SEO preview docs

Benefits

Separate social copy

Use different Open Graph or X Card titles and descriptions when search metadata is not the right social message.

Upload or paste image URLs

Choose uploaded Sanity images with hotspot support or direct image URLs for generated and external assets.

Frontend helpers included

Render og:* and twitter:* tags with buildSeoMeta(), SeoMetaTags, or buildSeoHead().

How it works in Sanity

Fields live inside seoFields

The seoFields object includes openGraph and twitter nested objects by default.

Editors choose image source

The imageType field switches between uploaded Sanity image assets and URL-based images.

Helpers apply fallbacks

If a social title or description is empty, helpers can fall back to the base SEO title and description.

Code examples

Social metadata query

*[_type == "article" && slug.current == $slug][0]{
  title,
  "slug": slug.current,
  seo {
    title,
    description,
    openGraph {
      title,
      description,
      siteName,
      type,
      imageType,
      image { asset-> { url }, alt },
      imageUrl
    },
    twitter {
      card,
      site,
      creator,
      title,
      description,
      imageType,
      image { asset-> { url }, alt },
      imageUrl
    }
  }
}

Next.js generateMetadata

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

export async function generateMetadata(): Promise<Metadata> {
  const article = await getArticle()

  return buildSeoMeta({
    seo: article.seo,
    baseUrl: 'https://example.com',
    path: `/articles/${article.slug}`,
    defaults: {
      siteName: 'Example',
      twitterSite: '@example',
    },
    imageUrlResolver: (image) => image.asset?.url,
  })
}

FAQ

Are Open Graph and X Card fields separate?

Yes. seoFields contains an openGraph object and a twitter object so each channel can have its own title, description, image, and platform-specific fields.

Can social images be uploaded to Sanity?

Yes. Open Graph and X Card images support uploaded image assets with hotspot support, plus URL fields for externally hosted images.

Do I have to fill every social field?

No. The frontend helpers can fall back to base SEO title, description, and image values when channel-specific fields are empty.

Does this work outside Next.js?

Yes. Next.js can use buildSeoMeta(), while Astro, Nuxt, Vue, SvelteKit, Remix, and custom renderers can use buildSeoHead().

Make social sharing predictable

Add dedicated social metadata fields to Sanity and render the resulting tags in your frontend.

Read frontend docs Install plugin