Dræber JavaScript vores AI-synlighed? AI-crawlere ser ud til at overse vores dynamiske indhold

Din mistanke er korrekt. De fleste AI-crawlere KØRER IKKE JavaScript.

Sådan håndterer forskellige crawlere JS:

Derfor er det vigtigt: Hvis dit indhold renderes af client-side JS, ser AI-crawlere:

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

Ikke dit faktiske indhold.

Løsningshierarki:

1. Server-side rendering (SSR) – Indhold i oprindeligt HTML-svar
2. Statisk sidesgenerering (SSG) – Pre-byggede HTML-sider
3. Prerenderingstjeneste – Service renderer JS for bots
4. Hybrid rendering – SSR for nøgleindhold, client til interaktioner

Din React-app kan implementere alle disse. Next.js gør SSR/SSG ligetil.

Vi lavede netop denne migrering. Her er de praktiske erfaringer:

Før (React SPA):

• Client-side rendering
• Indhold via API-kald
• AI-synlighed: Nul

Efter (Next.js SSR):

• Server-side rendering på alle indholdssider
• Statisk generering til dokumentation
• AI-synlighed: Stiger uge for uge

Implementeringstips:

1. Brug App Router med Server Components Standard er SSR – indhold fungerer bare

2. Datahentning på serversiden

   // Dette kører på serveren, indhold i HTML
   async function Page() {
     const data = await fetch('...');
     return <Article data={data} />;
   }
   

3. Undgå ‘use client’ til indholdskomponenter Brug kun client-komponenter til interaktivitet

4. Metadata API til SEO/AI

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

Migreringsindsats: Cirka 3 uger for et mellemstort site. Hver time værd.

Resultater: Første AI-citater dukkede op inden for 6 uger efter lancering af SSR-siden.

Hvis migrering ikke er mulig, er prerendering en mulighed:

Hvad prerendering gør:

• Tjeneste renderer din JS for bot-forespørgsler
• Returnerer fuld HTML til crawlere
• Rigtige brugere får stadig din SPA

Populære tjenester:

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

Implementering: Middleware detekterer bot-user agents og videresender til prerender-tjeneste.

Fordele:

• Ingen ændringer i kodebasen
• Fungerer med alle frameworks
• Hurtig implementering

Ulemper:

• Ekstra omkostninger
• Latens for bot-forespørgsler
• Komplekst cache-setup
• Afhængighed af tredjeparter

Hvornår bruges:

• Stor legacy kodebase
• Migrering ikke mulig på kort sigt
• Har brug for hurtig AI-synlighed

Hvornår IKKE bruges:

• Nye projekter (brug blot SSR)
• Små sites (migrering er nemmere)
• Begrænset budget (prerendering koster)

Prerendering er en midlertidig løsning, ikke ideel på lang sigt.

Framework-muligheder til AI-venlige sites:

Anbefaling efter situation:

• Nyt projekt: Next.js, Nuxt eller SvelteKit
• React-migrering: Next.js
• Vue-migrering: Nuxt
• Indholdstungt site: Gatsby eller Astro
• Blog/dokumentation: Hugo, Eleventy eller Astro

For AI-synlighed virker alt med SSR/SSG. Ren client-side rendering gør ikke.

Hybrid rendering til komplekse apps:

Udfordringen: Nogle dele af din app BEHØVER client-side rendering (dashboards, interaktive værktøjer). Men indhold skal have SSR.

Løsning: Hybrid rendering

1. Indholdssider: Fuld SSR

   • Blogindlæg, dokumentation
   • Marketingsider
   • FAQs og vidensbase

2. Interaktive funktioner: Client-side

   • Dashboards
   • Formularer og værktøjer
   • Bruger-specifikt indhold

Next.js App Router gør dette let:

• Server Components til indhold
• Client Components til interaktivitet
• Bland frit på samme side

Eksempelstruktur:

// Siden er server-renderet
export default function Page() {
  return (
    <>
      <ServerRenderedContent /> {/* AI ser dette */}
      <ClientInteractiveWidget /> {/* AI behøver ikke dette */}
    </>
  );
}

Princippet: Alt du vil have AI til at se: Server render. Alt andet: Client-side er fint.

Test om dit indhold er AI-synligt:

Metode 1: Vis kildekode

• Højreklik → Vis sidekilde
• Hvis indholdet er der = AI kan se det
• Hvis kun <div id="root"></div> = AI kan ikke se det

Metode 2: Deaktiver JavaScript

• Browser DevTools → Indstillinger → Deaktiver JavaScript
• Genindlæs side
• Hvis indholdet forsvinder = AI kan ikke se det

Metode 3: curl-test

curl -A "GPTBot" https://yoursite.com/page | grep "your content"

Hvis indholdet returneres, er du godt kørende.

Metode 4: Google Rich Results Test

• Tester renderet indhold
• Viser hvad Googlebot ser
• Minder om hvad AI-bots ville se

Efter implementering af SSR: Kør disse tests igen. Indhold bør være synligt i alle metoder.

Pro tip: Opsæt overvågning for at fange regressioner. SSR kan gå i stykker uden åbenlyse symptomer.

Ydelsesmæssige overvejelser med SSR:

SSR øger serverbelastningen:

• Hver forespørgsel kræver server rendering
• Mere compute end at levere statiske filer
• Caching bliver kritisk

Afhjælpningsstrategier:

1. Statisk generering hvor muligt

   • Blogindlæg, dokumentation = Statisk
   • Dynamisk indhold = SSR

2. Incremental Static Regeneration (ISR)

   • Genopbyg statiske sider efter tidsplan
   • Det bedste fra begge verdener

3. Edge rendering

   • Render ved CDN edge
   • Hurtigere TTFB globalt

4. Caching-lag

   • Fuld-side caching
   • Komponentniveau-caching

Trade-offet: SSR er dyrere i compute, men giver AI-synlighed. For de fleste virksomheder er synligheden investeringen værd.

Overvågning: Følg TTFB efter implementering af SSR. Hvis det er langsomt, kan bots time out før de får indhold.

Dette bekræftede problemet og gav klare løsninger. Vores handlingsplan:

Straks (denne uge):

1. Audit af nuværende rendering med curl-tests
2. Identificer indholdssider vigtigst for AI-synlighed
3. Gennemgå robots.txt for AI-bot-adgang

Kort sigt (næste kvartal):

1. Starte Next.js-migrering for indholdssider
2. Implementere SSR/SSG for blog, dokumentation og marketingsider
3. Beholde dashboard/app som client-rendered

Implementeringsmetode:

1. Start med de mest værdifulde indholdssider
2. Test AI-synlighed efter hvert batch
3. Brug ISR til ofte opdateret indhold
4. Overvåg TTFB løbende

Tekniske beslutninger:

• Next.js App Router med Server Components
• Statisk generering til dokumentation
• SSR til blog og marketing
• Client-komponenter kun hvor nødvendigt

Testplan:

1. curl-tests efter hver deployment
2. Tjek kildekode
3. Overvåg AI-citater over tid
4. Følg hvilke sider der bliver citeret

Vigtigste indsigt: Client-side rendering = usynlig for AI. SSR/SSG = synlig. Migreringen er ikke til diskussion for AI-synlighed.

Tak allesammen – nu har vi en klar vej frem!