Hướng dẫn về Svelte SEO

Tóm tắt — phần lớn quan trọng điều để know về Svelte SEO là đó Svelte và SvelteKit không phải giống nhau điều. Đơn giản Svelte xây dựng trang trong khách truy cập trình duyệt, so các công cụ tìm kiếm đầu tiên see blank shell. SvelteKit — Svelte chính thức framework — xây dựng trang on máy chủ và gửi finished HTML. sử dụng SvelteKit cho bất cứ điều gì bạn muốn xếp hạng.

Svelte so với. SvelteKit

Svelte là tool cho building người dùng interfaces. nó clever: thay vì shipping big JavaScript library để trình duyệt, nó compiles của bạn components xuống để nhỏ, đơn giản JavaScript tại xây dựng time. đó làm Svelte các trang fast.

Nhưng “fast” và “search-friendly” (bản dịch) «tìm kiếm-friendly» không cùng một điều. MỘT đơn giản Svelte app là client-side được kết xuất — đó máy chủ gửi một nearly empty trang, và JavaScript fills trong đó nội dung khi điều này loads trong đó trình duyệt. Nếu một crawler looks tại đó thô HTML, có gần như không có gì ở đó.

SvelteKit là chính thức framework được xây dựng bên cạnh Svelte. nó làm điều đó matters phần lớn Đối với SEO: nó renders của bạn các trang on máy chủ đầu tiên, so HTML đó arrives đã có của bạn nội dung, của bạn headings, và của bạn links trong nó. Đây là default behavior. nếu bạn’re building trang web đó cần để hiển thị lên trong Google, bạn muốn SvelteKit, không bare Svelte.

Vì sao điều này matters Đối với tìm kiếm

• Google có thể chạy JavaScript, so nó sẽ eventually see client-được kết xuất Svelte trang — nhưng có delay, và delay hurts fresh nội dung.
• Bing và khác các công cụ tìm kiếm là ít hơn reliable tại đang chạy JavaScript.
• AI các crawler (GPTBot, ClaudeBot, PerplexityBot, và similar) generally fetch static HTML, và kết xuất behavior varies by provider và thay đổi theo thời gian — hiện tại provider tài liệu không establish một shared render step Bạn có thể count on filling trong blank shell.

SvelteKit máy chủ-side kết xuất sidesteps tất cả điều này. nội dung là trong HTML từ bắt đầu, so mỗi kind của crawler có thể đọc nó không có depending on render step nó có thể hoặc có thể không perform.

đơn giản checklist

• Xây dựng với SvelteKit, không đơn giản Svelte, cho nội dung đó cần để xếp hạng.
• Cho mỗi trang unique <title> và <meta name="description"> sử dụng SvelteKit <svelte:head> element.
• không turn off máy chủ-side kết xuất (không sử dụng “SPA chế độ”) Đối với các trang bạn muốn tìm thấy.
• Tạo sitemap và robots.txt (SvelteKit không làm những điều này cho bạn).
• không block của bạn JavaScript hoặc CSS files trong robots.txt.

Muốn deeper version — four kết xuất modes, adapter trade-offs, ssr: false trap, và load-function pattern cho metadata? Chuyển để Nâng cao tab.

TL;DR — Svelte SEO là thực sự một SvelteKit conversation. Bare Svelte là CSR-chỉ — nội dung không trong đó thô HTML. SvelteKit defaults để SSR, hỗ trợ prerendering (SSG) theo route, và cho phép bạn mix modes. Manage metadata với <svelte:head> và feed điều này từ +page.server.js load functions so điều này lands trong đó ban đầu HTML. Đó sharpest trap: adapter-static với ssr: false làm không prerender — điều này produces empty shells; SSR phải stay on during đó xây dựng. SvelteKit own tài liệu warn SPA fallback có “large negative performance and SEO impacts.” (bản dịch) «lớn negative performance và SEO impacts.» Dùng History API routing (đó default), configure trailingSlash, và pick an adapter để match — static cho nội dung, node/vercel/cloudflare cho SSR.

Svelte không phải SvelteKit — và Đối với SEO đó mọi thứ

Svelte là compiler. nó turns của bạn .svelte components vào lean vanilla JavaScript với không virtual DOM và không runtime library shipped để trình duyệt. đó cho Svelte thực performance edge — nhưng nó bundle-size optimization, không kết xuất một. đơn giản Svelte app (Vite-bundled, không meta-framework) là vẫn client-side-được kết xuất SPA: máy chủ trả về blank HTML shell và trình duyệt constructs trang. View nguồn on một và của bạn nội dung không phải ở đó.

Đây là #1 nguồn của confusion Khi mọi người tìm kiếm “Svelte SEO.” compile step không put nội dung trong HTML. SvelteKit làm. SvelteKit là Svelte chính thức meta-framework — tương đương của tiếp theo.js cho React hoặc Nuxt cho Vue — và nó renders các trang on máy chủ theo mặc định, shipping fully populated HTML trước khi bất kỳ JavaScript chạy. nó adds SSR, static prerendering, file-based routing, load functions, và deployment adapters. headline: bare Svelte = CSR-chỉ; SvelteKit = SSR-đầu tiên. Mọi thứ khác trong điều này hướng dẫn assumes SvelteKit.

Hai scoping notes worth stating precisely, vì họ là nơi generic “Svelte SEO” advice dẫn đến sai lầm: SvelteKit kết xuất options (ssr, csr, prerender, trailingSlash) là set theo route và inherit hierarchically — một +layout.js hoặc +layout.server.js có thể set một default cho mọi thứ beneath điều này, và một child route có thể override điều này. So “is this SvelteKit site SEO-friendly” (bản dịch) «là này SvelteKit site SEO-friendly» không một project-cấp độ câu hỏi; kiểm tra đó cụ thể route. Và of SvelteKit kết xuất options, đây là cụ thể ssr: false — không SSR đang merely absent, và không “using SvelteKit” (bản dịch) «dùng SvelteKit» nhìn chung — đó tài liệu tie để an empty output: “If you set ssr to false, it renders an empty ‘shell’ page instead.” (bản dịch) «Nếu bạn set để , điều này renders an empty ‘shell’ trang thay vì.» Này hướng dẫn là hiện tại cho Svelte 5.x và SvelteKit 2.x (đó hiện tại majors as of này cập nhật); Svelte 5 đã làm runes đó default reactivity model, nhưng runes là một component-authoring concern, không một kết xuất chế độ — they không thay đổi bất kỳ of đó SEO hướng dẫn dưới.

Vì sao đó kết xuất chế độ matters xuất hiện straight từ cách các công cụ tìm kiếm hoạt động. Google xử lý JavaScript trong three phases — crawling, kết xuất, và lập chỉ mục — và “all pages with a 200 HTTP status code are sent to the rendering queue, no matter whether JavaScript is present on the page.” (bản dịch) «all các trang với một HTTP mã trạng thái là đã gửi để đó kết xuất queue, không quan trọng liệu JavaScript là present on đó trang.» Đó render queue adds một delay, và as Google own hướng dẫn diễn đạt điều này, “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.” (bản dịch) «máy chủ-side hoặc pre-kết xuất là vẫn một great ý tưởng vì điều này làm của bạn website nhanh hơn cho người dùng và các crawler, và không all bots có thể chạy JavaScript.» Đó cuối cùng clause là đang làm một lot of hoạt động trong 2026 — see đó AI-crawler section.

four kết xuất modes trong SvelteKit

SvelteKit strength là đó kết xuất là theo-route decision qua trang options. những điều này options là hierarchical: đặt default trong +layout.js/+layout.server.js và mỗi nested route inherits nó, trừ khi child route exports của nó own giá trị để override nó. kiểm tra option đó thực ra áp dụng để cụ thể route bạn care về — không chỉ giá trị đặt tại top của project.

• SSR (đó default). Các trang là được kết xuất máy chủ-side và đó đầy đủ HTML là trong đó ban đầu phản hồi. Best cho dynamic, personalized, hoặc frequently thay đổi nội dung. Này là on trừ khi bạn turn điều này off.
• Prerender (export const prerender = true). Các trang là generated as static HTML tại xây dựng time. Maximum speed và maximum crawlability — ideal cho blog posts, tài liệu, và marketing các trang. Crucially, prerendering là SSR chạy tại xây dựng time, so SSR phải vẫn enabled cho điều này để hoạt động.
• SPA fallback (ssr: false). MỘT single-trang-app shell với không máy chủ kết xuất. Đó SvelteKit tài liệu là blunt đó này chế độ “has large negative performance and SEO impacts” (bản dịch) «có lớn negative performance và SEO impacts» và là thực sự meant cho điều như wrapping trong một mobile app — không cho nội dung bạn muốn được lập chỉ mục.
• Hybrid. Mix modes theo route: prerender của bạn marketing các trang, SSR của bạn sản phẩm các trang, chạy an SPA-style admin behind một login. Này là SvelteKit killer feature — bạn không pick một kết xuất chế độ cho đó toàn bộ site.

ssr: false trap ( mistake để tránh)

Này là đó hầu hết expensive misunderstanding trong SvelteKit SEO, so điều này nhận của nó own section. Mọi người reach cho adapter-static để “make a static site,” (bản dịch) «làm một static site,» và thì set ssr: false thinking họ là getting prerendered HTML. They không.

Prerendering là máy chủ-side kết xuất executed tại xây dựng time. Nếu bạn disable SSR, có không có gì để render — đó tài liệu là rõ ràng đó ssr: false “renders an empty ‘shell’ page instead,” (bản dịch) «renders an empty ‘shell’ trang thay vì,» và đó là chính xác điều gì adapter-static thì ships as của bạn prerendered output. Đó nội dung chỉ xuất hiện khi đó client-side JavaScript chạy, mà diễn đạt bạn right lại trong CSR territory (với all của nó crawler các vấn đề) despite có một “static” xây dựng. Đó rule: với adapter-static, leave ssr on (của nó default) so prerendering outputs real HTML. Dùng ssr: false chỉ khi bạn genuinely muốn an SPA shell và accept đó SEO cost.

Managing metadata với <svelte:head>

SvelteKit có special element, <svelte:head>, đó injects nội dung vào document <head> — và bạn không cần thứ ba-party library để manage của bạn tiêu đề và meta tags. mỗi trang nên có unique <title> và <meta name="description">, plus canonical, Open Graph, Twitter Card, hreflang, robots directives, và JSON-LD as needed.

pattern tài liệu chính thức khuyến nghị cho dynamic metadata:

1. trả về SEO metadata từ +page.server.js load() function.
2. Access nó qua page.data trong của bạn layout.
3. Render nó trong <svelte:head> trong 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>

nếu bạn’d rather sử dụng component wrapper, thứ ba-party svelte-seo package wraps <svelte:head> với props cho phổ biến tags — nhưng nó convenience, không requirement.

<svelte:head> nhận của bạn tags vào head; nó không verify bạn đã nhận them right. đó vẫn của bạn job: xác nhận mỗi route renders unique tiêu đề và mô tả (không một inherited từ layout by accident), đó canonical bạn emit là consistent giữa trực tiếp-yêu cầu HTML và Điều gì client-side navigation renders, và đó robots directives và JSON-LD là present trong thô phản hồi — không chỉ visible sau khi hydration.

Load functions: nơi bạn fetch SEO dữ liệu matters

Đây là metadata bug đó bites mọi người. +page.server.js load() chạy on máy chủ, so của nó dữ liệu là trong ban đầu HTML phản hồi. +page.js load() chạy on máy chủ cho đầu tiên render và on client during client-side navigation. mistake là fetching của bạn tiêu đề/mô tả/canonical trong <script> block với onMount() — đó chạy client-side chỉ, so ban đầu HTML ships với không metadata và crawler sees không có gì on đầu tiên fetch. Fetch SEO-cốt yếu dữ liệu trong load function (máy chủ load cho bất cứ điều gì đó phải là trong đầu tiên phản hồi), không trong onMount.

không assume file name alone proves boundary, though — +page.js load() cũng chạy on máy chủ cho đầu tiên yêu cầu, sau đó re-chạy client-side on navigation, và của nó trả về giá trị có để survive serialization để là reused safely on client. nếu SEO-cốt yếu dữ liệu bao giờ phụ thuộc vào giá trị đó không phải safely serializable, verify cả hai trực tiếp-yêu cầu HTML và client-navigated view của giống nhau route, không chỉ một hoặc khác.

Routing và URL structure

• File-based routing với [param] cho dynamic segments cho bạn sạch, dễ dự đoán các URL.
• History API routing là default — SvelteKit không sử dụng hash/fragment routing, và đó chính xác Điều gì bạn muốn. Google có thể’t reliably resolve hash-based (#/page) các URL, so History API routing là SEO-safe lựa chọn và SvelteKit làm nó default.
• trailingSlash trong svelte.config.js accepts 'always', 'never', hoặc 'ignore'. SvelteKit xử lý canonical chuyển hướng cho bạn, nhưng leaving nó misconfigured (especially 'ignore') có thể tạo duplicate-nội dung variants. Pick một và là consistent.
• Dynamic routes bạn muốn prerendered cần entries function để enumerate paths tại xây dựng time, hoặc SvelteKit sẽ không know mà các URL để generate.

Chọn adapter Đối với SEO

adapter decides Cách và nơi của bạn SvelteKit app là deployed, và đó có SEO consequences (mostly qua TTFB, mà feeds LCP):

cho blog hoặc tài liệu trang web, adapter-static với prerendering cho bạn maximum speed và crawlability. cho dynamic các trang, adapter-cloudflare hoặc adapter-vercel put SSR tại edge, mà có thể shrink TTFB và help Largest Contentful Paint — nhưng adapter chỉ picks deployment shape. Thực tế TTFB phụ thuộc vào của bạn dữ liệu fetching, bộ nhớ đệm, và runtime cold-bắt đầu behavior, so đo lường deployed trang rather hơn assuming adapter alone delivers win.

adapter là boundary, không chỉ deploy đích: streaming, filesystem, bộ nhớ đệm, edge/runtime APIs, các chuyển hướng, và lỗi xử lý có thể all behave differently giữa adapters. route đó looks đúng với local dev máy chủ hoặc adapter-node không phải guaranteed để behave identically sau khi deployed qua adapter-cloudflare hoặc adapter-vercel — kiểm thử production xây dựng on thực tế đích, không chỉ npm run preview.

Sitemaps và robots.txt

SvelteKit có không được xây dựng-trong sitemap hoặc robots.txt — như headless setup, bạn xây dựng them explicitly.

• Sitemap, manual: tạo src/routes/sitemap.xml/+server.js đó trả về XML. Thêm export const prerender = true nếu bạn’re on adapter-static.
• Sitemap, dynamic: máy chủ-được kết xuất điểm cuối đó các truy vấn của bạn CMS/database và trả về fresh XML on mỗi yêu cầu — best cho lớn hoặc fast-thay đổi các trang.
• Sitemap, packages: svelte-sitemap scans routes post-xây dựng (cho SSG), và sveltekit-static-sitemap generates từ prerendered routes.
• robots.txt: drop static file trong static/ (phân phối tại /robots.txt tự động) hoặc generate nó từ src/routes/robots.txt/+server.js điểm cuối. Whichever bạn chọn, không block của bạn .js/.css — Google sẽ không render từ blocked files.

Performance và Core Web Vitals

SvelteKit compiler và framework mechanics cho bạn một structural head bắt đầu on performance, và Core Web Vitals là một xếp hạng input — nhưng đó mechanics themselves không bảo đảm một score. Đó compiler outputs vanilla JS với không virtual DOM và không runtime library, so một typical SvelteKit trang ships ít hơn JavaScript hơn an tương đương React-based app; tự động theo-route code splitting, được xây dựng-trong asset và link preloading, file-hashing cho dài-lived bộ nhớ đệm, và edge deployment qua several adapters là all khả dụng. Điều gì bạn xây dựng với những mechanics — trang weight, image xử lý, bên thứ ba scripts, hydration cost, và đó deployment đích bạn thực ra chọn — vẫn decides của bạn measured CWV và của bạn thứ hạng. Treat đó framework as removing obstacles, không as delivering đó kết quả. Đó SvelteKit tài liệu point bạn tại đó right việc đo lường tools: “Google’s PageSpeed Insights and WebPageTest are excellent ways to understand the performance characteristics of a site.” (bản dịch) «Google PageSpeed Insights và WebPageTest là excellent ways để understand đó performance characteristics of một site.» Image optimization là khả dụng qua @sveltejs/enhanced-img.

AI các crawler và SSR imperative

Ở đây đó 2026 wrinkle đó older SvelteKit SEO các hướng dẫn miss. Kết xuất behavior cho GPTBot (OpenAI), ClaudeBot (Anthropic), PerplexityBot, và đó Bingbot fetch behind Copilot là provider- và version-cụ thể, và hiện tại provider tài liệu không establish một shared render step bạn có thể rely on. Treat “generally fetches static HTML without executing JavaScript” (bản dịch) «generally fetches static HTML không có executing JavaScript» as đó safe planning assumption, không một bảo đảm về mỗi provider forever. MỘT CSR route (bare Svelte, hoặc SvelteKit với ssr: false) ships mỗi một of những các crawler đó giống nhau empty shell một đầu tiên-fetch Googlebot yêu cầu sees; SvelteKit default SSR diễn đạt nội dung của bạn trong đó thô HTML so không crawler có để phụ thuộc on một render step tại all. đó là đó argument cho giữ SSR on cho bất cứ điều gì bạn muốn AI các hệ thống để see — không một promise đó SSR bảo đảm inclusion trong an AI câu trả lời, mà phụ thuộc vào factors well beyond kết xuất.

phổ biến SvelteKit SEO mistakes

• Fetching SEO dữ liệu trong onMount() thay vì máy chủ load function — metadata không phải trong ban đầu HTML.
• Shipping SPA fallback chế độ (ssr: false) cho nội dung bạn muốn được xếp hạng.
• adapter-static với ssr: false — rỗng shells, không prerendered các trang.
• Blocking JS/CSS trong robots.txt — breaks kết xuất.
• Skipping trailingSlash configuration — duplicate-nội dung variants.
• sử dụng hash/fragment routing — Googlebot có thể’t resolve những điều đó các URL (SvelteKit History API default đã bảo vệ bạn ở đây).

nếu bạn’re coming tại điều này từ rộng hơn framework angle, Svelte/SvelteKit là một của decoupled frontends headless CMS pairs với, và kết xuất-chế độ logic ở đây là giống nhau logic đó governs JavaScript SEO generally — những điều đó topics trực tiếp alongside điều này một trong cluster.

AI summary

condensed take on Nâng cao version:

• Svelte ≠ SvelteKit. Bare Svelte compiles để lean vanilla JS nhưng là CSR-chỉ — nội dung không trong đó thô HTML. SvelteKit renders SSR theo mặc định và ships đầy đủ HTML. Dùng SvelteKit cho bất cứ điều gì đó phải xếp hạng.
• Vì sao kết xuất chế độ matters: Google queues all 200 các trang cho kết xuất (delay); Bing là ít hơn reliable tại JS; AI-crawler kết xuất (GPTBot, ClaudeBot, PerplexityBot) là provider-cụ thể và generally treated as fetch-chỉ. SSR/prerender diễn đạt nội dung trong đó đầu tiên phản hồi so không crawler phụ thuộc vào một render step.
• Four modes: SSR (default), prerender/SSG (prerender = true, xây dựng-time HTML), SPA fallback (ssr: false, tài liệu warn “large negative performance and SEO impacts” (bản dịch) «lớn negative performance và SEO impacts»), và hybrid (mix theo route — SvelteKit killer feature).
• Đó trap: adapter-static + ssr: false produces empty shells, không prerendered HTML. Prerendering là SSR tại xây dựng time — giữ SSR on.
• Metadata: manage <title>/meta với <svelte:head> (không library needed). Feed điều này từ một +page.server.js load function, không onMount() (client-chỉ).
• Routing: History API theo mặc định (good — hash routing là bad cho SEO); configure trailingSlash; prerendered dynamic routes cần an entries function.
• Adapters: adapter-static (SSG, nội dung các trang) so với. adapter-node/vercel/ cloudflare (SSR; edge adapters có thể cut TTFB, mà helps LCP — nhưng đo lường đó deployed route, since adapters differ trong streaming, bộ nhớ đệm, và runtime behavior).
• Không được xây dựng-trong sitemap/robots.txt — xây dựng them (manual +server.js route, dynamic endpoint, hoặc một package). Không bao giờ block .js/.css.
• CWV head bắt đầu: compiler output ships ít hơn JS hơn React; code splitting, preloading, bộ nhớ đệm, edge deployment là all khả dụng — nhưng trang weight, images, bên thứ ba scripts, và của bạn deployment lựa chọn vẫn decide đó measured score.

Tài liệu chính thức

Chính-nguồn tài liệu từ SvelteKit và các công cụ tìm kiếm.

SvelteKit

• SEO • SvelteKit Tài liệu — SSR-by-default, <svelte:head> cho metadata, trailing-slash normalization, performance, và sitemap điểm cuối pattern.
• trang options (prerender, ssr, csr) • SvelteKit Tài liệu — Cách đặt kết xuất chế độ theo route, và SPA-chế độ warning.
• Static trang web generation (adapter-static) • SvelteKit Tài liệu — prerendering để static files và ssr requirement.
• Loading dữ liệu • SvelteKit Tài liệu — máy chủ so với. universal load functions (nơi của bạn SEO dữ liệu nên là fetched).
• Performance • SvelteKit Tài liệu — code splitting, preloading, bộ nhớ đệm, và việc đo lường tools.

Google

• Understand JavaScript SEO Basics — đó three-phase xử lý, đó render queue, History API routing, và đó “not all bots can run JavaScript” (bản dịch) «không all bots có thể chạy JavaScript» hướng dẫn.
• Đó new evergreen Googlebot — Googlebot’s move để evergreen Chromium và điều gì điều này vẫn không hỗ trợ.
• SEO Hướng dẫn cho Web Nhà phát triển — SSR/prerendering khuyến nghị cho indexable nội dung.

Quotes từ nguồn

On—record statements từ SvelteKit tài liệu và Google. mỗi link là deep link đó jumps để quoted passage on nguồn trang.

SvelteKit tài liệu — kết xuất & SEO

• “This option has large negative performance and SEO impacts” (bản dịch) «Này option có lớn negative performance và SEO impacts» — on đang chạy an app as một client-side-được kết xuất SPA (ssr: false fallback). Nhảy đến trích dẫn
• “Google’s PageSpeed Insights and WebPageTest are excellent ways to understand the performance characteristics of a site.” (bản dịch) «Google PageSpeed Insights và WebPageTest là excellent ways để understand đó performance characteristics of một site.» Nhảy đến trích dẫn

Google — JavaScript & kết xuất

• “All pages with a 200 HTTP status code are sent to the rendering queue, no matter whether JavaScript is present on the page.” (bản dịch) «All các trang với một 200 HTTP mã trạng thái là đã gửi để đó kết xuất queue, không quan trọng liệu JavaScript là present on đó trang.» Nhảy đến trích dẫn
• “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.” (bản dịch) «Máy chủ-side hoặc pre-kết xuất là vẫn một great ý tưởng vì điều này làm của bạn website nhanh hơn cho người dùng và các crawler, và không all bots có thể chạy JavaScript.» Nhảy đến trích dẫn
• “Google Search won’t render JavaScript from blocked files or on blocked pages.” (bản dịch) «Google Search sẽ không render JavaScript từ blocked files hoặc on blocked các trang.» Nhảy đến trích dẫn

Patrick Stox (my own hoạt động — JavaScript SEO: Definitive Hướng dẫn)

• “JavaScript is not bad for SEO, and it’s not evil. It’s just different from what many SEOs are used to, and there’s a bit of a learning curve.” (bản dịch) «JavaScript không phải bad cho SEO, và đây là không evil. đây là chỉ khác nhau từ điều gì nhiều SEOs là được dùng để, và có một bit of một learning curve.»
• On kết xuất modes: “Any kind of SSR, static rendering, and prerendering setup is going to be fine for search engines.” (bản dịch) «Bất kỳ kind of SSR, static kết xuất, và prerendering setup là going để là fine cho các công cụ tìm kiếm.»
• On CSR: “The most problematic one is going to be full client-side rendering where all of the rendering happens in the browser. While Google will probably be OK client-side rendering, it’s best to choose a different rendering option to support other search engines.” (bản dịch) «Đó hầu hết problematic một là going để là đầy đủ client-side kết xuất nơi all of đó kết xuất happens trong đó trình duyệt. Trong khi Google sẽ probably là OK client-side kết xuất, đây là best để chọn một khác nhau kết xuất option để hỗ trợ other các công cụ tìm kiếm.»

SvelteKit SEO checklist

nhanh truyền để xác nhận các công cụ tìm kiếm và AI các crawler có thể see của bạn SvelteKit nội dung:

• bạn’re sử dụng SvelteKit, không bare Svelte, cho bất cứ điều gì đó cần để xếp hạng.
• SSR là on ( default) cho indexable routes — không accidental ssr: false.
• nội dung-nặng các trang sử dụng prerender (export const prerender = true) nơi họ có thể.
• với adapter-static, ssr là left on so prerendering outputs thực HTML (không rỗng shells).
• mỗi trang có unique <title> và <meta name="description"> qua <svelte:head>.
• SEO metadata là fetched trong +page.server.js load function, không trong onMount().
• Canonical, Open Graph, và JSON-LD là được kết xuất máy chủ-side, không injected client-side.
• trailingSlash là đặt explicitly trong svelte.config.js.
• Prerendered dynamic routes có entries function enumerating paths.
• sitemap tồn tại (+server.js route hoặc package) và robots.txt là trong static/ hoặc route.
• robots.txt không block .js hoặc .css.
• Routing là History API (SvelteKit default) — không hash/fragment routes.
• bạn verified được kết xuất HTML trong GSC URL Inspection (nội dung + metadata present on đầu tiên fetch).

mental models

1. Đó Svelte-so với-SvelteKit fork. Trước bất cứ điều gì khác, câu trả lời: bare Svelte hoặc SvelteKit? Bare Svelte là CSR-chỉ — nội dung không trong đó HTML. SvelteKit là SSR-đầu tiên. Nearly mỗi “Svelte SEO problem” (bản dịch) «Svelte SEO vấn đề» traces lại để ai đó dùng đơn giản Svelte (hoặc disabling SvelteKit SSR) cho nội dung đó cần để xếp hạng.

2. Prerendering = SSR tại xây dựng time. “Static” không có nghĩa là “no rendering.” (bản dịch) «không kết xuất.» Prerendering chạy máy chủ của bạn render tại xây dựng time và saves đó HTML. đó là vì sao ssr: false không thể prerender — có không có gì để render. Giữ SSR on; chọn khi điều này chạy (yêu cầu time = SSR, xây dựng time = prerender).

3. kết xuất-chế độ-theo-route decision. SvelteKit lets bạn chọn theo route, so match chế độ để nội dung:

• Static-ish nội dung (blog, tài liệu, marketing) → prerender (SSG).
• Fresh/dynamic nội dung (listings, personalized các trang) → SSR.
• Behind—login, không-được lập chỉ mục UI → SPA fallback là acceptable ở đó chỉ.

4. HTML-đầu tiên metadata. Bất cứ điều gì crawler cần — tiêu đề, mô tả, canonical, JSON-LD — belongs trong máy chủ-được kết xuất HTML qua <svelte:head> fed by máy chủ load function. onMount() metadata là seen muộn by Google, và providers đó treat AI các crawler as fetch-chỉ sẽ không see nó tại all.

5. adapter = deployment shape. adapter decides nơi SSR chạy (hoặc liệu nó all static). Static cho nội dung các trang; node/vercel/cloudflare cho SSR. Edge adapters có thể shrink TTFB, mà có thể help LCP — nhưng adapter là một input; của bạn dữ liệu fetching, bộ nhớ đệm, và runtime cold-bắt đầu behavior quyết định Điều gì bạn thực ra đo lường. Adapters cũng differ trong streaming, filesystem access, và lỗi xử lý, so verify production behavior theo adapter thay vì assuming feature parity.

6. Plan cho các crawler đó không chạy của bạn JavaScript. Kết xuất behavior cho AI các crawler là provider- và version-cụ thể, và hiện tại provider tài liệu không bảo đảm shared render step. safe planning assumption là fetch-chỉ: nếu nội dung không phải trong ban đầu HTML, treat nó as invisible để đó class của crawler. SSR/prerender xóa dependency on bất kỳ crawler kết xuất khả năng tại all — strongest lever bạn có, không bảo đảm về Điều gì bất kỳ một AI hệ thống làm với kết quả.

SvelteKit SEO — bảng tra nhanh

Kết xuất modes (đặt theo route qua trang options)

** trap**

• adapter-static + ssr: false → rỗng shells, không prerendered HTML. giữ ssr on với adapter-static.

Adapters

Fast rules

• Metadata → <svelte:head> (không library needed); feed từ +page.server.js load, không bao giờ onMount(). xác nhận mỗi route tiêu đề/mô tả là unique.
• Routing → History API (default). không bao giờ hash/fragment routes.
• đặt trailingSlash explicitly.
• Prerendered dynamic routes → thêm entries function.
• Không được xây dựng-trong sitemap/robots.txt — xây dựng them (+server.js route hoặc package).
• không bao giờ block .js/.css trong robots.txt.
• AI các crawler → generally fetch-chỉ, provider-cụ thể → giữ SSR on so nội dung không phụ thuộc on render step.
• Options (ssr/csr/prerender/trailingSlash) là hierarchical — kiểm tra giá trị đó áp dụng để cụ thể route, không chỉ project default.

Đơn giản Svelte hoặc SvelteKit?

Svelte SEO mistakes

• sử dụng đơn giản client-chỉ Svelte Đối với tìm kiếm landing các trang. Move rankable routes để SvelteKit SSR hoặc prerendering.
• Setting ssr = false globally. đó turns trang web vào SPA và xóa hoàn tất ban đầu HTML. Phạm vi client-chỉ behavior để routes đó không cần khả năng hiển thị trên tìm kiếm.
• Updating <svelte:head> chỉ sau khi trình duyệt fetches. Load metadata với giống nhau máy chủ/xây dựng dữ liệu đó renders trang.
• sử dụng hash-based các URL cho nội dung routes. Hash fragments không phải tách biệt máy chủ routes. sử dụng thông thường pathname routing.
• Kiểm thử chỉ sau khi hydration. So sánh thô HTML với được kết xuất DOM so client code không thể hide bị thiếu nguồn nội dung.

Thô HTML là rỗng app shell

có khả năng nguyên nhân: đơn giản Svelte SPA output hoặc ssr = false. khắc phục: sử dụng SvelteKit SSR/prerendering cho route và move essential loading để máy chủ-compatible load. xác nhận: curl trả về heading, nội dung, và liên kết nội bộ.

Các tiêu đề và canonicals xuất hiện chỉ sau khi JavaScript

có khả năng nguyên nhân: head các giá trị phụ thuộc on client lifecycle hoặc trình duyệt-chỉ fetching. khắc phục: trả về dữ liệu during SSR/prerender và render nó qua <svelte:head>. xác nhận: thô và được kết xuất head các giá trị agree.

dynamic route là bị thiếu từ static xây dựng

có khả năng nguyên nhân: prerenderer không thể discover parameterized path. khắc phục: expose crawlable links hoặc configure entries, hoặc render đó route on demand. xác nhận: deployed route trả về hoàn tất 200 trang.

trang hoạt động locally nhưng fails sau khi deployment

có khả năng nguyên nhân: adapter mismatch, bị thiếu máy chủ hỗ trợ, hoặc environment-phụ thuộc dữ liệu fetching. khắc phục: kiểm thử production adapter output và của nó runtime variables. xác nhận: production nguồn HTML matches tested xây dựng.

xác nhận SvelteKit là thực ra serving được kết xuất HTML

toàn bộ point của SvelteKit SSR là đó nội dung là trong thô HTML — trước khi bất kỳ JavaScript chạy. fastest way để xác nhận bạn đã không accidentally ship CSR shell là để fetch thô phản hồi và look cho của bạn nội dung. đơn giản curl không chạy JavaScript, so nó sees chính xác Điều gì non-kết xuất crawler sees.

macOS / Linux

# Raw HTML as the server sends it (no JS executed)
curl -sL "https://example.com/your-page/" -o raw.html

# Is your real content in the raw HTML? (empty result = you're shipping a CSR shell)
grep -o "Your unique headline text" raw.html

# Is your title/description in the initial response?
grep -iE "<title>|name=\"description\"" raw.html

Windows (PowerShell)

Invoke-WebRequest -Uri "https://example.com/your-page/" -OutFile raw.html
Select-String -Path raw.html -Pattern "Your unique headline text"
Select-String -Path raw.html -Pattern "<title>","name=`"description`""

nếu của bạn headline và metadata là present trong raw.html, SSR/prerendering là hoạt động. nếu họ’re bị thiếu nhưng visible trong trình duyệt, của bạn nội dung phụ thuộc vào client-side kết xuất — kiểm tra đó ssr không phải đặt để false và đó bạn’re không fetching nội dung chỉ trong onMount().

Kiểm tra bạn là không blocking JS/CSS

curl -sL "https://example.com/robots.txt" | grep -iE "disallow.*\.(js|css)|Disallow:\s*/(_app|assets)"

Disallow matching /_app/ (SvelteKit bundled output) hoặc của bạn CSS có nghĩ là Google có thể’t render trang — gần như luôn mistake.

Tools cho gỡ lỗi SvelteKit SEO

• URL Inspection (Google Search Console) — đó nguồn of truth. Chạy một trực tiếp kiểm thử, thì kiểm tra đó được kết xuất HTML, screenshot, và trang các tài nguyên để xác nhận nội dung của bạn và metadata là present (và đó không có gì là blocked).
• PageSpeed Insights — đó SvelteKit tài liệu explicitly khuyến nghị điều này; kiểm tra Cốt lõi Web Chỉ số quan trọng (LCP/INP/CLS) đó SvelteKit lean output là được xây dựng để win.
• WebPageTest — đó other tool đó SvelteKit tài liệu name; waterfall + filmstrip view cho diagnosing TTFB và render timing.
• Rich Kết quả Kiểm thử — fast way để xác nhận JSON-LD đã làm điều này vào đó được kết xuất output.
• Screaming Frog SEO Spider — crawl với JS kết xuất on/off để diff thô so với. được kết xuất HTML trên đó toàn bộ SvelteKit site.
• Ahrefs Site Audit — surfaces hỏng canonicals, bị thiếu metadata, chuyển hướng chains, và indexability các vấn đề tại quy mô.
• View nguồn / curl — đó quickest “is my content in the raw HTML?” (bản dịch) «là my nội dung trong đó thô HTML?» kiểm tra (see đó Scripts tab).

Tự kiểm tra: Svelte SEO

Five nhanh các câu hỏi on Cách Svelte và SvelteKit ảnh hưởng khả năng hiển thị trên tìm kiếm. Pick câu trả lời cho mỗi, sau đó kiểm tra.

các tài nguyên worth của bạn time

My related writing

• JavaScript SEO: Definitive Hướng dẫn — my đầy đủ reference on kết xuất, DOM parity, và kết xuất-chế độ trade-offs đó underpin mọi thứ ở đây. nó mentions Svelte alongside React, Vue, và Angular as các framework với head/meta modules Đối với SEO.
• Người mới bắt đầu Hướng dẫn để kỹ thuật SEO — nơi kết xuất và crawling fit trong bigger picture.

My speaking

• Cách Tìm kiếm Hoạt động (SlideShare) — my walkthrough of crawling, kết xuất, lập chỉ mục, và xếp hạng. (My standing disclaimer áp dụng: “This is my understanding of systems… not going to be 100% complete or accurate.” (bản dịch) «Này là my understanding of các hệ thống… không going để là 100% hoàn tất hoặc chính xác.»)

Từ khoảng đó ngành

• SEO • SvelteKit Tài liệu — đó chính thức, có thẩm quyền starting point: SSR theo mặc định, <svelte:head>, trailing slashes, và đó sitemap pattern.
• Trang options (prerender, ssr, csr) • SvelteKit Tài liệu — đó theo-route kết xuất controls và đó SPA-chế độ SEO warning, trong đó team own words.
• Understand JavaScript SEO Basics (Google Search Central) — đó render queue, “not all bots can run JavaScript,” (bản dịch) «không all bots có thể chạy JavaScript,» và đó History API hướng dẫn.
• SvelteKit SEO: Của bạn Secret Weapon (Okupter) — một practitioner hướng dẫn covering meta tags, prerendering, kết xuất modes, dữ liệu có cấu trúc, và sitemaps.
• SvelteKit SEO: Công cụ tìm kiếm Optimization Metadata (Rodney Lab) — đó essential meta tags, an SEO component pattern, social cards, và language declaration.
• Cách thêm một basic SEO component để SvelteKit (Thilo Maier) — một code-focused walkthrough of một reusable SEO component.
• Creating một Sitemap trong SvelteKit (Bryan Anthonio) — một clear, hiện tại hướng dẫn để đó +server.js sitemap-endpoint approach.
• Rich Harris giải thích vì sao SvelteKit pushes cho SSR (DEV Community) — context on vì sao SvelteKit creator đã làm SSR đó default và pushes so với SPA/CSR.

Nhật ký thay đổi