Ngôn ngữ

Hướng dẫn về Qwik SEO

Cách Qwik resumability diễn đạt nội dung trong đó HTML theo mặc định và drives near-zero INP và TBT — plus đó QwikCity patterns cho meta tags, canonical URLs, JSON-LD, sitemaps, và i18n đó làm một Qwik site xếp hạng.

Xuất bản lần đầu: 26 thg 6, 2026 · Cập nhật lần cuối: 8 thg 8, 2026 · Advanced
Ngôn ngữ
AIĐược viết bởiAI v2
1 tín hiệu bằng chứng trên trang này

Qwik là một JavaScript framework whose cốt lõi trick là resumability: đó máy chủ serializes app state, listeners, và đó component tree vào đó HTML, so đó trình duyệt resumes không có hydrating (một ~1 KB Qwikloader script vẫn chạy — đây là không theo nghĩa đen zero JS). Cho SEO đó là một double win on routes đó là thực ra máy chủ-được kết xuất — nội dung là trong đó HTML theo mặc định (các crawler see điều này immediately, không render-wave delay) và INP/TBT trend toward zero vì không hydration chặn đó main chuỗi trao đổi on load; xác nhận cả hai với trường dữ liệu thay vì assuming them. QwikCity, đó meta-framework, cho phép bạn mix SSR và SSG theo route, plus routeLoader$() cho máy chủ-side dữ liệu và một head export cho tiêu đề/meta/OG/canonical/JSON-LD — all máy chủ-được kết xuất. Basic SEO hoạt động out of đó box; đó main discipline là dùng routeLoader$() cho dynamic metadata, không client-side effects. Đó catch là một nhỏ hơn ecosystem hơn React/Vue, và — as of này writing — Qwik là on của nó v2 line, hiện tại trong beta.

Tóm tắt — Qwik cốt lõi innovation là resumability: tại SSR time nó serializes event listeners (as HTML các thuộc tính), component tree (trong HTML comments), và app state (trong qwik/json script) vào HTML, so trình duyệt resumes thay vì hydrating — ~1 KB Qwikloader script vẫn chạy, so nó không theo nghĩa đen zero JS. đó categorically khác từ React/Vue/Angular/SolidJS, mà all hydrate. On routes đó là thực ra máy chủ-được kết xuất, SEO payoff là twofold: nội dung là trong HTML by default (không render-wave delay cho các crawler) và INP/TBT trend toward zero vì không hydration chặn main chuỗi trao đổi on load — verify cả hai với trường dữ liệu thay vì assuming them. QwikCity là meta-framework — SSR và SSG có thể là mixed theo route, không chosen sau khi cho toàn bộ project. Metadata lives trong head export (tiêu đề, meta, OG, canonical, JSON-LD), fed by routeLoader$() cho máy chủ-side dữ liệu. Sitemaps là tự động trong SSG (cho routes thực ra được xây dựng) và dynamic route trong SSR. Qwik là hiện tại on của nó v2 line (beta) as của điều này writing. honest caveat: ecosystem là newer và nhỏ hơn React.

Resumability: cốt lõi ý tưởng (và Vì sao SEO cares)

Qwik đã là được xây dựng by Miško Hevery — đó creator of Angular — tại builder.io, và của nó toàn bộ reason để exist là để kill hydration. (As of này writing, Qwik là on của nó v2 line, hiện tại trong beta — kiểm tra đó API surface so với của bạn installed version trước copying code từ bất kỳ nguồn, including này một.) Hydration là điều gì mỗi mainstream framework làm sau SSR: điều này downloads đó component code và re-executes điều này trong đó trình duyệt để attach event handlers và rebuild internal state. As Hevery diễn đạt điều này, “Hydration is when an application is downloaded and executed twice, once as HTML and again as JavaScript.” (bản dịch) «Hydration là khi an application là downloaded và executed twice, khi as HTML và again as JavaScript.» Đó second execution là pure overhead — đó trang looks ready nhưng không interactive, và đó main chuỗi trao đổi là blocked.

Qwik thay vì serializes three điều vào HTML tại SSR time:

  • Event listeners — encoded as HTML các thuộc tính (e.g. on:click="./chunk.js#symbol"). tiny inline script ( Qwikloader, ~1 KB) attaches một global listener, đọc encoded chunk/symbol on event, và downloads chỉ đó handler code on demand.
  • Component tree structure — encoded trong HTML comments, so Qwik có thể rebuild hierarchy không có executing component code.
  • Application state — serialized vào <script type="qwik/json"> block, so bất kỳ component có thể resume không có của nó parent là present.

Khi đó trang loads, Qwik không re-chạy của bạn components. Evidence for this claim Qwik resumability restores listeners and application state without rerunning component initialization on page startup. Scope: Qwik resumability model. Confidence: high · Verified: Qwik: Resumable As đó tài liệu put điều này, “Resumability is a way for a framework to recover its state without re-executing the application components on the client.” (bản dịch) «Resumability là một way cho một framework để recover của nó state không có re-executing đó application components on đó client.» Đó kết quả, trong đó tài liệu’ words: “Qwik apps work instantly without any delay because they don’t need hydration, regardless of their size or complexity.” (bản dịch) «Qwik apps hoạt động instantly không có bất kỳ delay vì they không cần hydration, regardless of của họ size hoặc complexity.»

Đây là không Islands Architecture (Astro). Islands vẫn hydrate mỗi island individually. Qwik hydrates không có gì — có không theo-island hydration cost vì có không hydration tại all.

Điều gì các crawler thực ra nhận

Vì Qwik pre-renders mọi thứ máy chủ-side và không bao giờ re-renders on đó client, đó HTML Googlebot fetches đã contains của bạn hoàn tất nội dung — text, links, headings, đó lot — cho một route đó là thực ra được kết xuất on đó máy chủ. Kết xuất là một theo-route decision trong QwikCity (SSR, SSG, hoặc một mix); một route left trong client-chỉ chế độ, hoặc nội dung fetched từ một client-side effect thay vì routeLoader$(), không nhận này benefit chỉ vì đó project dùng Qwik. Google xử lý JavaScript trong hai waves (HTML đầu tiên, thì một deferred render truyền đó có thể lag hours để days). MỘT heavily client-được kết xuất app risks nội dung chỉ cho thấy lên trong đó second wave. MỘT properly máy chủ-được kết xuất Qwik route sidesteps đó risk: có không render-queue delay vì đó nội dung đã là không bao giờ đang chờ on client JS ngay từ đầu. Treat “Qwik pages behave like static HTML for crawlers” (bản dịch) «Qwik các trang behave như static HTML cho các crawler» as đó architecture intent, thì xác nhận điều này on của bạn deployed URLs với view-nguồn — đó safest posture cho JavaScript SEO là verifying đó phản hồi, không trusting đó framework label.

Bing hoạt động giống nhau way — hai-wave model đó prefers máy chủ-được kết xuất HTML cho efficiency. Qwik HTML-đầu tiên output benefits cả hai engines cho giống nhau reason.

Core Web Vitals: structural advantage

Google dùng trường dữ liệu (CrUX) cho đó Trang Experience tín hiệu, và INP replaced FID as một Cốt lõi Web Vital trong March 2024. Ở đây nơi Qwik architecture pays off trực tiếp: với đó Qwikloader as đó chỉ script đang chạy on load — đó tài liệu note các trang “can boot with about 1kb of JS (regardless of application complexity)” (bản dịch) «có thể boot với về 1kb of JS (regardless of application complexity)» — có gần như không có gì để block đó main chuỗi trao đổi. Total Blocking Time trends toward zero và INP vẫn giữ thấp vì có không hydration truyền competing với người dùng đầu tiên interactions. MỘT bigger Qwik app không có nghĩa là một bigger startup bill; đó JavaScript là fetched lazily, theo interaction, không as một boot bundle.

đó khác biệt từ established các framework. tiếp theo.js, Nuxt, và Angular SSR all put nội dung trong HTML cũng — họ’re không bad Đối với SEO — nhưng họ carry hydration cost đó scales với app. Qwik xóa đó cost by design.

đó architectural expectation, không measured kết quả. nó không bảo đảm cụ thể INP, TBT, hoặc CrUX score cho của bạn trang web — thứ ba-party scripts, phân tích tags, và theo-route dữ liệu-fetching cost có thể all eat vào advantage. xác nhận nó với trường dữ liệu (CrUX, Search Console’s Core Web Vitals báo cáo) on của bạn own deployed các URL trước khi đang làm performance claim để client hoặc stakeholder; see Cách Đo lường tab cho cụ thể KPIs và cadence.

Meta tags và document head

Trong QwikCity, trang metadata lives trong head export từ mỗi route file. cho static metadata nó constant: Evidence for this claim Qwik City route modules can export a DocumentHead value or function for route metadata. Scope: Qwik City route metadata. Confidence: high · Verified: Qwik City: Head 

export const head: DocumentHead = {
  title: 'Qwik SEO Guide',
  meta: [
    { name: 'description', content: 'How Qwik resumability helps SEO.' },
    { property: 'og:title', content: 'Qwik SEO Guide' },
    { property: 'og:description', content: 'Resumability, meta tags, sitemaps.' },
  ],
  links: [
    { rel: 'canonical', href: 'https://example.com/qwik-seo/' },
  ],
};

tất cả Đây là được kết xuất máy chủ-side vào <head>, so nó trong HTML crawler sees. canonical pattern — links: [{ rel: 'canonical', href: '...' }] — là easy để miss nhưng là right place cho nó.

Cho dynamic metadata (blog posts, các sản phẩm), đó SEO-cốt yếu pattern là routeLoader$(). Điều này chạy máy chủ-side trước đó HTML phản hồi, và đó head export can be a function that receives the resolved loader value:

export const usePost = routeLoader$(async ({ params }) => {
  return await getPost(params.slug); // runs on the server
});

export const head: DocumentHead = ({ resolveValue }) => {
  const post = resolveValue(usePost);
  return {
    title: post.title,
    meta: [{ name: 'description', content: post.excerpt }],
    links: [{ rel: 'canonical', href: `https://example.com/blog/${post.slug}/` }],
  };
};

Đây là QwikCity tương đương của getServerSideProps. discipline đó matters Đối với SEO: fetch metadata dữ liệu với routeLoader$(), không trong client-side effect (useSignal()/useResource$() đó chạy trong trình duyệt). nếu bạn đặt tiêu đề từ client effect, nó sẽ không là trong đầu tiên-wave HTML.

Dữ liệu có cấu trúc (JSON-LD)

JSON-LD goes trong head export scripts array, được kết xuất inline trong <head> máy chủ-side và fully crawlable:

export const head: DocumentHead = ({ resolveValue }) => {
  const post = resolveValue(usePost);
  return {
    title: post.title,
    scripts: [
      {
        props: { type: 'application/ld+json' },
        script: JSON.stringify({
          '@context': 'https://schema.org',
          '@type': 'Article',
          headline: post.title,
          datePublished: post.date,
        }),
      },
    ],
  };
};

vì nó serialized vào HTML phản hồi, có không kết xuất delay trước khi markup là khả dụng để các crawler. Một setup detail đó easy để miss: scripts trường chỉ produces output nếu của bạn project router-head component thực ra renders head.scripts (typically qua dangerouslySetInnerHTML) — nó không tự động chỉ vì bạn populated array. nếu starter template router-head.tsx không đã loop over head.scripts, thêm đó trước khi trusting JSON-LD hiển thị lên trong phản hồi.

Sitemaps và robots.txt

  • SSG xây dựng: sitemapOutFile config option auto-generates sitemap.xml during static xây dựng — nhưng nó chỉ bao gồm routes đó là thực ra được xây dựng. route excluded từ static xây dựng (dynamic params bạn đã không pre-render, trang gated behind condition) sẽ không là trong sitemap mặc dù nó tồn tại.
  • SSR các trang: có không tự động sitemap — thêm route tại src/routes/sitemap.xml/index.ts với RequestHandler đó xây dựng và trả về XML dynamically.
  • robots.txt: drop nó trong /public/ so nó phân phối tại root.
  • Canonical và sitemap các URL cả hai phụ thuộc on origin. QwikCity xây dựng absolute các URL từ configured origin/base (hoặc forwarded-header origin trong SSR middleware). sai hoặc leaked preview/staging origin trong đó configuration produces sai canonicals và sitemap entries trong production — kiểm tra thực tế output, không chỉ config file, sau khi bất kỳ adapter hoặc deployment thay đổi.
Evidence for this claim The SSG origin and base configuration affect absolute canonical and sitemap URLs; preview or deployment origins can leak into production output if adapter configuration is wrong. Scope: production build, server adapter, origin reconstruction and caching Confidence: high · Verified: Deployments

SEO quốc tế

Hai mechanisms, được sử dụng together:

  • rewriteRoutes trong QwikCity config maps localized URL paths để của bạn routes không có duplicating components (e.g. /it/documentazione/ → /docs/). điều này cho bạn sạch, localized các URL — foundation cho international URL structure.
  • Qwik Speak ( tách biệt library) xử lý nội dung translation.
  • hreflang tags go trong head export links array, pointing mỗi locale tại của nó alternates. See SEO quốc tế và hreflang cho cross-engine rules.

SSR so với. SSG Đối với SEO

Cả hai put nội dung trong HTML, so cả hai là crawler-safe — và QwikCity lets bạn mix modes theo route, không chỉ sau khi cho toàn bộ project. chọn theo route by nội dung shape:

  • SSG (static adapter) produces pure HTML files, không máy chủ needed — ideal cho nội dung đó không thay đổi theo yêu cầu. Tự động sitemap (cho routes đó là thực ra được xây dựng), cheapest hosting, fastest TTFB từ CDN. tradeoff là freshness: nội dung chỉ cập nhật on tiếp theo xây dựng, và route đó fails để xây dựng đơn giản không phải ở đó.
  • SSR renders theo yêu cầu — needed cho personalized hoặc frequently thay đổi dữ liệu. Chạy nó tại edge (Cloudflare, Vercel, Netlify) cho thấp TTFB, và đặt Cache-Control các header on SSR các phản hồi so CDN có thể phục vụ repeats không có re-kết xuất. tradeoff là đó thất bại tại yêu cầu time ( chậm hoặc errored routeLoader$()) ảnh hưởng trực tiếp phản hồi, so thêm lỗi xử lý cho dữ liệu fetch thay vì letting nó surface as hỏng trang.

Neither chế độ là “more SEO-safe” (bản dịch) «hơn SEO-safe» hơn đó other theo mặc định — pick theo route based on cách thường đó nội dung thay đổi và điều gì happens nếu đó dữ liệu nguồn là briefly không khả dụng, thì verify đó deployed phản hồi either way.

Điều gì để watch out cho

  • không mọi thứ serializes. Class instances, promises, và streams có thể’t là put vào HTML state. Code đó touches them có để chạy client-chỉ — giữ nó out của bất cứ điều gì đó cần để là trong máy chủ HTML (especially metadata). nếu bạn có chủ ý exclude giá trị với noSerialize(), remember nó xuất hiện lại as undefined sau khi app resumes on client — không reach cho nó on bất cứ điều gì trang vẫn cần để đọc post-resume, including metadata paths.
  • useVisibleTask$() là thực escape hatch, sử dụng nó sparingly. nó chạy eagerly on client sau khi ban đầu render — một hook đó có chủ ý hoạt động so với resumability. nó không block kết xuất hoặc hurt ban đầu HTML, nhưng nó làm có nghĩa là client JS là đang chạy đó Qwik sẽ nếu không có deferred. Fine cho genuinely client-chỉ hoạt động ( chart library, map); sai lựa chọn cho bất cứ điều gì đó nên là feeding máy chủ-được kết xuất metadata.
  • Verify meta tags là trong nguồn, không injected by JS. View-nguồn (không chỉ DevTools’ được kết xuất DOM) nên hiển thị của bạn tiêu đề, canonical, và JSON-LD. nếu họ chỉ xuất hiện trong được kết xuất DOM, bạn đặt them từ client effect thay vì head export / routeLoader$().
  • routeLoader$() so với. useResource$()/useSignal(). Loaders chạy on máy chủ và feed head; others có thể chạy trong trình duyệt. cho bất cứ điều gì đó phải là trong metadata hoặc đầu tiên-wave HTML, sử dụng loader.
  • Nhỏ hơn ecosystem. Qwik có far ít hơn CMS connectors và SEO plugin hơn tiếp theo.js, và nhỏ hơn community để draw on. framework là capable; bạn’ll chỉ ghi nhiều hơn glue yourself. builder.io own trang web chạy on Qwik, so nó được sử dụng trong production — nhưng go trong eyes-open về maturity khoảng trống.

nơi điều này sits

Qwik là một của hai các framework trong JavaScript các framework story — khác là SolidJS. Điểm mấu chốt phân biệt để giữ straight: Qwik resumes; SolidJS (và React, Vue, Angular) hydrate. Cả hai vẫn output nội dung-rich HTML qua của họ meta-các framework, so crawling là fine either way; resumability angle là Điều gì làm Qwik INP/TBT profile structurally best của group. cho chỉ số side, see Core Web Vitals; cho foundations, JavaScript SEO hub.

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.