Bahasa

Panduan Qwik SEO

Bagaimana 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 · Lanjutan
AIDitulis olehAI v2
1 sinyal bukti di halaman ini

Qwik adalah sebuah JavaScript kerangka kerja milik siapa core trick adalah resumability: server serializes app state, listeners, dan component tree ke HTML, so browser resumes tanpa hydrating (sebuah ~1 KB Qwikloader script masih berjalan — ini adalah tidak secara harfiah zero JS). untuk SEO itu's sebuah double win pada routes itu adalah sebenarnya server-dirender — konten adalah di HTML oleh default (crawler see ini immediately, Tidak render-wave delay) dan INP/TBT trend toward zero karena Tidak hydration blocks main utas pada muat; konfirmasi keduanya dengan data lapangan alih-alih assuming them. QwikCity, meta-kerangka kerja, 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-dirender. Basic SEO berfungsi out dari box; main discipline adalah menggunakan routeLoader$() untuk dynamic metadata, tidak client-side effects. catch adalah sebuah lebih kecil ecosystem daripada React/Vue, dan — sebagai dari ini writing — Qwik adalah pada -nya v2 line, saat ini 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 berjalan, so ini adalah tidak secara harfiah zero JS. itu’s categorically berbeda dari React/Vue/Angular/SolidJS, yang semua hydrate. pada routes itu adalah sebenarnya server-dirender, SEO payoff adalah twofold: konten adalah di HTML oleh default (Tidak render-wave delay untuk crawler) dan INP/TBT trend toward zero karena Tidak hydration blocks main utas pada muat — verify keduanya dengan field data alih-alih assuming them. QwikCity adalah meta-kerangka kerja — SSR dan SSG dapat menjadi mixed per route, tidak chosen setelah untuk seluruh 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 sebenarnya dibangun) dan sebuah dynamic route di SSR. Qwik adalah saat ini pada -nya v2 line (beta) sebagai dari ini writing. honest caveat: ecosystem adalah newer dan lebih kecil daripada React’s.

Resumability: core idea (dan mengapa SEO cares)

Qwik adalah dibangun oleh Miško Hevery — creator dari Angular — di builder.io, dan -nya seluruh alasan untuk exist adalah untuk kill hydration. (sebagai dari ini writing, Qwik adalah pada -nya v2 line, saat ini di beta — periksa API surface terhadap Anda installed versi sebelum copying code dari apa pun sumber, including ini satu.) Hydration adalah apa setiap mainstream kerangka kerja 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 adalah ketika an application adalah downloaded dan executed twice, setelah sebagai HTML dan again sebagai JavaScript.” (terjemahan) “Hydration adalah ketika sebuah application adalah downloaded dan executed twice, setelah sebagai HTML dan again sebagai JavaScript.” itu kedua execution adalah pure overhead — halaman looks ready tetapi tidak interactive, dan main utas adalah blocked.

Qwik alih-alih serializes three hal 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 satu global listener, membaca 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 tanpa executing component code.
  • Application state — serialized ke sebuah <script type="qwik/json"> block, so apa pun component dapat resume tanpa -nya parent menjadi present.

Ketika halaman memuat, Qwik tidak re-jalankan Anda components. Bukti untuk klaim ini Qwik resumability restores listeners and application state without rerunning component initialization on page startup. Cakupan: Qwik resumability model. Tingkat keyakinan: tinggi · Diverifikasi: Qwik: Resumable sebagai docs put ini, “Resumability adalah a way untuk a kerangka kerja untuk recover its state tanpa re-executing itu application components pada itu client.” (terjemahan) “Resumability adalah sebuah cara untuk sebuah kerangka kerja untuk recover -nya state tanpa re-executing application components pada client.” hasil, di docs’ kata: “Qwik apps berfungsi instantly tanpa any delay karena they jangan perlu hydration, regardless dari mereka size atau complexity.” (terjemahan) “Qwik apps berfungsi instantly tanpa apa pun delay karena mereka jangan perlu hydration, regardless dari mereka size atau complexity.”

ini adalah tidak Islands Architecture (Astro). Islands masih hydrate setiap island individually. Qwik hydrates tidak ada apa pun — ada Tidak per-island hydration cost karena ada Tidak hydration di semua.

Apa crawler sebenarnya menerima

Karena Qwik pre-renders semuanya server-side dan tidak pernah re-renders pada client, ** HTML Googlebot fetches sudah berisi Anda menyelesaikan konten** — text, tautan, heading, lot — untuk sebuah route itu’s sebenarnya dirender 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$(), tidak mendapatkan ini benefit hanya karena project menggunakan Qwik. Google memproses JavaScript di dua waves (HTML pertama, lalu sebuah deferred render lulus itu dapat lag hours untuk days). sebuah heavily client-dirender app risks konten hanya menunjukkan up di itu kedua wave. sebuah properly server-dirender Qwik route sidesteps itu risk: ada Tidak render-queue delay karena konten adalah tidak pernah menunggu pada client JS di pertama place. Treat “Qwik halaman behave like static HTML untuk crawlers” (terjemahan) “Qwik halaman behave like static HTML untuk crawler” sebagai architecture’s intent, lalu konfirmasi ini pada Anda deployed URLs dengan view-sumber — safest posture untuk JavaScript SEO adalah verifying respons, tidak trusting kerangka kerja label.

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

Core Web Vitals: sebuah structural advantage

Google menggunakan data lapangan (CrUX) untuk pengalaman halaman sinyal, dan INP replaced FID sebagai sebuah Core Web Vital di March 2024. Di sini’s di mana Qwik’s architecture pays off secara langsung: dengan Qwikloader sebagai satu-satunya script berjalan pada muat — docs note situs “dapat boot dengan tentang 1kb dari JS (regardless dari application complexity)” (terjemahan) “dapat boot dengan tentang 1kb dari JS (regardless dari application complexity)” — ada hampir tidak ada apa pun untuk block main utas. Total Blocking Time trends toward zero dan INP tetap rendah karena ada Tidak hydration lulus competing dengan pengguna’s pertama interactions. sebuah bigger Qwik app tidak berarti sebuah bigger startup bill; JavaScript adalah fetched lazily, per interaction, tidak sebagai satu boot bundle.

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

itu’s architectural expectation, tidak sebuah diukur hasil. ini tidak jaminan 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. Konfirmasi 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: Bukti untuk klaim ini Qwik City route modules can export a DocumentHead value or function for route metadata. Cakupan: Qwik City route metadata. Tingkat keyakinan: tinggi · Diverifikasi: 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 dirender 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 berjalan server-side sebelum HTML respons, dan head export dapat menjadi a function itu menerima itu 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$(), tidak di sebuah client-side effect (useSignal()/useResource$() itu jalankan di browser). jika Anda atur judul dari sebuah client effect, ini tidak akan menjadi di pertama-wave HTML.

data terstruktur (JSON-LD)

JSON-LD goes di head export’s scripts array, dirender 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,
        }),
      },
    ],
  };
};

Karena ini adalah serialized ke HTML respons, ada Tidak rendering delay sebelum markup adalah tersedia untuk crawler. Satu setup detail itu’s easy untuk miss: scripts field hanya produces output jika Anda project’s router-head component sebenarnya renders head.scripts (typically melalui dangerouslySetInnerHTML) — ini adalah tidak automatic hanya karena Anda populated array. jika sebuah starter template’s router-head.tsx tidak 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 sebenarnya dibangun. sebuah route excluded dari static bangun (dynamic params Anda tidak pre-render, sebuah halaman gated behind sebuah condition) tidak akan menjadi di sitemap bahkan though ini ada.
  • SSR situs: ada Tidak 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 keduanya bergantung 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 sebenarnya output, tidak hanya config file, setelah apa pun adapter atau deployment perubahan.
Bukti untuk klaim ini 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. Cakupan: production build, server adapter, origin reconstruction and caching Tingkat keyakinan: tinggi · Diverifikasi: Deployments

SEO internasional

Dua mechanisms, digunakan together:

  • rewriteRoutes di QwikCity config maps localized URL paths untuk Anda routes tanpa duplicating components (e.g. /it/documentazione/ → /docs/). ini memberikan Anda bersih, localized URLs — foundation untuk sebuah international struktur URL.
  • Qwik Speak (sebuah terpisah library) menangani 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

Keduanya put konten di HTML, so keduanya adalah crawler-safe — dan QwikCity lets Anda mix modes per route, tidak hanya setelah untuk seluruh project. Choose per route oleh konten shape:

  • SSG (static adapter) produces pure HTML files, Tidak server needed — ideal untuk konten itu tidak perubahan per permintaan. Automatic sitemap (untuk routes itu adalah sebenarnya dibangun), cheapest hosting, fastest TTFB dari sebuah CDN. tradeoff adalah freshness: konten hanya memperbarui pada berikutnya bangun, dan sebuah route itu fails untuk bangun sekadar tidak di sana.
  • SSR renders per permintaan — needed untuk personalized atau frequently mengubah data. Jalankan ini di edge (Cloudflare, Vercel, Netlify) untuk rendah TTFB, dan set Cache-Control headers pada SSR respons so CDN dapat sajikan repeats tanpa re-rendering. tradeoff adalah itu sebuah failure di permintaan time (sebuah slow atau errored routeLoader$()) memengaruhi langsung respons, so tambahkan error menangani untuk data fetch alih-alih letting ini surface sebagai sebuah rusak halaman.

Neither mode adalah “more SEO-safe” (terjemahan) “lebih SEO-safe” daripada lainnya oleh default — pick per route based pada bagaimana sering konten perubahan dan apa happens jika data sumber adalah briefly tidak tersedia, lalu verify deployed respons either cara.

Apa untuk watch out untuk

  • Tidak semuanya serializes. Class instances, promises, dan streams dapat’t menjadi put ke HTML state. Code itu touches them memiliki untuk jalankan client-hanya — pertahankan ini out dari apa pun itu perlu untuk menjadi di server HTML (terutama metadata). jika Anda dengan sengaja exclude sebuah nilai dengan noSerialize(), remember ini muncul back sebagai undefined setelah app resumes pada client — jangan reach untuk ini pada apa pun halaman masih perlu untuk baca post-resume, including metadata paths.
  • useVisibleTask$() adalah sebuah nyata escape hatch, gunakan ini sparingly. ini berjalan eagerly pada client setelah awal render — satu hook itu dengan sengaja berfungsi terhadap resumability. ini tidak block rendering atau hurt awal HTML, tetapi ini melakukan berarti client JS adalah berjalan itu Qwik akan jika tidak memiliki deferred. Fine untuk genuinely client-hanya berfungsi (sebuah chart library, sebuah map); wrong pilihan untuk apa pun itu seharusnya menjadi feeding server-dirender metadata.
  • Verify meta tags adalah di sumber, tidak injected oleh JS. View-sumber (tidak hanya DevTools’ dirender DOM) seharusnya tampilkan Anda judul, canonical, dan JSON-LD. jika mereka hanya muncul di dirender DOM, Anda set them dari sebuah client effect alih-alih head export / routeLoader$().
  • routeLoader$() vs. useResource$()/useSignal(). Loaders jalankan pada server dan feed head; others dapat jalankan di browser. untuk apa pun itu harus menjadi di metadata atau pertama-wave HTML, gunakan loader.
  • Lebih kecil ecosystem. Qwik memiliki far fewer CMS connectors dan SEO plugins daripada Berikutnya.js, dan sebuah lebih kecil community untuk draw pada. kerangka kerja adalah capable; Anda’ll hanya tulis lebih glue yourself. builder.io’s own situs berjalan pada Qwik, so ini adalah digunakan di production — tetapi go di eyes-open tentang maturity kesenjangan.

Di mana ini sits

Qwik adalah satu dari dua kerangka kerja di JavaScript kerangka kerja story — lainnya menjadi SolidJS. key pembedaan untuk pertahankan straight: Qwik resumes; SolidJS (dan React, Vue, Angular) hydrate. Keduanya masih output konten-rich HTML melalui mereka meta-kerangka kerja, so crawling adalah fine either cara; resumability angle adalah apa membuat Qwik’s INP/TBT profile structurally best dari group. untuk metric side, see Core Web Vitals; untuk foundations, JavaScript SEO hub.

Tambahkan catatan pakar

Sematkan kutipan pakar

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