JSON-LD i Next.js: Strukturert data som AI-er forstår

Strukturert data er limet mellom nettsiden din og maskinene som prøver å forstå den. Uten JSON-LD ser AI-modeller og søkemotorer bare tekst. Det er en av grunnsteinene i GEO-optimalisering. Med JSON-LD ser de mening — hvem som skrev artikkelen, når den ble publisert, hva den handler om, og hvilken organisasjon som står bak.

Hva er JSON-LD og hvorfor trenger du det?

JSON-LD (JavaScript Object Notation for Linked Data) er et format for strukturert data basert på Schema.org-vokabularet. Det lar deg beskrive innholdet ditt i et format som maskiner forstår direkte. For å forstå hvorfor dette er viktig, les om Schema Markup for AI Overviews.

For AI-modeller er dette gull verdt. Når ChatGPT, Perplexity eller Claude skal vurdere troverdigheten til en kilde, ser de etter:

| Signal | Hva det forteller AI-en | |--------|------------------------| | @type: Article | Dette er redaksjonelt innhold | | author | Hvem som tar ansvar for innholdet | | publisher | Hvilken organisasjon som står bak | | datePublished | Hvor ferskt innholdet er | | headline + abstract | Oppsummering uten å lese alt |

Hvordan implementerer du JSON-LD i Next.js App Router?

I Next.js App Router legger du JSON-LD direkte i komponentene via <script>-tags. Her er de fire viktigste schema-typene:

Article / BlogPosting

Bruk denne for alle artikler og blogginnlegg:

export default function BlogPost({ post }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.title,
    abstract: post.quickAnswer,
    datePublished: post.date,
    author: {
      '@type': 'Person',
      name: post.author,
    },
    publisher: {
      '@type': 'Organization',
      name: 'Webagent AS',
      url: 'https://webagent.no',
    },
  }

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(jsonLd)
        }}
      />
      <article>{/* innhold */}</article>
    </>
  )
}

Organization

Plasser denne på forsiden eller en global layout:

const orgJsonLd = {
  '@context': 'https://schema.org',
  '@type': 'Organization',
  name: 'Webagent AS',
  url: 'https://webagent.no',
  logo: 'https://webagent.no/logo.png',
  contactPoint: {
    '@type': 'ContactPoint',
    email: 'kontakt@webagent.no',
    contactType: 'customer service',
    availableLanguage: 'Norwegian',
  },
  sameAs: [
    'https://hjelp.dev',
    'https://boligposten.com',
  ],
}

FAQPage

Perfekt for FAQ-seksjoner — AI-modeller elsker dette formatet:

const faqJsonLd = {
  '@context': 'https://schema.org',
  '@type': 'FAQPage',
  mainEntity: [
    {
      '@type': 'Question',
      name: 'Hva koster en nettside?',
      acceptedAnswer: {
        '@type': 'Answer',
        text: 'Prisen avhenger av omfanget...',
      },
    },
  ],
}

HowTo

Bruk denne for steg-for-steg-guider:

const howToJsonLd = {
  '@context': 'https://schema.org',
  '@type': 'HowTo',
  name: 'Slik setter du opp Supabase Auth i Next.js',
  step: [
    {
      '@type': 'HowToStep',
      name: 'Installer dependencies',
      text: 'Kjør npm install @supabase/supabase-js @supabase/ssr',
    },
    {
      '@type': 'HowToStep',
      name: 'Konfigurer miljøvariabler',
      text: 'Legg til NEXT_PUBLIC_SUPABASE_URL og NEXT_PUBLIC_SUPABASE_ANON_KEY i .env.local',
    },
  ],
}

Hvordan bruker du @graph for flere schema-typer på én side?

Når du trenger flere schema-typer på samme side (for eksempel Organization + WebSite), bruk @graph:

const jsonLd = {
  '@context': 'https://schema.org',
  '@graph': [
    {
      '@type': 'Organization',
      name: 'Webagent AS',
      url: 'https://webagent.no',
    },
    {
      '@type': 'WebSite',
      name: 'hjelp.dev',
      url: 'https://hjelp.dev',
      publisher: {
        '@type': 'Organization',
        name: 'Webagent AS',
      },
    },
  ],
}

Dette er teknikken vi bruker i produksjon hos Webagent AS — og nå på hjelp.dev som du leser denne artikkelen på.

Hvordan validerer du JSON-LD?

Strukturert data kombinert med llms.txt og content negotiation utgjør en komplett GEO-stack.

Google tilbyr et Rich Results Test-verktøy der du kan lime inn URL-en din og se om strukturert data er korrekt implementert. For utvikling kan du også bruke Schema.org Validator.

| Verktøy | Bruk | |---------|------| | Rich Results Test | Validering mot Googles krav | | Schema.org Validator | Generell schema-validering | | Browser DevTools | Inspiser <script type="application/ld+json"> | | Lighthouse | Sjekk SEO-score inkl. strukturert data |

Hva er best practice for JSON-LD i produksjon?

Basert på erfaringer fra prosjekter som Boligposten.com og andre produksjons-apper bygget av Webagent AS, er dette de viktigste prinsippene:

1. Generer dynamisk — Ikke hardkod JSON-LD. Bygg det fra dataene dine slik at det alltid er oppdatert.
2. Bruk @graph — Kombiner flere typer i én blokk fremfor separate script-tags.
3. Inkluder abstract — AI-modeller bruker dette som oppsummering.
4. Sett datePublished — Ferske artikler prioriteres.
5. Legg til publisher — Bygger autoritets-signal for organisasjonen din.

JSON-LD er ikke bare «nice to have» — det er en grunnleggende infrastruktur for å bli synlig i en AI-drevet verden. For å måle effekten av strukturert data kan du bruke Share of Synthesis som KPI.

Start med Article og Organization, og bygg derfra.

Fra teori til praksis

Denne artikkelen er en del av hjelp.dev-eksperimentet — der vi tester om AI-drevet innhold kan bygge ekte autoritet. Alt innhold er åpent og GEO-optimalisert.

Bygget av Webagent AS i Bergen.