Bahasa

Panduan Qwik SEO

How Qwik's resumability puts konten di HTML oleh default dan drives near-zero INP dan TBT — plus QwikCity patterns untuk meta tags, canonical URLs, JSON-LD, sitemaps, dan i18n itu membuat sebuah Qwik situs peringkat.

Pertama kali diterbitkan: 26 Jun 2026 · Terakhir diperbarui: 3 Agu 2026 · Advanced
Bahasa
AIDitulis olehAI v2
1 sinyal bukti di halaman ini

Qwik adalah sebuah JavaScript framework whose core trick adalah resumability: server serializes app state, listeners, dan component tree ke HTML, so browser resumes without hydrating (sebuah ~1 KB Qwikloader script masih runs — ini adalah not literally zero JS). untuk SEO itu's sebuah double win pada routes itu adalah actually server-rendered — konten adalah di HTML oleh default (crawler see ini immediately, no render-wave delay) dan INP/TBT trend toward zero because no hydration blocks main thread pada muat; confirm both dengan data lapangan alih-alih assuming them. QwikCity, meta-framework, lets Anda mix SSR dan SSG per route, plus routeLoader$() untuk server-side data dan sebuah head export untuk judul/meta/OG/canonical/JSON-LD — semua server-rendered. Basic SEO berfungsi out dari box; main discipline adalah menggunakan routeLoader$() untuk dynamic metadata, not client-side effects. catch adalah sebuah smaller ecosystem daripada React/Vue, dan — sebagai dari ini writing — Qwik adalah pada -nya v2 line, currently di beta.

TL;DR — Qwik’s core innovation adalah resumability: di SSR time ini serializes event listeners (sebagai HTML attributes), component tree (di HTML comments), dan app state (di sebuah qwik/json script) ke HTML, so browser resumes alih-alih hydrating — sebuah ~1 KB Qwikloader script masih runs, so ini adalah not literally zero JS. itu’s categorically berbeda dari React/Vue/Angular/SolidJS, which semua hydrate. pada routes itu adalah actually server-rendered, SEO payoff adalah twofold: konten adalah di HTML oleh default (no render-wave delay untuk crawler) dan INP/TBT trend toward zero because no hydration blocks main thread pada muat — verify both dengan field data alih-alih assuming them. QwikCity adalah meta-framework — SSR dan SSG dapat menjadi mixed per route, not chosen once untuk whole project. Metadata lives di head export (judul, meta, OG, canonical, JSON-LD), fed oleh routeLoader$() untuk server-side data. Sitemaps adalah automatic di SSG (untuk routes actually dibangun) dan sebuah dynamic route di SSR. Qwik adalah currently pada -nya v2 line (beta) sebagai dari ini writing. honest caveat: ecosystem adalah newer dan smaller daripada React’s.

Resumability: core idea (dan why SEO cares)

Qwik adalah dibangun oleh Miško Hevery — creator dari Angular — di builder.io, dan -nya whole alasan untuk exist adalah untuk kill hydration. (sebagai dari ini writing, Qwik adalah pada -nya v2 line, currently di beta — periksa API surface terhadap Anda installed versi sebelum copying code dari apa pun source, including ini one.) Hydration adalah what setiap mainstream framework melakukan setelah SSR: ini downloads component code dan re-executes ini di browser untuk attach event handlers dan rebuild internal state. sebagai Hevery puts ini, “Hydration is when an application is downloaded and executed twice, once as HTML and again as JavaScript.” (terjemahan) “Hydration adalah when sebuah application adalah downloaded dan executed twice, once sebagai HTML dan again sebagai JavaScript.” itu kedua execution adalah pure overhead — halaman looks ready tetapi isn’t interactive, dan main thread adalah blocked.

Qwik instead serializes three things ke HTML di SSR time:

  • Event listeners — encoded sebagai HTML attributes (e.g. on:click="./chunk.js#symbol"). sebuah tiny inline script ( Qwikloader, ~1 KB) attaches one global listener, reads encoded chunk/symbol pada sebuah event, dan downloads hanya itu handler code pada demand.
  • Component tree structure — encoded di HTML comments, so Qwik dapat rebuild hierarchy without executing component code.
  • Application state — serialized ke sebuah <script type="qwik/json"> block, so apa pun component dapat resume without -nya parent menjadi present.

When halaman memuat, Qwik doesn’t re-run Anda 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 sebagai docs put ini, “Resumability is a way for a framework to recover its state without re-executing the application components on the client.” (terjemahan) “Resumability adalah sebuah cara untuk sebuah framework untuk recover -nya state without re-executing application components pada client.” hasil, di docs’ kata: “Qwik apps work instantly without any delay because they don’t need hydration, regardless of their size or complexity.” (terjemahan) “Qwik apps berfungsi instantly without apa pun delay because mereka don’t perlu hydration, regardless dari mereka size atau complexity.”

ini adalah not Islands Architecture (Astro). Islands masih hydrate setiap island individually. Qwik hydrates nothing — there’s no per-island hydration cost because there’s no hydration di semua.

What crawler actually menerima

Because Qwik pre-renders everything server-side dan tidak pernah re-renders pada client, ** HTML Googlebot fetches sudah berisi Anda complete konten** — text, tautan, heading, lot — untuk sebuah route itu’s actually rendered pada server. rendering adalah sebuah per-route decision di QwikCity (SSR, SSG, atau sebuah mix); sebuah route left di client-hanya mode, atau konten fetched dari sebuah client-side effect alih-alih routeLoader$(), doesn’t get ini benefit hanya because project menggunakan Qwik. Google processes JavaScript di two waves (HTML pertama, lalu sebuah deferred render pass itu dapat lag hours untuk days). sebuah heavily client-rendered app risks konten hanya showing up di itu kedua wave. sebuah properly server-rendered Qwik route sidesteps itu risk: there’s no render-queue delay because konten adalah tidak pernah waiting pada client JS di pertama place. Treat “Qwik pages behave like static HTML for crawlers” (terjemahan) “Qwik halaman behave like static HTML untuk crawler” sebagai architecture’s intent, lalu confirm ini pada Anda deployed URLs dengan view-source — safest posture untuk JavaScript SEO adalah verifying respons, not trusting framework label.

Bing berfungsi yang sama cara — sebuah two-wave model itu prefers server-rendered HTML untuk efficiency. Qwik’s HTML-pertama output benefits both mesin untuk yang sama alasan.

Core Web Vitals: sebuah structural advantage

Google menggunakan data lapangan (CrUX) untuk pengalaman halaman signal, dan INP replaced FID sebagai sebuah Core Web Vital di March 2024. Here’s where Qwik’s architecture pays off directly: dengan Qwikloader sebagai satu-satunya script running pada muat — docs note situs “can boot with about 1kb of JS (regardless of application complexity)” (terjemahan) “dapat boot dengan tentang 1kb dari JS (regardless dari application complexity)” — there’s almost nothing untuk block main thread. Total Blocking Time trends toward zero dan INP stays rendah because there’s no hydration pass competing dengan pengguna’s pertama interactions. sebuah bigger Qwik app tidak berarti sebuah bigger startup bill; JavaScript adalah fetched lazily, per interaction, not sebagai one boot bundle.

itu’s difference dari established frameworks. Next.js, Nuxt, dan Angular SSR semua put konten di HTML too — mereka’re not buruk untuk SEO — tetapi mereka carry sebuah hydration cost itu scales dengan app. Qwik menghapus itu cost oleh design.

itu’s architectural expectation, not sebuah diukur hasil. ini doesn’t guarantee sebuah spesifik INP, TBT, atau CrUX score untuk Anda situs — ketiga-party scripts, analytics tags, dan per-route data-fetching cost dapat semua eat ke advantage. Confirm ini dengan data lapangan (CrUX, Search Console’s Core Web Vitals report) pada Anda own deployed URLs sebelum membuat sebuah performa claim untuk sebuah client atau stakeholder; see cara mengukur tab untuk spesifik KPIs dan cadence.

Meta tags dan document head

di QwikCity, halaman metadata lives di sebuah head export dari setiap route file. untuk static metadata ini adalah sebuah 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/' },
  ],
};

semua dari ini adalah rendered server-side ke <head>, so ini adalah di HTML crawler sees. canonical pattern — links: [{ rel: 'canonical', href: '...' }] — adalah easy untuk miss tetapi adalah right place untuk ini.

untuk dynamic metadata (blog posts, products), SEO-critical pattern adalah routeLoader$(). ini runs server-side sebelum HTML respons, dan 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}/` }],
  };
};

ini adalah QwikCity’s equivalent dari getServerSideProps. discipline itu penting untuk SEO: fetch metadata data dengan routeLoader$(), not di sebuah client-side effect (useSignal()/useResource$() itu run di browser). jika Anda atur judul dari sebuah client effect, ini won’t menjadi di pertama-wave HTML.

data terstruktur (JSON-LD)

JSON-LD goes di head export’s scripts array, rendered inline di <head> server-side dan fully dapat di-crawl:

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,
        }),
      },
    ],
  };
};

Because ini adalah serialized ke HTML respons, there’s no rendering delay sebelum markup adalah available untuk crawler. One setup detail itu’s easy untuk miss: scripts field hanya produces output jika Anda project’s router-head component actually renders head.scripts (typically via dangerouslySetInnerHTML) — ini adalah not automatic hanya because Anda populated array. jika sebuah starter template’s router-head.tsx doesn’t sudah loop di atas head.scripts, tambahkan itu sebelum trusting JSON-LD menampilkan up di respons.

Sitemaps dan robots.txt

  • SSG membangun: sitemapOutFile config option auto-generates sitemap.xml selama static bangun — tetapi ini hanya mencakup routes itu adalah actually dibangun. sebuah route excluded dari static bangun (dynamic params Anda didn’t pre-render, sebuah halaman gated behind sebuah condition) won’t menjadi di sitemap bahkan though ini exists.
  • SSR situs: there’s no automatic sitemap — tambahkan sebuah route di src/routes/sitemap.xml/index.ts dengan sebuah RequestHandler itu membangun dan mengembalikan XML dynamically.
  • robots.txt: drop ini di /public/ so ini adalah disajikan di root.
  • Canonical dan sitemap URLs both depend pada origin. QwikCity membangun absolute URLs dari configured origin/base (atau sebuah forwarded-header origin di SSR middleware). sebuah wrong atau leaked preview/staging origin di itu configuration produces wrong canonicals dan sitemap entries di production — periksa actual output, not hanya config file, setelah apa pun adapter atau deployment perubahan.
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 internasional

Two mechanisms, digunakan together:

  • rewriteRoutes di QwikCity config maps localized URL paths untuk Anda routes without duplicating components (e.g. /it/documentazione/ → /docs/). ini gives Anda clean, localized URLs — foundation untuk sebuah international struktur URL.
  • Qwik Speak (sebuah separate library) handles konten translation.
  • hreflang tags go di head export’s links array, pointing setiap locale di -nya alternates. See SEO internasional dan hreflang untuk cross-mesin aturan.

SSR vs. SSG untuk SEO

Both put konten di HTML, so both adalah crawler-safe — dan QwikCity lets Anda mix modes per route, not hanya once untuk whole project. Choose per route oleh konten shape:

  • SSG (static adapter) produces pure HTML files, no server needed — ideal untuk konten itu doesn’t perubahan per permintaan. Automatic sitemap (untuk routes itu adalah actually dibangun), cheapest hosting, fastest TTFB dari sebuah CDN. tradeoff adalah freshness: konten hanya updates pada next bangun, dan sebuah route itu fails untuk bangun simply isn’t there.
  • SSR renders per permintaan — needed untuk personalized atau frequently changing data. Run ini di edge (Cloudflare, Vercel, Netlify) untuk rendah TTFB, dan set Cache-Control headers pada SSR respons so CDN dapat sajikan repeats without re-rendering. tradeoff adalah itu sebuah failure di permintaan time (sebuah slow atau errored routeLoader$()) affects live respons, so tambahkan error handling untuk data fetch alih-alih letting ini surface sebagai sebuah broken halaman.

Neither mode adalah “more SEO-safe” (terjemahan) “more SEO-safe” daripada lainnya oleh default — pick per route based pada how sering konten perubahan dan what happens jika data source adalah briefly unavailable, lalu verify deployed respons either cara.

What untuk watch out untuk

  • Not everything serializes. Class instances, promises, dan streams dapat’t menjadi put ke HTML state. Code itu touches them memiliki untuk run client-hanya — pertahankan ini out dari anything itu perlu untuk menjadi di server HTML (terutama metadata). jika Anda deliberately exclude sebuah nilai dengan noSerialize(), remember ini comes back sebagai undefined setelah app resumes pada client — don’t reach untuk ini pada anything halaman masih perlu untuk read post-resume, including metadata paths.
  • useVisibleTask$() adalah sebuah nyata escape hatch, gunakan ini sparingly. ini runs eagerly pada client setelah initial render — one hook itu deliberately berfungsi terhadap resumability. ini doesn’t block rendering atau hurt initial HTML, tetapi ini melakukan berarti client JS adalah running itu Qwik akan otherwise memiliki deferred. Fine untuk genuinely client-hanya berfungsi (sebuah chart library, sebuah map); wrong choice untuk anything itu seharusnya menjadi feeding server-rendered metadata.
  • Verify meta tags adalah di source, not injected oleh JS. View-source (not hanya DevTools’ rendered DOM) seharusnya tampilkan Anda judul, canonical, dan JSON-LD. jika mereka hanya appear di rendered DOM, Anda set them dari sebuah client effect alih-alih head export / routeLoader$().
  • routeLoader$() vs. useResource$()/useSignal(). Loaders run pada server dan feed head; others dapat run di browser. untuk anything itu harus menjadi di metadata atau pertama-wave HTML, gunakan loader.
  • Smaller ecosystem. Qwik memiliki far fewer CMS connectors dan SEO plugins daripada Next.js, dan sebuah smaller community untuk draw pada. framework adalah capable; Anda’ll hanya write more glue yourself. builder.io’s own situs runs pada Qwik, so ini adalah digunakan di production — tetapi go di eyes-open tentang maturity gap.

Where ini sits

Qwik adalah one dari two frameworks di JavaScript frameworks story — lainnya menjadi SolidJS. key distinction untuk pertahankan straight: Qwik resumes; SolidJS (dan React, Vue, Angular) hydrate. Both masih output konten-rich HTML via mereka meta-frameworks, so crawling adalah fine either cara; resumability angle adalah what membuat Qwik’s INP/TBT profile structurally best dari group. untuk metric side, see Core Web Vitals; untuk 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.