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.

1. Add all 16 skills to your repositorynpx skills add subinternal/clickd
2. Ask your agentAudit 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.

For engineering teams building web apps and marketing sites on SvelteKit and Svelte 5.Connect MCPRead as .md

What breaks most often on SvelteKit

What clickd catches when it fetches the live URL the way Googlebot and AI crawlers do.

See the rulebook
  • Global or route ssr = falseSetting export const ssr = false in +layout.ts for 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 onMount leaves 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.

  1. 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
  2. 02Move fetches to +page.server.ts

    Load page data in +page.server.ts (or universal +page.ts) and keep ssr = true on every public marketing and docs route.

    technical-seo
  3. 03Standardize <svelte:head>

    Build a shared <SeoHead> Svelte component that renders <title>, canonical, Open Graph and escaped JSON-LD.

    page-system
  4. 04Serve /sitemap.xml & /llms.txt

    Add +server.ts endpoints for /sitemap.xml and /llms.txt backed 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
&lt;script lang=&quot;ts&quot;&gt;
  let { data } = $props();
  const ld = JSON.stringify({
    &#39;@context&#39;: &#39;https://schema.org&#39;,
    &#39;@type&#39;: &#39;TechArticle&#39;,
    headline: data.guide.title,
    description: data.guide.description,
  }).replace(/&lt;/g, &#39;\\u003c&#39;);
&lt;/script&gt;

&lt;svelte:head&gt;
  &lt;title&gt;{data.guide.title} · Example Co&lt;/title&gt;
  &lt;meta name=&quot;description&quot; content={data.guide.description} /&gt;
  &lt;link rel=&quot;canonical&quot; href={`https://example.com/guides/${data.guide.slug}`} /&gt;
  {@html `&lt;script type=&quot;application/ld+json&quot;&gt;${ld}&lt;/script&gt;`}
&lt;/svelte:head&gt;

&lt;main&gt;
  &lt;h1&gt;{data.guide.title}&lt;/h1&gt;
  &lt;p&gt;{data.guide.answerFirst}&lt;/p&gt;
&lt;/main&gt;

Prompts to run on SvelteKit

Copy any prompt into Claude Code, OpenAI Codex, Cursor or Windsurf.

  • Check SvelteKit SSR coverageSearch 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 componentCreate 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.txtCreate 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.

All 16 skills
  • 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 \u003c guarantees a string containing </script> can never break out of the script tag.
What if one interactive chart library requires `window` in SvelteKit?
Keep ssr = true on the route so all headings, prose and metadata render on the server, and guard only the interactive chart component with browser from $app/environment or dynamic import inside onMount.

Other integrations & stacks

All integrations
  • 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