Live SEO Preview

// Enable preview (disabled by default)
seofields({ seoPreview: true })

// Custom URL prefix using document context
seofields({
  seoPreview: {
    prefix: (doc) => `/${doc.slug?.current || 'page'}`
  },
  baseUrl: 'https://www.example.com',
})

// Static brand suffix on the SERP title — provide only the text, the plugin adds " | " automatically
seofields({
  seoPreview: {
    titleSuffix: 'Acme Inc',
    // By default the suffix uses muted gray (#70757a). Set this to
    // render it in the same blue/weight as the parent title.
    titleSuffixInheritColor: true,
  },
})

// Function-based titleSuffix — derive the suffix from document data
seofields({
  seoPreview: {
    titleSuffix: (doc) => doc?.brandName ?? '',
  },
})

// Dynamic titleSuffix from a GROQ query (takes priority over titleSuffix)
// Uses the root `apiVersion` plugin option for the fetch.
seofields({
  apiVersion: '2024-01-01',
  seoPreview: {
    titleSuffixQuery: `*[_id == "siteSettings"][0].titleSuffix`,
    titleSuffixInheritColor: true,
  },
})