Dreper JavaScript vår AI-synlighet? AI-crawlere ser ut til å overse dynamisk innhold

Mistanken din stemmer. De fleste AI-crawlere KJØRER IKKE JavaScript.

Slik håndterer ulike crawlere JS:

Hvorfor dette betyr noe: Hvis innholdet ditt gjengis av klientside-JS, ser AI-crawlere:

<div id="app"></div>

Ikke det faktiske innholdet ditt.

Løsningshierarki:

1. Server-side rendering (SSR) – Innhold i første HTML-respons
2. Statisk sidegenerering (SSG) – Ferdigbygde HTML-sider
3. Prerenderingstjeneste – Tjeneste gjengir JS for boter
4. Hybrid rendering – SSR for nøkkelinnhold, klient for interaksjon

React-appen din kan implementere noen av disse. Next.js gjør SSR/SSG enkelt.

Vi gjorde akkurat denne migreringen. Her er den praktiske erfaringen:

Før (React SPA):

• Klientside-rendering
• Innhold via API-kall
• AI-synlighet: Null

Etter (Next.js SSR):

• Server-side rendering for alle innholdssider
• Statisk generering for dokumentasjon
• AI-synlighet: Øker ukentlig

Implementeringstips:

1. Bruk App Router med Server Components Standard er SSR – innholdet bare fungerer

2. Datahenting på serversiden

   // Dette kjøres på server, innhold i HTML
   async function Page() {
     const data = await fetch('...');
     return <Article data={data} />;
   }
   

3. Unngå ‘use client’ for innholdskomponenter Bruk kun klientkomponenter for interaktivitet

4. Metadata API for SEO/AI

   export const metadata = {
     title: '...',
     description: '...',
   };
   

Migreringsinnsats: Ca. 3 uker for et middels stort nettsted. Verd hver time.

Resultater: Første AI-siteringer dukket opp innen 6 uker etter SSR-lansering.

Hvis migrering ikke er mulig, er prerendering et alternativ:

Hva prerendering gjør:

• Tjeneste gjengir JS for bot-forespørsler
• Returnerer full HTML til crawlere
• Ekte brukere får fortsatt din SPA

Populære tjenester:

• Prerender.io
• Rendertron
• Puppeteer-baserte løsninger

Implementering: Mellomvare oppdager bot-user agents og videresender til prerender-tjenesten.

Fordeler:

• Ingen endringer i kodebasen
• Fungerer med alle rammeverk
• Rask implementering

Ulemper:

• Ekstra kostnad
• Latens for bot-forespørsler
• Cache-kompleksitet
• Avhengighet til tredjepart

Når bruke:

• Stor eldre kodebase
• Migrering ikke mulig på kort sikt
• Trenger rask AI-synlighet

Når IKKE bruke:

• Nye prosjekter (bruk bare SSR)
• Små nettsteder (migrering er enklere)
• Stramt budsjett (prerendering koster)

Prerendering er en midlertidig løsning, ikke ideell på lang sikt.

Rammeverksvalg for AI-vennlige nettsteder:

Anbefaling etter situasjon:

• Nytt prosjekt: Next.js, Nuxt eller SvelteKit
• React-migrering: Next.js
• Vue-migrering: Nuxt
• Innholdstungt nettsted: Gatsby eller Astro
• Blogg/dokumentasjon: Hugo, Eleventy eller Astro

For AI-synlighet fungerer alt med SSR/SSG. Ren klientside-rendering gjør det ikke.

Hybrid rendering for komplekse apper:

Utfordringen: Noen deler av appen MÅ bruke klientside-rendering (dashboards, interaktive verktøy). Men innholdet må SSR.

Løsning: Hybrid rendering

1. Innholdssider: Full SSR

   • Blogginnlegg, dokumentasjon
   • Markedssider
   • FAQ og kunnskapsbase

2. Interaktive funksjoner: Klientside

   • Dashboards
   • Skjemaer og verktøy
   • Brukerspesifikt innhold

Next.js App Router gjør dette enkelt:

• Server Components for innhold
• Klientkomponenter for interaktivitet
• Kan mikses på samme side

Eksempelstruktur:

// Side er server-rendered
export default function Page() {
  return (
    <>
      <ServerRenderedContent /> {/* AI ser dette */}
      <ClientInteractiveWidget /> {/* AI trenger ikke dette */}
    </>
  );
}

Prinsippet: Alt du vil AI skal se: Server-render. Alt annet: Klientside er ok.

Testing av om innholdet ditt er AI-synlig:

Metode 1: Vis kilde

• Høyreklikk → Vis sidekilde
• Hvis innholdet er der = AI kan se det
• Hvis bare <div id="root"></div> = AI kan ikke se det

Metode 2: Deaktiver JavaScript

• Nettleser DevTools → Innstillinger → Deaktiver JavaScript
• Last inn siden på nytt
• Hvis innholdet forsvinner = AI kan ikke se det

Metode 3: curl-test

curl -A "GPTBot" https://dittnettsted.no/side | grep "ditt innhold"

Hvis innhold returneres, er du i mål.

Metode 4: Google Rich Results Test

• Tester gjengitt innhold
• Viser hva Googlebot ser
• Ligner på hva AI-boter ser

Etter at SSR er implementert: Kjør disse testene igjen. Innholdet skal være synlig i alle metoder.

Proff-tips: Sett opp overvåking for å fange feil. SSR kan feile uten åpenbare symptomer.

Ytelseshensyn med SSR:

SSR gir serverbelastning:

• Hver forespørsel må server-renderes
• Mer datakraft enn statiske filer
• Caching blir kritisk

Tiltak:

1. Statisk generering der det er mulig

   • Blogginnlegg, dokumentasjon = Statisk
   • Dynamisk innhold = SSR

2. Inkrementell statisk regenerering (ISR)

   • Bygger statiske sider på tidsplan
   • Beste fra begge verdener

3. Edge-rendering

   • Gjengir ved CDN-kant
   • Raskere TTFB globalt

4. Caching-lag

   • Fullsides caching
   • Komponent-caching

Avveining: SSR koster mer i datakraft, men gir AI-synlighet. For de fleste virksomheter er synligheten verdt investeringen.

Overvåking: Følg TTFB etter SSR. Hvis det er tregt, kan boter time ut før de får innhold.

Dette bekreftet problemet og ga klare løsninger. Vår handlingsplan:

Umiddelbart (denne uken):

1. Revider nåværende rendering med curl-tester
2. Identifiser de viktigste innholdssidene for AI-synlighet
3. Sjekk robots.txt for AI-bot-tilgang

Kort sikt (neste kvartal):

1. Starte Next.js-migrering for innholdssider
2. Implementere SSR/SSG for blogg, dokumentasjon og markedssider
3. Beholde dashboard/app som klientside-rendered

Implementeringsstrategi:

1. Start med de mest verdifulle innholdssidene
2. Test AI-synlighet etter hvert batch
3. Bruk ISR for ofte oppdatert innhold
4. Overvåk TTFB underveis

Tekniske valg:

• Next.js App Router med Server Components
• Statisk generering for dokumentasjon
• SSR for blogg og marked
• Klientkomponenter kun der det trengs

Testplan:

1. curl-tester etter hver utrulling
2. Vis kilde-verifisering
3. Overvåk AI-siteringer over tid
4. Følg med på hvilke sider som blir sitert

Viktig innsikt: Klientside-rendering = usynlig for AI. SSR/SSG = synlig. Migrering er ikke valgfritt for AI-synlighet.

Takk til alle – nå har vi en klar vei fremover!