Ngôn ngữ

Hướng dẫn về SolidJS SEO

Cách làm SolidJS các trang crawlable, indexable, và fast — vì sao bare SolidJS là CSR-chỉ, cách SolidStart SSR/SSG các cách sửa điều này, managing head tags với @solidjs/meta, và vì sao SolidJS hydrates (điều này không phải resumable như Qwik).

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

SolidJS là một fast, React-như library với fine-grained reactivity và không virtual DOM — nhưng on của nó own đây là client-side được kết xuất, so điều này ships an empty HTML shell với đó giống nhau lập chỉ mục các vấn đề as bare React. Đó cách sửa là SolidStart, đó chính thức meta-framework: SSR hoặc SSG put real nội dung và metadata trong đó đầu tiên phản hồi. Manage head tags với @solidjs/meta (<Title>, <Meta>, <Link>), trả về real 404s với <HttpStatusCode>, và fetch dữ liệu on đó máy chủ với createAsync. Một điều không để mix lên: SolidJS hydrates — điều này không phải resumable. Resumability là Qwik trick. SolidJS win là một Core Web Vitals edge on top of tiêu chuẩn SSR.

Tóm tắt — SolidJS là fine-grained reactive (các tín hiệu, không virtual DOM) và ships as CSR library theo mặc định — rỗng shell với giống nhau Wave-1 lập chỉ mục vấn đề as bare React. SolidStart là khắc phục: SSR, SSG (route prerendering), và streaming SSR put nội dung và metadata trong đầu tiên phản hồi. Manage head tags với @solidjs/meta (<Title>, <Meta>, <Link> dưới <MetaProvider>), trả về thực các mã trạng thái với <HttpStatusCode>, và load dữ liệu on máy chủ với createAsync so nó lands trong SSR HTML. độ chính xác spine: SolidJS hydrates — nó không phải resumable (đó Qwik). Của nó fine-grained reactivity là client cập nhật optimization, không máy chủ-để-client startup một — so SEO upside là mostly Core Web Vitals (INP/TBT) edge layered bên cạnh thông thường 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: Điều gì thực ra khác

SolidJS dùng JSX đó looks giống hệt để React, plus hooks-như primitives (createSignal, createEffect, createMemo). nhưng execution model là fundamentally khác:

  • React re-chạy toàn bộ component function Khi state thay đổi và diffs virtual DOM để quyết định Điều gì để cập nhật.
  • SolidJS compiles JSX để thực DOM operations tại xây dựng time. Components chạy sau khi; reactive các tín hiệu wire các giá trị trực tiếp để cụ thể DOM nodes đó phụ thuộc on them. Khi tín hiệu thay đổi, Solid cập nhật chỉ đó node — không reconciliation, không virtual DOM overhead.

Đây là Vì sao SolidJS consistently sits near top của js-framework-benchmark suite, và Vì sao của nó runtime là dramatically leaner hơn React re-render model. library itself là khoảng 7KB gzipped. Nhỏ hơn, surgical cập nhật plus tiny runtime là performance story — nhưng none của đó thay đổi kết xuất chế độ, mà là Điều gì decides của bạn SEO fate.

CSR theo mặc định: SEO vấn đề

Xây dựng với SolidJS alone (không SolidStart) và bạn nhận client-side-được kết xuất app:

  1. máy chủ gửi index.html với near-thân rỗng — typically <div id="root"></div> và script tag.
  2. trình duyệt downloads JS bundle, chạy Solid reactive code, và populates DOM.
  3. Googlebot’s đầu tiên wave sees rỗng shell — Không có nội dung, không metadata.
  4. Googlebot’s thứ hai wave ( kết xuất queue) eventually chạy JS và sees nội dung — nhưng timing là unpredictable, từ hours để weeks.
  5. Bing, social các crawler, và non-JS bots có thể không bao giờ see nội dung tại all.

Đây là hai-wave kết xuất xử lý, và nó giống nhau trap bất kỳ CSR SPA falls vào. practical impacts: chậm ban đầu lập chỉ mục của new nội dung; các tiêu đề và meta các mô tả bị thiếu từ thô HTML (so sai/blank snippets trong SERPs); và soft 404s, vì CSR app có thể’t trả về đúng HTTP 404 — máy chủ luôn các câu trả lời 200 với app shell.

SolidStart: khắc phục

SolidStart (1,0, ổn định) là chính thức SolidJS meta-framework, được xây dựng on Vinxi (Vite + Nitro). nó cung cấp:

  • Isomorphic, file-based routing — files dưới src/routes/ map để URLs (src/routes/blog/[slug].tsx → /blog/:slug). Một correction worth đang precise về: SolidStart itself không ship một router hoặc metadata library bundled trong — theo của nó own tài liệu, “SolidStart itself does not ship with a Router or Metadata library. Rather, it leaves that open for you to use any library you want.” (bản dịch) «SolidStart itself không ship với một Router hoặc Metadata library. Rather, điều này leaves đó open cho bạn để dùng bất kỳ library bạn muốn.» Đó routing và @solidjs/meta behavior described ở đây come từ thêm @solidjs/router và @solidjs/meta explicitly (đó chính thức templates thêm cả hai cho bạn, mà là vì sao điều này có thể feel tự động — kiểm tra của bạn package.json thay vì assuming they nghĩ ra free với đó framework).
  • Multiple kết xuất modes, chosen theo route: CSR, SSR (synchronous, asynchronous, hoặc streaming), và SSG / route prerendering. MỘT SolidStart project không “SSR” hoặc “CSR” as một toàn bộ — mỗi route picks của nó own chế độ, so verify đó kết xuất config (và đó resulting HTML) cho đó cụ thể route bạn care về thay vì assuming đó toàn bộ site inherited một setting.
  • Máy chủ functions — một "use server" directive cho RPC-style máy chủ code (dữ liệu fetching, database access).
  • Adapters cho Cloudflare, Vercel, Netlify, Deno, Node, và static hosting.

Version note: điều này reflects SolidStart 1,0’s hiện tại tài liệu, mà labels itself beta và là cuối cùng đã cập nhật 2026-04-28 — xác nhận details so với tài liệu cho version bạn’re thực ra đang chạy trước khi treating bất kỳ của điều này as vĩnh viễn API surface.

SSR so với. SSG so với. streaming — SEO đọc

  • SSR (synchronous, asynchronous, hoặc streaming — SolidStart names những điều này as distinct sub-modes) delivers đầy đủ nội dung on đầu tiên yêu cầu và là fully indexable on Wave 1. Best cho frequently thay đổi các trang.
  • SSG (route prerendering) xây dựng HTML tại deploy time — fastest TTFB và LCP, CDN-có thể lưu vào bộ nhớ đệm, không theo-yêu cầu máy chủ hoạt động. Best cho blogs, tài liệu, và marketing các trang. Configure prerendered routes trong app.config.ts:
// app.config.ts
import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  server: {
    prerender: {
      routes: ["/", "/about", "/blog"],
    },
  },
});
  • Streaming SSR gửi HTML progressively để improve TTFB on dữ liệu-nặng các trang; Google renders đầy đủ streamed output.
  • CSR là fine cho authenticated dashboards và tools đó không cần để xếp hạng — không cho công khai nội dung.

Managing head tags với @solidjs/meta

@solidjs/meta package là SolidJS tương đương của React Helmet hoặc tiếp theo.js <Head>. nó SSR-ready và asynchronous. Wrap của bạn app trong <MetaProvider> so tags là collected during SSR, sau đó đặt theo-trang tags bên trong của bạn 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 khả dụng là <Title>, <Meta>, <Link>, <Style>, <Base>, và <MetaProvider> wrapper. Deduplication là được xây dựng trong: <Meta> tags với matching name các thuộc tính override parent definitions — deepest (phần lớn cụ thể) một wins, và điều này hoạt động correctly during SSR. So root default tiêu đề và theo-trang overrides behave as bạn’d expect.

Một warning straight từ tài liệu: không thêm thô <title> tags trong của bạn máy chủ files — họ override @solidjs/meta functionality. luôn sử dụng <Title> component, không bao giờ hand-được viết HTML tiêu đề trong của bạn máy chủ template.

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

Google hỗ trợ JSON-LD liệu nó trong thô HTML hoặc injected by JavaScript, nhưng SSR-được kết xuất JSON-LD là reliable lựa chọn. Trong SolidStart, render nó trong 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>
    </>
  );
}

với SSR enabled, JSON-LD xuất hiện trong máy chủ-được kết xuất HTML — được ưu tiên approach cho reliability trên mỗi crawler. Validate với Rich Kết quả Kiểm thử hoặc URL Inspection Tool.

Hydration, không resumability — độ chính xác spine

Hydration là xử lý nơi, sau khi SSR delivers được kết xuất HTML, framework attaches để existing DOM để làm nó interactive: download JS bundle, execute framework code, reconcile state với existing nodes, attach event listeners. SolidJS dùng hydration — giống nhau fundamental mechanism as React hydrate, Vue createSSRApp, hoặc Angular SSR.

Resumability (Qwik architecture) là khác: máy chủ serializes framework execution state vào HTML, và client resumes từ ở đó không có re-executing components — interactive trước khi bất kỳ JS chạy.

myth để debunk: SolidJS fine-grained reactivity là đôi khi confused với resumability vì cả hai tránh “re-đang chạy” components trong truyền thống hợp lý. họ không phải giống nhau điều. Fine-grained reactivity là client-side cập nhật optimization; resumability là máy chủ-để-client startup mechanism. SolidJS vẫn downloads và chạy của nó runtime trước khi trang là interactive.

SEO implication: cả hai SSR+hydration (SolidJS) và resumability (Qwik) put được kết xuất HTML trong máy chủ phản hồi, so cả hai là good cho lập chỉ mục. khác biệt là Time để Interactive và INP on chậm devices, nơi Qwik near-zero startup JS có edge. cho crawl và chỉ mục, SolidStart SSR là đã đủ.

Core Web Vitals

SolidJS runtime advantages có thể translate vào tốt hơn Cốt lõi Web Chỉ số quan trọng scores on routes đó dùng SSR — nhưng này không tự động hoặc universal. Không chính nguồn establishes guaranteed cheap hydration hoặc tốt hơn outcomes cho mỗi Solid/SolidStart route: bundle size, dữ liệu fetching, bên thứ ba scripts, device, và đó route thực tế kết xuất chế độ all determine đó real cost. Treat đó sau as đó mechanism by mà SolidJS có thể help, và đo lường của bạn own routes để xác nhận điều này làm:

  • LCP improves vì largest nội dung element là trong máy chủ-được kết xuất HTML — không đang chờ on JS.
  • INP improves vì Solid fine-grained runtime xử lý interactions efficiently (không virtual DOM diffing).
  • CLS drops vì SSR’d nội dung không shift as muộn-loading JS fills trong.

MỘT caution worth giữ honest: figures như “SolidJS is ~70% faster than React’s virtual DOM” (bản dịch) «SolidJS là ~70% nhanh hơn React virtual DOM» come từ synthetic benchmarks (js-framework-benchmark), không thực tế trường dữ liệu. Real CWV phụ thuộc far hơn on implementation quality, dữ liệu fetching, và hosting hơn on framework lựa chọn. Treat đó benchmark numbers as directional, và đo lường của bạn own trường dữ liệu trong CrUX / Search Console.

Routing, dữ liệu fetching, và thực 404s

Routing. SolidStart dùng History API theo mặc định — không bao giờ sử dụng hash-based (#/page) routing, mà ngăn reliable phát hiện URL. giữ trailing-slash behavior consistent và enforce nó với máy chủ các chuyển hướng, không chỉ canonicals.

Dữ liệu fetching Đối với SEO. nội dung đó cần để xếp hạng phải là loaded on máy chủ so nó trong SSR HTML. sử dụng createAsync và máy chủ functions — không onMount hoặc client-side effects, mà chạy sau khi HTML là được gửi:

// 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>;
}

thực 404s. catch-all route plus <HttpStatusCode> từ @solidjs/start sets thực tế HTTP phản hồi code on máy chủ — đúng 404 thay vì 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, và SEO quốc tế

  • robots.txt — thêm public/robots.txt tại project root và point nó tại của bạn sitemap. không block /api/ routes được sử dụng cho XHR dữ liệu fetching.
  • Sitemap — thứ ba-party solid-start-sitemap plugin (by madaxen86) generates sitemap.xml tại xây dựng time và hỗ trợ dynamic routes qua parameter mapping hoặc runtime API route.
  • SEO quốc tế — emit hreflang với <Link rel="alternate" hreflang="…"> từ @solidjs/meta, và sử dụng subdirectory structure (/en/, /fr/) over subdomains hoặc query parameters.

phổ biến SolidJS SEO pitfalls

  1. Đang chạy SolidJS CSR không có SolidStart SSR/SSG.
  2. Fetching rankable nội dung trong onMount / client-side effects.
  3. Forgetting đó <MetaProvider> wrapper (tags sẽ không render trong SSR).
  4. Thêm thô <title> HTML tags trong máy chủ templates (overrides @solidjs/meta).
  5. Dùng hash-based routing.
  6. Serving soft 404s không có <HttpStatusCode>.
  7. Blocking API routes trong robots.txt.
  8. Không fingerprinting JS assets (Google caches scripts aggressively).
  9. Nội dung behind một nhấp/accordion/tab đó không bao giờ auto-loads vào đó DOM.
  10. Assuming SSR hoạt động không có verifying qua View Nguồn / URL Inspection.
  11. Assuming @solidjs/router và @solidjs/meta come bundled với SolidStart — they không; SolidStart own tài liệu chẳng hạn điều này “does not ship with a Router or Metadata library.” (bản dịch) «không ship với một Router hoặc Metadata library.» Chính thức templates thêm cả hai cho bạn, nhưng một từ-scratch hoặc customized setup cần them installed explicitly.
  12. Treating một project as uniformly “SSR” hoặc “CSR” — kết xuất chế độ là set theo route trong SolidStart, so một route bạn assume là máy chủ-được kết xuất có thể không là.

nơi điều này sits

SolidJS lives trong JavaScript các framework subcluster alongside Qwik, dưới rộng hơn JavaScript SEO cluster. cho closest parallel, see React SEO — SolidJS chia sẻ React JSX và CSR-by-default vấn đề, nhưng các cách sửa nó với SolidStart thay vì tiếp theo.js, và chạy nhanh hơn thanks để không virtual DOM. cho Cách Google sees được kết xuất nội dung, see kết xuất và crawling.

Add an expert note

Pin an expert quote

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