Bahasa

Panduan Svelte SEO

Svelte alone adalah client-side dirender — konten tidak di mentah HTML. SvelteKit memperbaiki itu dengan SSR oleh default. rendering modes, svelte:head, muat functions, adapters, sitemaps, dan SPA-mode trap.

Pertama kali diterbitkan: 26 Jun 2026 · Terakhir diperbarui: 3 Agu 2026 · Lanjutan
AIDitulis olehAI v2

«Svelte SEO hinges on one distinction: plain Svelte is client-side rendered (a blank HTML shell), while SvelteKit renders on the server by default and ships full HTML. Use SvelteKit for anything that needs to rank. Manage metadata with svelte:head, fetch SEO data in +page.server.js load functions, pick the right adapter, and never ship SPA fallback mode (ssr: false) — the SvelteKit docs themselves warn it has large negative SEO impacts.» _(Terjemahan)_ (Ringkasan bahasa Indonesia untuk bidang tldr: teks sumber dipertahankan untuk tinjauan penutur asli.)

TL;DR — Svelte SEO adalah benar-benar sebuah SvelteKit conversation. Bare Svelte adalah CSR-hanya — konten tidak di mentah HTML. SvelteKit defaults untuk SSR, mendukung prerendering (SSG) per route, dan lets Anda mix modes. Manage metadata dengan <svelte:head> dan feed ini dari +page.server.js muat functions so ini lands di awal HTML. sharpest trap: adapter-static dengan ssr: false melakukan tidak prerender — ini produces empty shells; SSR harus stay pada selama bangun. SvelteKit’s own docs warn SPA fallback memiliki “large negative performance dan SEO impacts.” (terjemahan) “besar negative performa dan SEO impacts.” gunakan History API routing ( default), configure trailingSlash, dan pick sebuah adapter untuk match — static untuk konten, node/vercel/cloudflare untuk SSR.

Bukti untuk klaim ini The article's described svelte-seo capabilities must be evaluated against the platform's current documentation rather than assumed to be search-engine behavior. Cakupan: Platform-specific capability documentation. Tingkat keyakinan: tinggi · Diverifikasi: SvelteKit page options Bukti untuk klaim ini Regardless of platform, Google needs crawlable URLs, accessible rendered content, descriptive metadata, and valid search directives. Cakupan: Google requirements independent of platform. Tingkat keyakinan: tinggi · Diverifikasi: Google Search Central: SEO Starter Guide

Svelte adalah tidak SvelteKit — dan untuk SEO itu’s semuanya

Svelte adalah sebuah compiler. ini turns Anda .svelte components ke lean vanilla JavaScript dengan Tidak virtual DOM dan Tidak runtime library shipped untuk browser. itu memberikan Svelte sebuah nyata performa edge — tetapi ini adalah sebuah bundle-size optimization, tidak sebuah rendering satu. sebuah plain Svelte app (Vite-bundled, Tidak meta-kerangka kerja) adalah masih sebuah client-side-dirender SPA: server mengembalikan sebuah blank HTML shell dan browser constructs halaman. View sumber pada satu dan Anda konten tidak di sana.

ini adalah #1 sumber dari confusion ketika orang penelusuran “Svelte SEO.” (terjemahan) “Svelte SEO.” compile langkah tidak put konten di HTML. SvelteKit melakukan. SvelteKit adalah Svelte’s official meta-kerangka kerja — equivalent dari Berikutnya.js untuk React atau Nuxt untuk Vue — dan ini renders halaman pada server oleh default, shipping fully populated HTML sebelum apa pun JavaScript berjalan. ini menambahkan SSR, static prerendering, file-based routing, muat functions, dan deployment adapters. headline: bare Svelte = CSR-hanya; SvelteKit = SSR-pertama. Semuanya else di ini guide assumes SvelteKit.

Dua scoping notes worth stating precisely, karena mereka’re di mana generic “Svelte SEO” (terjemahan) “Svelte SEO” advice goes wrong: SvelteKit’s rendering options (ssr, csr, prerender, trailingSlash) adalah set per route dan inherit hierarchically — sebuah +layout.js atau +layout.server.js dapat set sebuah default untuk semuanya beneath ini, dan sebuah child route dapat override ini. So “adalah ini SvelteKit site SEO-friendly” (terjemahan) “adalah ini SvelteKit situs SEO-friendly” tidak sebuah project-tingkat pertanyaan; periksa spesifik route. dan dari SvelteKit’s rendering options, ini adalah secara khusus ssr: false — tidak SSR menjadi merely absent, dan tidak “menggunakan SvelteKit” (terjemahan) “menggunakan SvelteKit” di umum — itu docs tie untuk sebuah empty output: “Jika Anda set ssr untuk false, it renders an empty ‘shell’ halaman alih-alih.” (terjemahan) “jika Anda set tidak terdefinisi untuk tidak terdefinisi, ini renders sebuah empty ‘shell’ halaman alih-alih.” ini guide adalah saat ini untuk Svelte 5.x dan SvelteKit 2.x ( saat ini majors sebagai dari ini perbarui); Svelte 5 dibuat runes default reactivity model, tetapi runes adalah sebuah component-authoring concern, tidak sebuah rendering mode — mereka jangan perubahan apa pun dari SEO guidance di bawah.

«Why the rendering mode matters comes straight from how search engines work. Google processes JavaScript in three phases — crawling, rendering, and indexing — and “all pages with a 200 HTTP status code are sent to the rendering queue, no matter whether JavaScript is present on the page.” The render queue adds a delay, and as Google’s own guidance puts it, “server-side or pre-rendering is still a great idea because it makes your website faster for users and crawlers, and not all bots can run JavaScript.” That last clause is doing a lot of work in 2026 — see the AI-crawler section. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian dua puluh tiga, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

four rendering modes di SvelteKit

SvelteKit’s strength adalah itu rendering adalah sebuah per-route decision melalui halaman options. ini options adalah hierarchical: set sebuah default di sebuah +layout.js/+layout.server.js dan setiap nested route inherits ini, unless sebuah child route exports -nya own nilai untuk override ini. periksa option itu sebenarnya applies untuk spesifik route Anda care tentang — tidak hanya nilai set di top dari project.

  • SSR ( default). halaman adalah dirender server-side dan penuh HTML adalah di awal respons. Best untuk dynamic, personalized, atau frequently mengubah konten. ini adalah pada unless Anda turn ini off.
  • Prerender (export const prerender = true). halaman adalah generated sebagai static HTML di bangun time. Maximum speed dan maximum crawlability — ideal untuk blog posts, docs, dan marketing halaman. Crucially, prerendering adalah SSR jalankan di bangun time, so SSR harus tetap enabled untuk ini untuk berfungsi.
  • SPA fallback (ssr: false). sebuah single-halaman-app shell dengan Tidak server rendering. SvelteKit docs adalah blunt itu ini mode “memiliki large negative performance dan SEO impacts” (terjemahan) “memiliki besar negative performa dan SEO impacts” dan adalah benar-benar dimaksudkan untuk hal like wrapping di sebuah mobile app — tidak untuk konten Anda ingin terindeks.
  • Hybrid. Mix modes per route: prerender Anda marketing halaman, SSR Anda product halaman, jalankan sebuah SPA-style admin behind sebuah login. ini adalah SvelteKit’s killer fitur — Anda tidak pick satu rendering mode untuk seluruh situs.

ssr: false trap ( mistake untuk hindari)

ini adalah paling expensive misunderstanding di SvelteKit SEO, so ini mendapatkan -nya own bagian. Orang reach untuk adapter-static untuk “membuat a static site,” (terjemahan) “membuat sebuah static situs,” dan lalu set ssr: false thinking mereka’re getting prerendered HTML. mereka tidak.

Prerendering adalah rendering sisi server executed di bangun time. jika Anda disable SSR, ada tidak ada apa pun untuk render — docs adalah jelas itu ssr: false “renders an empty ‘shell’ halaman alih-alih,” (terjemahan) “renders sebuah empty ‘shell’ halaman alih-alih,” dan itu’s persis apa adapter-static lalu ships sebagai Anda prerendered output. konten hanya muncul setelah client-side JavaScript berjalan, yang puts Anda right back di CSR territory (dengan semua -nya crawler masalah) despite memiliki sebuah “static” (terjemahan) “static” bangun. aturan: dengan adapter-static, leave ssr pada (-nya default) so prerendering outputs nyata HTML. gunakan ssr: false hanya ketika Anda genuinely ingin sebuah SPA shell dan accept SEO cost.

Managing metadata dengan <svelte:head>

SvelteKit memiliki sebuah special element, <svelte:head>, itu injects konten ke document <head> — dan Anda tidak perlu sebuah ketiga-party library untuk manage Anda judul dan meta tags. setiap halaman seharusnya memiliki sebuah unique <title> dan <meta name="description">, plus canonical, Open Graph, Twitter Card, hreflang, robots directives, dan JSON-LD sebagai needed.

pattern official docs merekomendasikan untuk dynamic metadata:

  1. kembalikan SEO metadata dari sebuah +page.server.js load() function.
  2. Access ini melalui page.data di Anda layout.
  3. Render ini di <svelte:head> di root +layout.svelte.
<!-- +layout.svelte -->
<script>
  import { page } from '$app/state';
</script>

<svelte:head>
  <title>{page.data.title}</title>
  <meta name="description" content={page.data.description} />
  <link rel="canonical" href={page.data.canonical} />
</svelte:head>

jika Anda’d rather gunakan component wrapper, ketiga-party svelte-seo package wraps <svelte:head> dengan props untuk umum tags — tetapi ini adalah sebuah convenience, tidak sebuah requirement.

<svelte:head> mendapatkan Anda tags ke head; ini tidak verify Anda mendapat them right. itu’s masih Anda job: konfirmasi setiap route renders sebuah unique judul dan deskripsi (tidak satu inherited dari layout oleh accident), itu canonical Anda emit adalah consistent antara direct-permintaan HTML dan apa sebuah client-side navigation renders, dan itu robots directives dan JSON-LD adalah present di mentah respons — tidak hanya terlihat setelah hydration.

muat functions: di mana Anda fetch SEO data penting

ini adalah metadata bug itu bites orang. +page.server.js load() berjalan pada server, so -nya data adalah di awal HTML respons. +page.js load() berjalan pada server untuk pertama render dan pada client selama client-side navigation. mistake adalah fetching Anda judul/deskripsi/canonical di sebuah <script> block dengan onMount() — itu berjalan client-side hanya, so awal HTML ships dengan Tidak metadata dan crawler sees tidak ada apa pun pada pertama fetch. Fetch SEO-critical data di sebuah load function (server muat untuk apa pun itu harus menjadi di pertama respons), tidak di onMount.

jangan assume file name alone proves boundary, though — +page.js load() juga berjalan pada server untuk pertama permintaan, lalu re-berjalan client-side pada navigation, dan -nya kembalikan nilai memiliki untuk survive serialization untuk menjadi reused safely pada client. jika SEO-critical data ever bergantung pada sebuah nilai itu tidak safely serializable, verify keduanya direct-permintaan HTML dan sebuah client-navigated view dari yang sama route, tidak hanya satu atau lainnya.

Routing dan struktur URL

  • File-based routing dengan [param] untuk dynamic segments memberikan Anda bersih, predictable URLs.
  • History API routing adalah default — SvelteKit tidak gunakan hash/fragment routing, dan itu’s persis apa Anda ingin. Google dapat’t reliably resolve hash-based (#/page) URLs, so History API routing adalah SEO-safe pilihan dan SvelteKit membuat ini default.
  • trailingSlash di svelte.config.js accepts 'always', 'never', atau 'ignore'. SvelteKit menangani canonical redirect untuk Anda, tetapi leaving ini misconfigured (terutama 'ignore') dapat buat duplicate-konten variants. Pick satu dan menjadi consistent.
  • Dynamic routes Anda ingin prerendered perlu sebuah entries function untuk enumerate paths di bangun time, atau SvelteKit tidak akan know yang URLs untuk generate.

Choosing sebuah adapter untuk SEO

adapter decides bagaimana dan di mana Anda SvelteKit app adalah deployed, dan itu memiliki SEO consequences (mostly melalui TTFB, yang feeds LCP):

AdapterrenderingSEO implication
adapter-staticPenuh SSGbenar static HTML untuk setiap halaman; Tidak server needed; ideal untuk konten-berat situs (pertahankan ssr pada!)
adapter-nodeSSR pada sebuah Node serverDynamic SSR, penuh flexibility; Anda jalankan sebuah server
adapter-vercelSSR + edgeSSR dengan opsional edge functions; edge TTFB helps LCP
adapter-cloudflareSSR pada WorkersEdge SSR globally — potentially fastest TTFB/LCP
adapter-netlifySSR + CDNSimilar profile untuk Vercel

untuk sebuah blog atau docs situs, adapter-static dengan prerendering memberikan Anda maximum speed dan crawlability. untuk dynamic situs, adapter-cloudflare atau adapter-vercel put SSR di edge, yang dapat shrink TTFB dan help Largest Contentful Paint — tetapi adapter hanya picks deployment shape. Sebenarnya TTFB bergantung pada Anda data fetching, caching, dan runtime’s cold-mulai perilaku, so mengukur deployed halaman rather daripada assuming adapter alone delivers win.

sebuah adapter adalah sebuah boundary, tidak hanya sebuah deploy target: streaming, filesystem, caching, edge/runtime APIs, redirects, dan error menangani dapat semua behave differently antara adapters. sebuah route itu looks correct dengan local dev server atau adapter-node tidak guaranteed untuk behave identically setelah deployed melalui adapter-cloudflare atau adapter-vercel — test production bangun pada sebenarnya target, tidak hanya npm run preview.

Sitemaps dan robots.txt

SvelteKit memiliki Tidak dibangun-di sitemap atau robots.txt — like sebuah headless setup, Anda bangun them explicitly.

  • Sitemap, manual: buat src/routes/sitemap.xml/+server.js itu mengembalikan XML. tambahkan export const prerender = true jika Anda’re pada adapter-static.
  • Sitemap, dynamic: sebuah server-dirender endpoint itu kueri Anda CMS/database dan mengembalikan fresh XML pada setiap permintaan — best untuk besar atau fast-mengubah situs.
  • Sitemap, packages: svelte-sitemap scans routes post-bangun (untuk SSG), dan sveltekit-static-sitemap generates dari prerendered routes.
  • robots.txt: drop sebuah static file di static/ (disajikan di /robots.txt secara otomatis) atau generate ini dari sebuah src/routes/robots.txt/+server.js endpoint. Whichever Anda choose, jangan block Anda .js/.css — Google tidak akan render dari blocked files.

performa dan Core Web Vitals

SvelteKit’s compiler dan kerangka kerja mechanics memberikan Anda sebuah structural head mulai pada performa, dan Core Web Vitals adalah sebuah peringkat input — tetapi mechanics themselves jangan jaminan sebuah score. compiler outputs vanilla JS dengan Tidak virtual DOM dan Tidak runtime library, so sebuah typical SvelteKit halaman ships lebih sedikit JavaScript daripada sebuah equivalent React-based app; automatic per-route code splitting, dibangun-di asset dan tautan preloading, file-hashing untuk panjang-lived caching, dan edge deployment melalui several adapters adalah semua tersedia. Apa Anda bangun dengan itu mechanics — halaman weight, image menangani, ketiga-party scripts, hydration cost, dan deployment target Anda sebenarnya choose — masih decides Anda diukur CWV dan Anda rankings. Treat kerangka kerja sebagai menghapus obstacles, tidak sebagai delivering hasil. SvelteKit docs poin Anda di right pengukuran alat: “Google’s PageSpeed Insights and WebPageTest are excellent ways to understand the performance characteristics of a site.” (terjemahan) “Google’s PageSpeed Insights dan WebPageTest adalah excellent cara untuk memahami performa characteristics dari sebuah situs.” Image optimization adalah tersedia melalui @sveltejs/enhanced-img.

AI crawler dan SSR imperative

Di sini’s 2026 wrinkle older SvelteKit SEO guides miss. rendering perilaku untuk GPTBot (OpenAI), ClaudeBot (Anthropic), PerplexityBot, dan Bingbot fetch behind Copilot adalah provider- dan versi-spesifik, dan saat ini provider documentation tidak establish satu shared render langkah Anda dapat rely pada. Treat “generally fetches static HTML tanpa executing JavaScript” (terjemahan) “umumnya fetches static HTML tanpa executing JavaScript” sebagai safe planning assumption, tidak sebuah jaminan tentang setiap provider forever. sebuah CSR route (bare Svelte, atau SvelteKit dengan ssr: false) ships setiap satu dari ini crawler yang sama empty shell sebuah pertama-fetch Googlebot permintaan sees; SvelteKit’s default SSR puts Anda konten di mentah HTML so Tidak crawler memiliki untuk bergantung pada sebuah render langkah di semua. itu’s argument untuk mempertahankan SSR pada untuk apa pun Anda ingin AI sistem untuk see — tidak sebuah promise itu SSR jaminan inclusion di sebuah AI jawaban, yang bergantung pada factors well beyond rendering.

umum SvelteKit SEO mistakes

  • Fetching SEO data di onMount() alih-alih sebuah server muat function — metadata tidak di awal HTML.
  • Shipping SPA fallback mode (ssr: false) untuk konten Anda ingin diperingkatkan.
  • adapter-static dengan ssr: false — empty shells, tidak prerendered halaman.
  • Blocking JS/CSS di robots.txt — breaks rendering.
  • Skipping trailingSlash configuration — duplicate-konten variants.
  • menggunakan hash/fragment routing — Googlebot dapat’t resolve itu URLs (SvelteKit’s History API default sudah melindungi Anda di sini).

jika Anda’re coming di ini dari lebih luas kerangka kerja angle, Svelte/SvelteKit adalah satu dari decoupled frontends sebuah CMS headless pairs dengan, dan rendering-mode logic di sini adalah yang sama logic itu governs JavaScript SEO umumnya — itu topics langsung alongside ini satu di cluster.

Tambahkan catatan pakar

Sematkan kutipan pakar

Orang baru? Buat profilnya yang belum diklaim di /admin/experts/ → Sematkan kutipan pakar terlebih dahulu.