Bahasa

Panduan SolidJS SEO

cara membuat SolidJS situs dapat di-crawl, dapat diindeks, dan fast — mengapa bare SolidJS adalah CSR-hanya, bagaimana SolidStart's SSR/SSG memperbaiki ini, managing head tags dengan @solidjs/meta, dan mengapa SolidJS hydrates (ini adalah tidak resumable like Qwik).

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

SolidJS adalah sebuah fast, React-like library dengan fine-grained reactivity dan Tidak virtual DOM — tetapi pada -nya own ini adalah client-side dirender, so ini ships sebuah empty HTML shell dengan yang sama pengindeksan masalah sebagai bare React. perbaiki adalah SolidStart, official meta-kerangka kerja: SSR atau SSG put nyata konten dan metadata di pertama respons. Manage head tags dengan @solidjs/meta (<Title>, <Meta>, <Link>), kembalikan nyata 404s dengan <HttpStatusCode>, dan fetch data pada server dengan createAsync. Satu hal tidak untuk mix up: SolidJS hydrates — ini adalah tidak resumable. Resumability adalah Qwik's trick. SolidJS's win adalah sebuah Core Web Vitals edge pada top dari standard SSR.

TL;DR — SolidJS adalah fine-grained reactive (sinyal, Tidak virtual DOM) dan ships sebagai sebuah CSR library oleh default — sebuah empty shell dengan yang sama Wave-1 pengindeksan masalah sebagai bare React. SolidStart adalah perbaiki: SSR, SSG (route prerendering), dan streaming SSR put konten dan metadata di pertama respons. Manage head tags dengan @solidjs/meta (<Title>, <Meta>, <Link> di bawah sebuah <MetaProvider>), kembalikan nyata kode status dengan <HttpStatusCode>, dan muat data pada server dengan createAsync so ini lands di SSR HTML. accuracy spine: SolidJS hydrates — ini adalah Tidak resumable (itu’s Qwik). -nya fine-grained reactivity adalah sebuah client perbarui optimization, tidak sebuah server-untuk-client startup satu — so SEO upside adalah mostly sebuah Core Web Vitals (INP/TBT) edge layered pada top dari wajar SSR.

Bukti untuk klaim ini The article's described solidjs-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: SolidStart documentation 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

SolidJS architecture: apa sebenarnya berbeda

SolidJS menggunakan JSX itu looks identical untuk React’s, plus hooks-like primitives (createSignal, createEffect, createMemo). tetapi execution model adalah fundamentally berbeda:

  • React re-berjalan seluruh component function ketika state perubahan dan diffs sebuah virtual DOM untuk decide apa untuk perbarui.
  • SolidJS compiles JSX untuk nyata DOM operations di bangun time. Components jalankan setelah; reactive sinyal wire nilai secara langsung untuk spesifik DOM nodes itu bergantung pada them. Ketika sebuah sinyal perubahan, Solid memperbarui hanya itu node — Tidak reconciliation, Tidak virtual DOM overhead.

ini adalah mengapa SolidJS consistently sits near top dari js-kerangka kerja-benchmark suite, dan mengapa -nya runtime adalah dramatically leaner daripada React’s re-render model. library itself adalah roughly 7KB gzipped. Lebih kecil, surgical memperbarui plus sebuah tiny runtime adalah performa story — tetapi none dari itu perubahan rendering mode, yang adalah apa decides Anda SEO fate.

CSR oleh default: SEO masalah

bangun dengan SolidJS alone (Tidak SolidStart) dan Anda mendapatkan sebuah client-side-dirender app:

  1. server mengirim index.html dengan sebuah near-empty body — typically sebuah <div id="root"></div> dan sebuah script tag.
  2. browser downloads JS bundle, berjalan Solid’s reactive code, dan populates DOM.
  3. Googlebot’s pertama wave sees empty shell — tanpa konten, Tidak metadata.
  4. Googlebot’s kedua wave ( rendering queue) eventually berjalan JS dan sees konten — tetapi timing adalah unpredictable, dari hours untuk weeks.
  5. Bing, social crawler, dan non-JS bot dapat tidak pernah see konten di semua.

ini adalah dua-wave rendering proses, dan ini adalah yang sama trap apa pun CSR SPA falls ke. practical impacts: slow awal pengindeksan dari baru konten; judul dan deskripsi meta missing dari mentah HTML (so wrong/blank snippets di SERPs); dan soft 404s, karena sebuah CSR app dapat’t mengembalikan benar HTTP 404 — server selalu jawaban 200 dengan app shell.

SolidStart: perbaiki

SolidStart (1,0, stable) adalah official SolidJS meta-kerangka kerja, dibangun pada Vinxi (Vite + Nitro). ini menyediakan:

  • Isomorphic, file-based routing — files di bawah src/routes/ map untuk URLs (src/routes/blog/[slug].tsx → /blog/:slug). Satu correction worth menjadi precise tentang: SolidStart itself melakukan tidak ship sebuah router atau metadata library bundled di — per -nya own docs, “SolidStart itself melakukan tidak ship dengan a Router atau Metadata library. Rather, it leaves itu open untuk Anda untuk gunakan any library Anda ingin.” (terjemahan) “SolidStart itself melakukan tidak ship dengan sebuah Router atau Metadata library. Rather, ini leaves itu open untuk Anda untuk gunakan apa pun library Anda ingin.” routing dan @solidjs/meta perilaku described di sini come dari menambahkan @solidjs/router dan @solidjs/meta explicitly ( official templates tambahkan keduanya untuk Anda, yang adalah mengapa ini dapat feel automatic — periksa Anda package.json alih-alih assuming mereka came free dengan kerangka kerja).
  • Multiple rendering modes, chosen per route: CSR, SSR (synchronous, asynchronous, atau streaming), dan SSG / route prerendering. sebuah SolidStart project tidak “SSR” (terjemahan) “SSR” atau “CSR” (terjemahan) “CSR” sebagai sebuah seluruh — setiap route picks -nya own mode, so verify rendering config (dan resulting HTML) untuk spesifik route Anda care tentang alih-alih assuming seluruh situs inherited satu setting.
  • server functions — sebuah "use server" directive untuk RPC-style server code (data fetching, database access).
  • Adapters untuk Cloudflare, Vercel, Netlify, Deno, Node, dan static hosting.

versi note: ini reflects SolidStart 1,0’s saat ini documentation, yang labels itself beta dan adalah terakhir diperbarui 2026-04-28 — konfirmasi detail terhadap docs untuk versi Anda’re sebenarnya berjalan sebelum treating apa pun dari ini sebagai permanent API surface.

SSR vs. SSG vs. streaming — SEO baca

  • SSR (synchronous, asynchronous, atau streaming — SolidStart names ini sebagai distinct sub-modes) delivers penuh konten pada pertama permintaan dan adalah fully dapat diindeks pada Wave 1. Best untuk frequently mengubah halaman.
  • SSG (route prerendering) membangun HTML di deploy time — fastest TTFB dan LCP, CDN-cacheable, Tidak per-permintaan server berfungsi. Best untuk blogs, docs, dan marketing halaman. Configure prerendered routes di app.config.ts:
// app.config.ts
import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  server: {
    prerender: {
      routes: ["/", "/about", "/blog"],
    },
  },
});
  • Streaming SSR mengirim HTML progressively untuk meningkatkan TTFB pada data-berat halaman; Google renders penuh streamed output.
  • CSR adalah fine untuk authenticated dashboards dan alat itu jangan perlu untuk peringkat — tidak untuk publik konten.

Managing head tags dengan @solidjs/meta

@solidjs/meta package adalah SolidJS equivalent dari React Helmet atau Berikutnya.js’s <Head>. ini adalah SSR-ready dan asynchronous. Wrap Anda app di <MetaProvider> so tags adalah collected selama SSR, lalu set per-halaman tags di dalam Anda route components:

// src/routes/about.tsx
import { Title, Meta, Link } from "@solidjs/meta";

export default function AboutPage() {
  return (
    <>
      <Title>About Us — My Site</Title>
      <Meta name="description" content="Learn more about us." />
      <Link rel="canonical" href="https://example.com/about" />
      <Meta property="og:title" content="About Us" />
      <Meta property="og:description" content="Learn more about us." />
      <Meta property="og:image" content="https://example.com/og-about.jpg" />
      <main>...</main>
    </>
  );
}

components tersedia adalah <Title>, <Meta>, <Link>, <Style>, <Base>, dan <MetaProvider> wrapper. Deduplication adalah dibangun di: <Meta> tags dengan matching name attributes override parent definitions — deepest (sebagian besar spesifik) satu wins, dan ini berfungsi correctly selama SSR. So sebuah root default judul dan per-halaman overrides behave sebagai Anda’d expect.

Satu warning straight dari docs: jangan tambahkan mentah <title> tags di Anda server files — mereka override @solidjs/meta’s functionality. selalu gunakan <Title> component, tidak pernah sebuah hand-ditulis HTML judul di Anda server template.

data terstruktur (JSON-LD)

Google mendukung JSON-LD apakah ini adalah di mentah HTML atau injected oleh JavaScript, tetapi SSR-dirender JSON-LD adalah reliable pilihan. di SolidStart, render ini di route component:

export default function ArticlePage() {
  const schema = {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "My Article",
    "author": { "@type": "Person", "name": "Author Name" },
  };

  return (
    <>
      <script
        type="application/ld+json"
        innerHTML={JSON.stringify(schema)}
      />
      <article>...</article>
    </>
  );
}

dengan SSR enabled, JSON-LD muncul di server-dirender HTML — preferred approach untuk reliability di seluruh setiap crawler. Validate dengan Rich hasil Test atau pemeriksaan URL alat.

Hydration, tidak resumability — accuracy spine

Hydration adalah proses di mana, setelah SSR delivers dirender HTML, kerangka kerja attaches untuk existing DOM untuk membuat ini interactive: download JS bundle, execute kerangka kerja code, reconcile state dengan existing nodes, attach event listeners. SolidJS menggunakan hydration — yang sama fundamental mechanism sebagai React’s hydrate, Vue’s createSSRApp, atau Angular SSR.

Resumability (Qwik’s architecture) adalah berbeda: server serializes kerangka kerja’s execution state ke HTML, dan client resumes dari di sana tanpa re-executing components — interactive sebelum apa pun JS berjalan.

myth untuk debunk: SolidJS’s fine-grained reactivity adalah sometimes confused dengan resumability karena keduanya hindari “re-berjalan” (terjemahan) “re-berjalan” components di tradisional sense. mereka adalah tidak yang sama hal. Fine-grained reactivity adalah sebuah client-side perbarui optimization; resumability adalah sebuah server-untuk-client startup mechanism. SolidJS masih downloads dan berjalan -nya runtime sebelum halaman adalah interactive.

SEO implication: keduanya SSR+hydration (SolidJS) dan resumability (Qwik) put dirender HTML di server respons, so keduanya adalah baik untuk pengindeksan. perbedaan adalah Time untuk Interactive dan INP pada slow devices, di mana Qwik’s near-zero startup JS memiliki edge. untuk crawl dan indeks, SolidStart SSR adalah sudah cukup.

Core Web Vitals

SolidJS’s runtime advantages dapat translate ke better Core Web Vitals scores pada routes itu gunakan SSR — tetapi ini tidak automatic atau universal. Tidak utama sumber establishes guaranteed cheap hydration atau better outcomes untuk setiap Solid/SolidStart route: bundle size, data fetching, ketiga-party scripts, device, dan route’s sebenarnya rendering mode semua determine nyata cost. Treat berikut sebagai mechanism oleh yang SolidJS dapat help, dan mengukur Anda own routes untuk konfirmasi ini melakukan:

  • LCP improves karena largest konten element adalah di server-dirender HTML — Tidak menunggu pada JS.
  • INP improves karena Solid’s fine-grained runtime menangani interactions efficiently (Tidak virtual DOM diffing).
  • CLS drops karena SSR’d konten tidak shift sebagai late-memuat JS fills di.

sebuah caution worth mempertahankan honest: figures like “SolidJS adalah ~70% lebih cepat daripada React’s virtual DOM” (terjemahan) “SolidJS adalah ~70% lebih cepat daripada React’s virtual DOM” come dari synthetic benchmarks (js-kerangka kerja-benchmark), tidak dunia nyata data lapangan. nyata CWV bergantung far lebih pada implementation quality, data fetching, dan hosting daripada pada kerangka kerja pilihan. Treat benchmark angka sebagai directional, dan mengukur Anda own data lapangan di CrUX / Search Console.

Routing, data fetching, dan nyata 404s

Routing. SolidStart menggunakan History API oleh default — tidak pernah gunakan hash-based (#/page) routing, yang mencegah reliable URL penemuan. pertahankan trailing-slash perilaku consistent dan enforce ini dengan server redirects, tidak hanya canonicals.

data fetching untuk SEO. konten itu perlu untuk peringkat harus menjadi dimuat pada server so ini adalah di SSR HTML. gunakan createAsync dan server functions — tidak onMount atau client-side effects, yang jalankan setelah HTML adalah dikirim:

// Server-side data fetch — content lands in the initial HTML ✓
import { createAsync } from "@solidjs/router";
import { getPost } from "~/lib/api";

export const route = {
  load: ({ params }) => getPost(params.slug),
};

export default function BlogPost(props) {
  const post = createAsync(() => getPost(props.params.slug));
  return <article>{post()?.content}</article>;
}

nyata 404s. sebuah catch-semua route plus <HttpStatusCode> dari @solidjs/start sets sebenarnya HTTP kode respons pada server — sebuah benar 404 alih-alih sebuah soft 404:

// src/routes/[...404].tsx
import { HttpStatusCode } from "@solidjs/start";

export default function NotFound() {
  return (
    <>
      <HttpStatusCode code={404} />
      <h1>Page Not Found</h1>
    </>
  );
}

Sitemaps, robots.txt, dan SEO internasional

  • robots.txt — tambahkan public/robots.txt di project root dan poin ini di Anda sitemap. jangan block /api/ routes digunakan untuk XHR data fetching.
  • Sitemap — ketiga-party solid-start-sitemap plugin (oleh madaxen86) generates sitemap.xml di bangun time dan mendukung dynamic routes melalui parameter mapping atau sebuah runtime API route.
  • SEO internasional — emit hreflang dengan <Link rel="alternate" hreflang="…"> dari @solidjs/meta, dan gunakan subdirectory structure (/en/, /fr/) di atas subdomains atau kueri parameters.

umum SolidJS SEO pitfalls

  1. Berjalan SolidJS CSR tanpa SolidStart SSR/SSG.
  2. Fetching rankable konten di onMount / client-side effects.
  3. Forgetting <MetaProvider> wrapper (tags tidak akan render di SSR).
  4. menambahkan mentah <title> HTML tags di server templates (overrides @solidjs/meta).
  5. menggunakan hash-based routing.
  6. Serving soft 404s tanpa <HttpStatusCode>.
  7. Blocking API routes di robots.txt.
  8. Tidak fingerprinting JS assets (Google caches scripts aggressively).
  9. konten behind sebuah click/accordion/tab itu tidak pernah auto-memuat ke DOM.
  10. Assuming SSR berfungsi tanpa verifying melalui View Sumber / pemeriksaan URL.
  11. Assuming @solidjs/router dan @solidjs/meta come bundled dengan SolidStart — mereka jangan; SolidStart’s own docs say ini “melakukan tidak ship dengan a Router atau Metadata library.” (terjemahan) “melakukan tidak ship dengan sebuah Router atau Metadata library.” Official templates tambahkan keduanya untuk Anda, tetapi sebuah dari-scratch atau customized setup perlu them installed explicitly.
  12. Treating sebuah project sebagai uniformly “SSR” (terjemahan) “SSR” atau “CSR” (terjemahan) “CSR” — rendering mode adalah set per route di SolidStart, so sebuah route Anda assume adalah server-dirender dapat tidak menjadi.

Di mana ini sits

SolidJS lives di JavaScript kerangka kerja subcluster alongside Qwik, di bawah lebih luas JavaScript SEO cluster. untuk closest parallel, see React SEO — SolidJS shares React’s JSX dan CSR-oleh-default masalah, tetapi memperbaiki ini dengan SolidStart alih-alih Berikutnya.js, dan berjalan lebih cepat thanks untuk Tidak virtual DOM. untuk bagaimana Google sees dirender konten, see rendering dan crawling.

Tambahkan catatan pakar

Sematkan kutipan pakar

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