Integrations/SvelteKitWeb framework
SvelteKit SEO for AI agents
SvelteKit SSRs routes out of the box unless ssr = false is set or data is fetched inside onMount. Pair SvelteKit with clickd so your agent keeps copy in +page.server.ts, wires canonicals and JSON-LD in <svelte:head>, and verifies live HTML.
npx skills add subinternal/clickdAudit our SvelteKit app with clickd_brief and clickd_check (kind: "agent"), move client onMount fetches into +page.server.ts, wire svelte:head metadata, and rescan.
What breaks most often on SvelteKit
What clickd catches when it fetches the live URL the way Googlebot and AI crawlers do.
- Global or route ssr = falseSetting
export const ssr = falsein+layout.tsfor a browser-only library turns every child route into an empty client-rendered shell.content-in-html - Data loaded in onMount instead of load()Fetching page copy inside
onMountleaves server-rendered HTML blank when Googlebot or AI retrieval bots read the response.content-in-html - Missing <svelte:head> per routeWithout route-level
<title>,<meta name="description">and<link rel="canonical">, child routes repeat the root layout’s metadata.title
The SvelteKit agentic SEO loop
Four steps your agent runs between your codebase and clickd’s live crawler.
- 01Test non-JS HTML
Run clickd_check (kind: "agent") on your live SvelteKit routes to verify full copy and headings arrive in the initial HTTP response.
clickd_check - 02Move fetches to +page.server.ts
Load page data in
+page.server.ts(or universal+page.ts) and keepssr = trueon every public marketing and docs route.technical-seo - 03Standardize <svelte:head>
Build a shared
<SeoHead>Svelte component that renders<title>, canonical, Open Graph and escaped JSON-LD.page-system - 04Serve /sitemap.xml & /llms.txt
Add
+server.tsendpoints for/sitemap.xmland/llms.txtbacked by your route manifest, deploy, and run clickd_rescan.llms-txt
Worked pattern
Data returned from +page.server.ts renders in initial HTML and populates <svelte:head> cleanly.
src/routes/guides/[slug]/+page.svelte
Sample<script lang="ts">
let { data } = $props();
const ld = JSON.stringify({
'@context': 'https://schema.org',
'@type': 'TechArticle',
headline: data.guide.title,
description: data.guide.description,
}).replace(/</g, '\\u003c');
</script>
<svelte:head>
<title>{data.guide.title} · Example Co</title>
<meta name="description" content={data.guide.description} />
<link rel="canonical" href={`https://example.com/guides/${data.guide.slug}`} />
{@html `<script type="application/ld+json">${ld}</script>`}
</svelte:head>
<main>
<h1>{data.guide.title}</h1>
<p>{data.guide.answerFirst}</p>
</main>Prompts to run on SvelteKit
Copy any prompt into Claude Code, OpenAI Codex, Cursor or Windsurf.
- Check SvelteKit SSR coverage
Search src/routes for ssr = false and onMount fetches, verify live routes with clickd_check (kind: "agent"), and move public page data into +page.server.ts.
- Build a shared SeoHead.svelte component
Create a reusable SeoHead.svelte component with title, description, canonical and escaped JSON-LD, and wire it across all public routes.
- Add +server.ts sitemap & llms.txt
Create src/routes/sitemap.xml/+server.ts and src/routes/llms.txt/+server.ts from our routes and verify live with clickd_rescan.
Skills to pair with SvelteKit
Included when you run npx skills add subinternal/clickd.
- Technical SEOAudits and fixes crawlability, indexing, robots.txt, XML sitemaps, canonicals, redirect chains, server-rendered HTML and security headers in your site’s codebase, then checks every fix live with clickd.See skill
- Page systemBuilds a site’s page templates and shared components so crawlers and assistants read every page well, and proves each pattern with clickd. About structure and spacing, not color, type or brand.See skill
- Schema markupGenerates, wires and validates JSON-LD structured data (Organization, LocalBusiness, Product, Service, Article, FAQPage and BreadcrumbList) from the visible facts on your pages, checked live with clickd.See skill
- llms.txtAdds a /llms.txt to a site, a plain text outline for AI assistants built from the site’s own pages and facts, with tests that catch a missing page, and checks it with clickd.See skill
Questions about SvelteKit & clickd
- Why escape `<` in `{@html}` JSON-LD blocks in SvelteKit?
- Because
{@html}injects raw markup directly into<svelte:head>. Escaping<as\u003cguarantees a string containing</script>can never break out of the script tag. - What if one interactive chart library requires `window` in SvelteKit?
- Keep
ssr = trueon the route so all headings, prose and metadata render on the server, and guard only the interactive chart component withbrowserfrom$app/environmentor dynamic import insideonMount.
Other integrations & stacks
- Google Search ConsoleTeams who want their coding agent driven by real Search Console impressions instead of guessed keyword volume.Data source
- Next.jsTeams shipping on Next.js App Router or Pages Router with Claude Code, Codex or Cursor.Web framework
- AstroTeams running marketing sites, docs and content hubs on Astro.Web framework
- ShopifyShopify and Shopify Plus stores on Liquid themes or Hydrogen headless storefronts.Storefront & CMS
- WordPressTeams managing custom WordPress block/classic themes, WooCommerce stores or headless WordPress.Storefront & CMS
- WebflowMarketing and design teams running Webflow CMS sites alongside an AI assistant.Storefront & CMS
- Lovable, Bolt, v0 & React SPAsFounders and developers shipping Vite, React SPA, Lovable, Bolt, v0 or Replit apps.App builder