Bahasa

Panduan SolidJS SEO

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

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

SolidJS adalah sebuah fast, React-like library dengan fine-grained reactivity dan no virtual DOM — tetapi pada -nya own ini adalah client-side rendered, so ini ships sebuah empty HTML shell dengan yang sama pengindeksan masalah sebagai bare React. fix adalah SolidStart, official meta-framework: 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. One thing not untuk mix up: SolidJS hydrates — ini adalah not 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 (signals, no 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 fix: 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 NOT resumable (itu’s Qwik). -nya fine-grained reactivity adalah sebuah client update optimization, not sebuah server-untuk-client startup one — so SEO upside adalah mostly sebuah Core Web Vitals (INP/TBT) edge layered pada top dari normal SSR.

Evidence for this claim The article's described solidjs-seo capabilities must be evaluated against the platform's current documentation rather than assumed to be search-engine behavior. Scope: Platform-specific capability documentation. Confidence: high · Verified: SolidStart documentation Evidence for this claim Regardless of platform, Google needs crawlable URLs, accessible rendered content, descriptive metadata, and valid search directives. Scope: Google requirements independent of platform. Confidence: high · Verified: Google Search Central: SEO Starter Guide

SolidJS architecture: what’s actually 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-runs whole component function when state perubahan dan diffs sebuah virtual DOM untuk decide what untuk update.
  • SolidJS compiles JSX untuk nyata DOM operations di bangun time. Components run once; reactive signals wire nilai directly untuk spesifik DOM nodes itu depend pada them. When sebuah signal perubahan, Solid updates hanya itu node — no reconciliation, no virtual DOM overhead.

ini adalah why SolidJS consistently sits near top dari js-framework-benchmark suite, dan why -nya runtime adalah dramatically leaner daripada React’s re-render model. library itself adalah roughly 7KB gzipped. Smaller, surgical updates plus sebuah tiny runtime adalah performa story — tetapi none dari itu perubahan rendering mode, which adalah what decides Anda SEO fate.

CSR oleh default: SEO masalah

bangun dengan SolidJS alone (no SolidStart) dan Anda get sebuah client-side-rendered 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, runs Solid’s reactive code, dan populates DOM.
  3. Googlebot’s pertama wave sees empty shell — tanpa konten, no metadata.
  4. Googlebot’s kedua wave ( rendering queue) eventually runs 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 two-wave rendering process, dan ini adalah yang sama trap apa pun CSR SPA falls ke. practical impacts: slow initial pengindeksan dari baru konten; judul dan deskripsi meta missing dari raw HTML (so wrong/blank snippets di SERPs); dan soft 404s, because sebuah CSR app dapat’t mengembalikan benar HTTP 404 — server selalu jawaban 200 dengan app shell.

SolidStart: fix

SolidStart (1,0, stable) adalah official SolidJS meta-framework, 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). One correction worth menjadi precise tentang: SolidStart itself melakukan not ship sebuah router atau metadata library bundled di — per -nya own docs, “SolidStart itself does not ship with a Router or Metadata library. Rather, it leaves that open for you to use any library you want.” (terjemahan) “SolidStart itself melakukan not 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 here come dari menambahkan @solidjs/router dan @solidjs/meta explicitly ( official templates tambahkan both untuk Anda, which adalah why ini dapat feel automatic — periksa Anda package.json alih-alih assuming mereka came free dengan framework).
  • Multiple rendering modes, chosen per route: CSR, SSR (synchronous, asynchronous, atau streaming), dan SSG / route prerendering. sebuah SolidStart project isn’t “SSR” (terjemahan) “SSR” atau “CSR” (terjemahan) “CSR” sebagai sebuah whole — setiap route picks -nya own mode, so verify rendering config (dan resulting HTML) untuk spesifik route Anda care tentang alih-alih assuming whole situs inherited one 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, which labels itself beta dan adalah last updated 2026-04-28 — confirm detail terhadap docs untuk versi Anda’re actually running sebelum treating apa pun dari ini sebagai permanent API surface.

SSR vs. SSG vs. streaming — SEO read

  • SSR (synchronous, asynchronous, atau streaming — SolidStart names ini sebagai distinct sub-modes) delivers full konten pada pertama permintaan dan adalah fully dapat diindeks pada Wave 1. Best untuk frequently changing halaman.
  • SSG (route prerendering) membangun HTML di deploy time — fastest TTFB dan LCP, CDN-cacheable, no 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-heavy halaman; Google renders full streamed output.
  • CSR adalah fine untuk authenticated dashboards dan alat itu don’t perlu untuk peringkat — not untuk public konten.

Managing head tags dengan @solidjs/meta

@solidjs/meta package adalah SolidJS equivalent dari React Helmet atau Next.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 inside 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 available 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) one wins, dan ini berfungsi correctly selama SSR. So sebuah root default judul dan per-halaman overrides behave sebagai Anda’d expect.

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

data terstruktur (JSON-LD)

Google mendukung JSON-LD whether ini adalah di raw HTML atau injected oleh JavaScript, tetapi SSR-rendered JSON-LD adalah reliable choice. 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 appears di server-rendered HTML — preferred approach untuk reliability di seluruh setiap crawler. Validate dengan Rich hasil Test atau pemeriksaan URL alat.

Hydration, not resumability — accuracy spine

Hydration adalah process where, setelah SSR delivers rendered HTML, framework attaches untuk existing DOM untuk membuat ini interactive: download JS bundle, execute framework 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 framework’s execution state ke HTML, dan client resumes dari there without re-executing components — interactive sebelum apa pun JS runs.

myth untuk debunk: SolidJS’s fine-grained reactivity adalah sometimes confused dengan resumability because both hindari “re-running” (terjemahan) “re-running” components di traditional sense. mereka adalah not yang sama thing. Fine-grained reactivity adalah sebuah client-side update optimization; resumability adalah sebuah server-untuk-client startup mechanism. SolidJS masih downloads dan runs -nya runtime sebelum halaman adalah interactive.

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

Core Web Vitals

SolidJS’s runtime advantages dapat translate ke better Core Web Vitals scores pada routes itu gunakan SSR — tetapi ini isn’t automatic atau universal. No primary source establishes guaranteed cheap hydration atau better outcomes untuk setiap Solid/SolidStart route: bundle size, data fetching, ketiga-party scripts, device, dan route’s actual rendering mode semua determine nyata cost. Treat following sebagai mechanism oleh which SolidJS dapat help, dan mengukur Anda own routes untuk confirm ini melakukan:

  • LCP improves because largest konten element adalah di server-rendered HTML — no waiting pada JS.
  • INP improves because Solid’s fine-grained runtime handles interactions efficiently (no virtual DOM diffing).
  • CLS drops because SSR’d konten doesn’t shift sebagai late-memuat JS fills di.

sebuah caution worth keeping honest: figures like “SolidJS is ~70% faster than React’s virtual DOM” (terjemahan) “SolidJS adalah ~70% faster daripada React’s virtual DOM” come dari synthetic benchmarks (js-framework-benchmark), not dunia nyata data lapangan. nyata CWV depends far more pada implementation quality, data fetching, dan hosting daripada pada framework choice. 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, which mencegah reliable URL penemuan. pertahankan trailing-slash perilaku consistent dan enforce ini dengan server redirects, not 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 — not onMount atau client-side effects, which run 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 actual 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. Don’t 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 via 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. Running SolidJS CSR without SolidStart SSR/SSG.
  2. Fetching rankable konten di onMount / client-side effects.
  3. Forgetting <MetaProvider> wrapper (tags won’t render di SSR).
  4. menambahkan raw <title> HTML tags di server templates (overrides @solidjs/meta).
  5. menggunakan hash-based routing.
  6. Serving soft 404s without <HttpStatusCode>.
  7. Blocking API routes di robots.txt.
  8. Not 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 without verifying via View Source / pemeriksaan URL.
  11. Assuming @solidjs/router dan @solidjs/meta come bundled dengan SolidStart — mereka don’t; SolidStart’s own docs say ini “does not ship with a Router or Metadata library.” (terjemahan) “melakukan not ship dengan sebuah Router atau Metadata library.” Official templates tambahkan both 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-rendered dapat not menjadi.

Where ini sits

SolidJS lives di JavaScript frameworks subcluster alongside Qwik, di bawah broader JavaScript SEO cluster. untuk closest parallel, see React SEO — SolidJS shares React’s JSX dan CSR-oleh-default masalah, tetapi fixes ini dengan SolidStart alih-alih Next.js, dan runs faster thanks untuk no virtual DOM. untuk how Google sees rendered konten, see rendering dan crawling.

Add an expert note

Pin an expert quote

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