Sanity SEO — fleksibelt headless CMS med GROQ og Portable Text

Sanity er et open-source headless CMS med en hosted cloud-infrastruktur. Det adskiller sig fra konkurrenter primært på tre punkter: GROQ-forespørgselssproget, Portable Text-formatet til rig tekst og real-time collaboration i Sanity Studio. Som med alle headless CMS er SEO frontend-lagets ansvar — Sanity leverer struktureret indhold, frontend leverer crawlbare sider.

Sanity Studio og SEO-preview

Sanity Studio er den tilpasselige editor-applikation der deployes som en del af projektet (typisk på studio.ditsite.dk). I modsætning til Contentful’s fixed editor-interface er Sanity Studio fuldt tilpasseligt via React-komponenter.

Det muliggør SEO-preview direkte i editoren: du kan bygge eller installere et plugin der viser en live-preview af, hvordan meta title og description vil se ud i et Google SERP-resultat, mens redaktøren skriver. sanity-plugin-seo-pane er et open source plugin der løser præcis dette og er kompatibelt med Sanity v3.

SEO-fields konfigureres som document-schema-felter:

// schemas/article.ts
{
  name: 'seo',
  title: 'SEO',
  type: 'object',
  fields: [
    { name: 'metaTitle', type: 'string', title: 'Meta title' },
    { name: 'metaDescription', type: 'text', title: 'Meta description', rows: 3 },
    { name: 'noindex', type: 'boolean', title: 'Skjul fra søgemaskiner' },
  ],
}

GROQ-queries til SEO-data

I frontend hentes SEO-data via GROQ. Et eksempel der henter indholdsdata og SEO-felter i én query til Next.js:

const query = groq`
  *[_type == "article" && slug.current == $slug][0]{
    title,
    "slug": slug.current,
    body,
    "seo": seo{
      metaTitle,
      metaDescription,
      noindex,
      "ogImage": ogImage.asset->url
    }
  }
`;

GROQ’s projection-syntax ({ ... }) henter præcis de felter du behøver — ingen over-fetching der belaster API-limits.

Portable Text og semantisk HTML

Portable Text renderer til korrekt semantisk HTML via @portabletext/react. Standard-rendereren genererer <p>, <h2>, <h3>, <ul>, <li> og <strong> korrekt. Custom components kan tilføjes for specifikke block-typer:

import { PortableText } from '@portabletext/react';

const components = {
  block: {
    h2: ({ children }) => <h2 className="text-2xl font-bold">{children}</h2>,
    normal: ({ children }) => <p>{children}</p>,
  },
};

<PortableText value={body} components={components} />

Korrekt semantisk heading-hierarki er vigtigt for Googles passage-ranking — Portable Text giver fuld kontrol over dette.

Sanity med Astro — en stærk SEO-kombination

Sanity + Astro er kombinationen der giver det bedste fra begge verdener til content-sites: Sanity giver redaktørerne et brugervenligt interface med real-time preview; Astro genererer statisk HTML med nul JavaScript-payload.

Den officielle @sanity/astro-integration håndterer Sanity-klient-konfiguration. GROQ-queries køres i Astro-komponenternes frontmatter-sektion ved build-tid — resultatet er statiske sider der ikke kalder Sanity API på runtime.