Guide SolidJS SEO

TL;DR — SolidJS is a fast, React-like library, but on its propre it builds the page in votre navigateur — so moteur de recherches premier voir an vide shell. The fix is SolidStart, its official full-stack outil, qui sends finished HTML to les deux utilisateurs and robots d’exploration. Rendering mode is a per-route setting, pas a whole-site switch — utiliser server rendering (SSR or SSG) on the routes que besoin to rank, définir votre title and meta tags with @solidjs/meta, and vérifier chaque route’s réel HTML output plutôt que assuming the whole site is covered.

Ce que SolidJS is

SolidJS is a JavaScript library pour building utilisateur interfaces. Si you’ve seen React, it’ll regarder familiar — it uses the même JSX syntax and a similaire component style. The big difference sous the hood is que SolidJS has aucun virtual DOM: it updates the exact pieces of lune page que modifier, qui rend it very fast.

The catch pour le SEO: by par défaut, SolidJS is client-side rendered (CSR). The server sends an almost-empty HTML fichier, alors votre navigateur downloads the JavaScript and builds lune page. That’s a problem parce que the premier chose a search engine sees is the vide version — aucun text, aucun title, aucun meta description.

Pourquoi CSR is an SEO problem

Quand Google crawls a CSR page, it sees the vide shell premier. It peut come back plus tard, run the JavaScript, and lire the contenu réel — but que second réussir peut prendre anywhere from hours to weeks. Worse, Bing and social-media robots d’exploration (Facebook, LinkedIn, X) souvent don’t run JavaScript at tout, so ils may jamais voir votre content or votre share previews.

Ce is the même problème bare React, Vue, and Angular have. It’s pas unique to SolidJS — it’s a property of rendu côté client. (Voir JavaScript SEO pour the complet picture.)

The fix: SolidStart

SolidStart is the official meta-framework pour SolidJS — think of it as SolidJS’s version of Suivant.js (pour React) or Nuxt (pour Vue). It lets le serveur send finished HTML, so moteur de recherches and social robots d’exploration obtenir votre content on the very premier requête. Two principal modes:

• SSR (rendu côté serveur) — lune page is construit on le serveur chaque temps it’s requested. Bon pour content que changements souvent.
• SSG (static site generation) — pages are construit une fois at deploy temps and served as plain fichiers. Fastest option; ideal pour blogs, docs, and marketing pages.

Setting votre title and meta tags

To contrôler votre <title>, meta description, and social share tags, utiliser the @solidjs/meta package. It donne vous <Title>, <Meta>, and <Link> components vous drop into votre pages — SolidJS’s equivalent of React Helmet. With SolidStart’s SSR turned on, ceux tags montrer up in the HTML que robots d’exploration lire.

The un chose pas to mix up

Vous may hear SolidJS lumped in with Qwik as “the resumable frameworks.” That’s incorrect. Resumability is Qwik’s idea. SolidJS uses ordinary hydration — it simplement fait it plus cheaply que React. Pour le SEO que distinction barely matters (les deux put content in the HTML), but it’s a courant mistake.

Vouloir the réel mechanics — SSR vs. SSG vs. streaming, the @solidjs/meta API, réel 404s, server-side données fetching, and the Core Web Vitals story? Switch to the Avancé tab.

TL;DR — SolidJS is fine-grained reactive (signals, aucun virtual DOM) and ships as a CSR library by par défaut — an vide shell with the même Wave-1 indexation problem as bare React. SolidStart is the fix: SSR, SSG (route prerendering), and streaming SSR put content and metadata in the premier réponse. Manage head tags with @solidjs/meta (<Title>, <Meta>, <Link> sous a <MetaProvider>), retourner réel code d’états with <HttpStatusCode>, and charger données on le serveur with createAsync so it lands in the SSR HTML. The accuracy spine: SolidJS hydrates — it n’est pas resumable (that’s Qwik). Its fine-grained reactivity is a client mettre à jour optimization, pas a server-to-client startup un — so the SEO upside is mostly a Core Web Vitals (INP/TBT) edge layered on top of normal SSR.

SolidJS architecture: what’s en réalité différent

SolidJS uses JSX que semble identical to React’s, plus hooks-like primitives (createSignal, createEffect, createMemo). But the execution model is fundamentally différent:

• React re-runs the whole component function quand state changements and diffs a virtual DOM to decide ce que to mettre à jour.
• SolidJS compiles JSX to réel DOM operations at construire temps. Components run une fois; reactive signals wire valeurs directement to the spécifique DOM nodes que depend on les. Quand a signal changements, Solid updates seulement que node — aucun reconciliation, aucun virtual DOM overhead.

Ce is pourquoi SolidJS consistently sits near the top of the js-framework-benchmark suite, and pourquoi its runtime is dramatically leaner que React’s re-render model. The library itself is roughly 7KB gzipped. Plus petit, surgical updates plus a tiny runtime is the performances story — but none of que changements the rendering mode, qui is ce que decides votre SEO fate.

CSR by par défaut: the SEO problem

Construire with SolidJS alone (aucun SolidStart) and vous obtenir a client-side-rendered app:

1. Le serveur sends index.html with a near-empty corps — typically a <div id="root"></div> and a script tag.
2. Le navigateur downloads the JS bundle, runs Solid’s reactive code, and populates the DOM.
3. Googlebot’s premier wave sees the vide shell — aucun content, aucun metadata.
4. Googlebot’s second wave (the rendering queue) eventually runs the JS and sees content — but the timing is unpredictable, from hours to weeks.
5. Bing, social robots d’exploration, and non-JS bots may jamais voir le contenu at tout.

Ce is the two-wave rendering traiter, and it’s the même trap quelconque CSR SPA falls into. The practical impacts: slow initial indexation of nouveau content; titles and meta descriptions manquant from the raw HTML (so incorrect/blank snippets in SERPs); and soft 404s, parce que a CSR app can’t retourner a vrai HTTP 404 — le serveur toujours réponses 200 with the app shell.

SolidStart: the fix

SolidStart (1,0, stable) is the official SolidJS meta-framework, construit on Vinxi (Vite + Nitro). It provides:

• Isomorphic, file-based routing — fichiers sous src/routes/ map to URLs (src/routes/blog/[slug].tsx → /blog/:slug). Un correction worth being precise à propos de: SolidStart itself ne fait pas ship a router or metadata library bundled in — per its propre docs, “SolidStart itself ne fait pas ship with a Router or Metadata library. Plutôt, it leaves que ouvrir pour vous to utiliser quelconque library vous vouloir.” The routing and @solidjs/meta behavior décrit ici come from ajout @solidjs/router and @solidjs/meta explicitly (the official templates ajouter les deux pour vous, qui is pourquoi it peut feel automatic — vérifier votre package.json plutôt que assuming ils came free with the framework).
• Multiple rendering modes, choisi per route: CSR, SSR (synchronous, asynchronous, or streaming), and SSG / route prerendering. A SolidStart project isn’t “SSR” or “CSR” as a whole — chaque route picks its propre mode, so vérifier the rendering config (and le résultating HTML) pour the spécifique route vous care à propos de plutôt que assuming the whole site inherited un setting.
• Server functions — a "use server" directive pour RPC-style server code (données fetching, database accès).
• Adapters pour Cloudflare, Vercel, Netlify, Deno, Node, and static hosting.

Version remarque: ce reflects SolidStart 1,0’s current documentation, qui étiquettes itself beta and was dernier mis à jour 2026-04-28 — confirmer details contre the docs pour the version you’re en réalité running avant treating quelconque of ce as permanent API surface.

SSR vs. SSG vs. streaming — the SEO lire

• SSR (synchronous, asynchronous, or streaming — SolidStart noms ces as distinct sub-modes) delivers complet content on the premier requête and is entièrement indexable on Wave 1. Meilleur pour frequently modification pages.
• SSG (route prerendering) builds HTML at deploy temps — the fastest TTFB and LCP, CDN-cacheable, aucun per-request server fonctionner. Meilleur pour blogs, docs, and marketing pages. Configurer prerendered routes in app.config.ts:

// app.config.ts
import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  server: {
    prerender: {
      routes: ["/", "/about", "/blog"],
    },
  },
});

• Streaming SSR sends HTML progressively to améliorer TTFB on data-heavy pages; Google renders the complet streamed output.
• CSR is fine pour authenticated dashboards and outils que don’t besoin to rank — pas pour public content.

Managing head tags with @solidjs/meta

The @solidjs/meta package is the SolidJS equivalent of React Helmet or Suivant.js’s <Head>. It’s SSR-ready and asynchronous. Wrap votre app in <MetaProvider> so tags are collected during SSR, alors définir per-page tags à l’intérieur votre 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>
    </>
  );
}

The components disponible are <Title>, <Meta>, <Link>, <Style>, <Base>, and the <MetaProvider> wrapper. Deduplication is construit in: <Meta> tags with matching name attributes override parent definitions — the deepest (la plupart spécifique) un wins, and ce fonctionne correctement during SSR. So a root par défaut title and per-page overrides behave as you’d expect.

Un warning straight from the docs: don’t ajouter raw <title> tags in votre server fichiers — ils override @solidjs/meta’s functionality. Toujours utiliser the <Title> component, jamais a hand-written HTML title in votre serveur template.

Données structurées (JSON-LD)

Google supports JSON-LD si it’s in the raw HTML or injected by JavaScript, but SSR-rendered JSON-LD is the reliable choice. In SolidStart, render it in the 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>
    </>
  );
}

With SSR enabled, the JSON-LD apparaît in le serveur-rendered HTML — the preferred approach pour reliability à travers every robot d’exploration. Validate with the Résultats enrichis Tester or Inspection d’URL Outil.

Hydration, pas resumability — the accuracy spine

Hydration is the traiter où, après SSR delivers rendered HTML, the framework attaches to the existing DOM to faire it interactive: download the JS bundle, execute the framework code, reconcile state with the existing nodes, attach event listeners. SolidJS uses hydration — the même fundamental mechanism as React’s hydrate, Vue’s createSSRApp, or Angular SSR.

Resumability (Qwik’s architecture) is différent: le serveur serializes the framework’s execution state into the HTML, and the client resumes from là sans re-executing components — interactive avant quelconque JS runs.

The myth to debunk: SolidJS’s fine-grained reactivity is parfois confused with resumability parce que les deux éviter “re-running” components in the traditional sense. Ils ne sont pas the même chose. Fine-grained reactivity is a client-side mettre à jour optimization; resumability is a server-to-client startup mechanism. SolidJS encore downloads and runs its runtime avant lune page is interactive.

The SEO implication: les deux SSR+hydration (SolidJS) and resumability (Qwik) put rendered HTML in le serveur réponse, so les deux are bon pour indexation. The difference is Temps d’interactivité and INP on slow devices, où Qwik’s near-zero startup JS has the edge. Pour explorer and index, SolidStart SSR is déjà suffisant.

Core Web Vitals

SolidJS’s runtime advantages peut translate into meilleur Core Web Vitals scores on routes que utiliser SSR — but ce isn’t automatic or universal. Aucun principal source establishes guaranteed cheap hydration or meilleur outcomes pour every Solid/SolidStart route: bundle size, données fetching, third-party scripts, device, and the route’s réel rendering mode tout determine the réel cost. Treat the suivant as the mechanism by qui SolidJS peut aider, and mesurer votre propre routes to confirmer it fait:

• LCP improves parce que the largest content element is in le serveur-rendered HTML — aucun waiting on JS.
• INP improves parce que Solid’s fine-grained runtime handles interactions efficiently (aucun virtual DOM diffing).
• CLS drops parce que SSR’d content doesn’t shift as late-loading JS fills in.

A caution worth keeping honest: figures comme “SolidJS is ~70% faster que React’s virtual DOM” come from synthetic benchmarks (js-framework-benchmark), pas real-world field données. Réel CWV dépend far plus on implementation quality, données fetching, and hosting que on framework choice. Treat the benchmark numbers as directional, and mesurer votre propre field données in CrUX / Search Console.

Routing, données fetching, and réel 404s

Routing. SolidStart uses the History API by par défaut — jamais utiliser hash-based (#/page) routing, qui empêche reliable URL discovery. Garder trailing-slash behavior consistent and enforce it with server redirections, pas simplement canonicals.

Données fetching pour le SEO. Content que nécessite to rank doit be chargé on the server so it’s in the SSR HTML. Utiliser createAsync and server functions — pas onMount or client-side effects, qui run après the HTML is sent:

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

Réel 404s. A catch-all route plus <HttpStatusCode> from @solidjs/start sets the réel HTTP réponse code on le serveur — a vrai 404 au lieu de a 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, and international SEO

• robots.txt — ajouter public/robots.txt at the project root and point it at votre sitemap. Don’t block the /api/ routes utilisé pour XHR données fetching.
• Sitemap — the third-party solid-start-sitemap plugin (by madaxen86) generates sitemap.xml at construire temps and supports dynamic routes via parameter mapping or a runtime API route.
• International SEO — emit hreflang with <Link rel="alternate" hreflang="…"> from @solidjs/meta, and utiliser a subdirectory structure (/en/, /fr/) over subdomains or requête parameters.

Courant SolidJS SEO pitfalls

1. Running SolidJS CSR sans SolidStart SSR/SSG.
2. Fetching rankable content in onMount / client-side effects.
3. Forgetting the <MetaProvider> wrapper (tags won’t render in SSR).
4. Ajout raw <title> HTML tags in server templates (overrides @solidjs/meta).
5. En utilisant hash-based routing.
6. Serving soft 404s sans <HttpStatusCode>.
7. Blocking API routes in robots.txt.
8. Pas fingerprinting JS assets (Google caches scripts aggressively).
9. Content behind a click/accordion/tab que jamais auto-loads into the DOM.
10. Assuming SSR fonctionne sans verifying via View Source / Inspection d’URL.
11. Assuming @solidjs/router and @solidjs/meta come bundled with SolidStart — ils don’t; SolidStart’s propre docs dire it “ne fait pas ship with a Router or Metadata library.” Official templates ajouter les deux pour vous, but a from-scratch or customized setup nécessite les installed explicitly.
12. Treating a project as uniformly “SSR” or “CSR” — rendering mode is définir per route in SolidStart, so a route vous assume is server-rendered may pas be.

Où ce sits

SolidJS lives in the JavaScript frameworks subcluster alongside Qwik, sous the broader JavaScript SEO cluster. Pour the closest parallel, voir React SEO — SolidJS shares React’s JSX and CSR-by-default problem, but fixes it with SolidStart au lieu de Suivant.js, and runs faster thanks to aucun virtual DOM. Pour how Google sees rendered content, voir rendering and exploration.

AI summary

A condensed prendre on the Avancé version:

• SolidJS = fine-grained reactivity, aucun virtual DOM. Components run une fois; signals mettre à jour seulement the exact DOM nodes que modifier. Tiny runtime (~7KB), consistently near the top of js-framework-benchmark, faster que React’s re-render model.
• Bare SolidJS is CSR by par défaut — an vide HTML shell. Même Wave-1 indexation problem as bare React/Vue/Angular: Googlebot’s premier wave sees aucun content, rendering is queued (hours to weeks), and Bing/social robots d’exploration may jamais voir it. Soft-404 risk aussi (CSR can’t retourner a réel 404).
• SolidStart is the fix, per route — the official meta-framework offers CSR, SSR (sync, async, or streaming), and SSG per route; it doesn’t par défaut the whole project to SSR. SSR/SSG routes put content + metadata in the premier réponse, entièrement indexable on Wave 1 — vérifier the spécifique route plutôt que assuming site-wide coverage.
• Router and metadata aren’t auto-bundled. SolidStart’s propre docs dire it ships sans a router or metadata library — @solidjs/router and @solidjs/meta are explicit additions the official templates se produire to inclure.
• Head tags via @solidjs/meta: <Title>, <Meta>, <Link> sous <MetaProvider>; deduplication fonctionne in SSR; jamais utiliser raw <title> in server fichiers.
• Réel 404s with <HttpStatusCode>; server-side données with createAsync (pas onMount); History API routing (aucun hash routes); JSON-LD rendered in the route component.
• Accuracy spine: SolidJS hydrates — it n’est pas resumable. Resumability is Qwik’s. Fine-grained reactivity is a client-update optimization, pas a startup un. Les deux SSR+hydration and resumability are bon pour indexation; Qwik seulement wins on Temps d’interactivité.
• CWV upside is possible, pas guaranteed (on SSR’d routes): meilleur LCP, INP, and CLS are plausible outcomes — but benchmark gaps are synthetic, and réel field données dépend on implementation, données, and hosting, pas framework choice alone.

Documentation officielle

Primary-source documentation from Google and the SolidJS team.

Google — JavaScript SEO

• Comprendre JavaScript SEO Basics — the explorer → render → index pipeline and the two-wave traiter.
• Dynamic Rendering as a Workaround — pourquoi Google deprecated dynamic rendering in favor of SSR, static rendering, and hydration.
• SEO Guide pour Web Developers — the developer-facing fundamentals.

SolidJS / SolidStart

• SolidJS documentation — the official docs home.
• Fine-Grained Reactivity — the signals model and how updates target individual DOM nodes.
• SolidStart — the meta-framework: SSR, streaming, routing, server functions.
• SolidStart — Head and Metadata — managing title/meta/lien tags pour le SEO.
• SolidStart — Route Pre-rendering — configuring SSG.

@solidjs/meta

• solid-meta GitHub repository — source and API référence.
• @solidjs/meta on npm — the package.
• Title component docs and Meta component docs.

Quotes from the source

On-the-record statements from Google on JavaScript SEO, plus the SolidJS team’s propre framing.

Google — how JavaScript apps are processed

• “Google processes JavaScript web apps in three main phases: 1. Crawling 2. Rendering 3. Indexing.” — Recherche Google Central. Comprendre JavaScript SEO Basics
• “It’s fine to use JavaScript to inject links into the DOM, as long as such links follow the best practices for crawlable links.” — Recherche Google Central (utiliser <a href>, pas onclick or javascript:void(0)). Comprendre JavaScript SEO Basics
• “You shouldn’t use JavaScript to change the canonical URL to something else than the URL you specified as the canonical URL in the original HTML.” — Recherche Google Central. Comprendre JavaScript SEO Basics
• “Use the History API to implement routing between different views of your web app.” — Recherche Google Central (i.e. aucun fragment/hash routing). Comprendre JavaScript SEO Basics

SolidJS team — fine-grained reactivity (paraphrased framing)

• SolidStart’s head-and-metadata docs warn: “Be sure to avoid adding any normal <title /> tags in any server files, as they would override the functionality of @solidjs/meta.” SolidStart — Head and Metadata

SolidJS SEO checklist

A réussir to confirmer a SolidJS site is crawlable, indexable, and fast:

• You’re en utilisant SolidStart with SSR or SSG — pas bare SolidJS in CSR mode.
• View Source montre contenu réel and <a href> liens in the raw HTML — pas simplement <div id="root"></div>.
• App is wrapped in <MetaProvider> so head tags render during SSR.
• <Title> and <Meta name="description"> définir per route via @solidjs/meta.
• Aucun raw <title> tags in server fichiers (ils override @solidjs/meta).
• Ouvrir Graph + Twitter tags présent via <Meta property="og:…"> so social previews fonctionner.
• Canonical définir with <Link rel="canonical"> (pas modifié via JS après charger).
• Routing uses the History API — aucun hash (#/page) routes.
• Rankable content chargé with createAsync/server functions, pas onMount.
• Manquant pages retourner a réel 404 via <HttpStatusCode code={404} />.
• public/robots.txt exists, points to le sitemap, and doesn’t block /api/ données routes.
• XML sitemap generated (e.g. solid-start-sitemap) with URL canoniques.
• JSON-LD rendered in the route component and présent in the SSR HTML.
• Inspection d’URL (Search Console) confirms the rendered HTML matches.
• Field Core Web Vitals vérifié in CrUX / Search Console, pas simplement lab.

The mental models

1. Library vs. meta-framework. SolidJS (the library) decides how the UI updates; SolidStart (the meta-framework) decides où it renders. SEO is governed by the second un. Bare SolidJS = CSR = vide shell. SolidStart SSR/SSG = content in the HTML. Toujours locate qui un you’re en réalité shipping.

2. The rendering-mode ladder. Pour quelconque route, pick the highest rung le contenu permet: SSG (static, fastest, meilleur pour stable content) → SSR (dynamic, per-request) → streaming SSR (data-heavy) → CSR (seulement pour non-ranking, authenticated views). Plus élevé rungs are meilleur pour les deux robots d’exploration and Core Web Vitals.

3. Two waves, un goal. Google crawls in Wave 1 (raw HTML) and renders in Wave 2 (queued). The entier point of SolidStart SSR is to faire votre content complet in Wave 1 so vous jamais depend on the unpredictable Wave 2 queue.

4. Hydration ≠ resumability. SolidJS hydrates (download → execute → attach). Qwik resumes (aucun re-execution). Fine-grained reactivity speeds the updates après hydration; it doesn’t supprimer hydration. Garder ce straight and you’ll jamais miscategorize SolidJS.

5. Server-load pour anything que doit rank. Si content is récupéré in onMount, it lands après the HTML is sent — invisible to Wave 1. Récupérer it with createAsync/server functions so it’s baked into the SSR réponse.

SolidJS SEO — cheat sheet

SolidJS vs. SolidStart

@solidjs/meta components

Do / don’t

• ✅ Utiliser <Title> from @solidjs/meta. ❌ Raw <title> in server fichiers.
• ✅ History API routing. ❌ Hash (#/page) routing.
• ✅ createAsync / server functions pour rankable données. ❌ onMount récupérer.
• ✅ <HttpStatusCode code={404} />. ❌ Soft 404 (200 + shell).

Myth-busting

• ❌ “SolidJS is resumable like Qwik.” → It hydrates (cheaply); seulement Qwik resumes.
• ❌ “SolidJS is bad for SEO.” → Bare CSR is; SolidStart SSR/SSG is entièrement indexable.
• ❌ “Google can’t read SolidJS.” → It peut (modern Chromium); the risk is Wave-2 delay, supprimé by SSR.

SolidJS SEO mistakes to éviter

Shipping public content with bare SolidJS CSR

Pourquoi it’s incorrect: The premier réponse is an app shell, so robots d’exploration ne faites pas recevoir lune page’s content or metadata immédiatement. Do ce à la place: utiliser SolidStart SSR or route prerendering pour every public route que nécessite to rank.

Fetching rankable données in onMount

Pourquoi it’s incorrect: onMount runs après le serveur réponse, leaving le contenu out of raw HTML. Do ce à la place: récupérer with createAsync, route loaders, or server functions so the données is présent during SSR.

Forgetting MetaProvider or ajout a raw title

Pourquoi it’s incorrect: Sans MetaProvider, @solidjs/meta ne peut pas collect tags pour SSR; a raw <title> in a server fichier peut override its output. Do ce à la place: wrap the app in MetaProvider and utiliser <Title>, <Meta>, and <Link> consistently.

En utilisant hash routes or soft 404s

Pourquoi it’s incorrect: #/page routes are poor discovery targets, and a manquant page que renvoie HTTP 200 semble comme a soft 404. Do ce à la place: utiliser History API routes and définir a réel status with <HttpStatusCode code={404} />.

Appel fine-grained reactivity resumability

Pourquoi it’s incorrect: SolidJS encore hydrates; it ne fait pas resume server execution state the façon Qwik fait. Do ce à la place: décrire Solid’s advantage as efficient client updates, alors vérifier the réel server rendering and field performances.

Trusting SSR sans checking la réponse

Pourquoi it’s incorrect: A route peut utiliser SolidStart and encore leave copy, metadata, or JSON-LD in client-only code. Do ce à la place: inspect View Source and the initial network réponse après every rendering or data-loading modifier.

Audit a SolidStart réponse from the command line

macOS / Linux — inspect status, metadata, and corps content

URL="https://example.com/blog/example-post"
curl -sSIL "$URL" | sed -n '1,12p'
curl -sSL "$URL" -o /tmp/solidstart-page.html
grep -Ei '<title>|name="description"|rel="canonical"|<h1|application/ld\+json' \
  /tmp/solidstart-page.html

The premier réponse devrait be a réel success status pour a live route, and the raw HTML devrait contain the route’s title, description, canonical, H1, and quelconque JSON-LD sans running JavaScript.

Windows PowerShell — run the même raw-HTML vérifier

$url = "https://example.com/blog/example-post"
$response = Invoke-WebRequest -Uri $url
$response.StatusCode
$response.Content | Select-String -Pattern '<title>|name="description"|rel="canonical"|<h1|application/ld\+json'

Vérifier a manquant route renvoie a vrai 404

curl -sS -o /dev/null -w '%{http_code}\n' \
  'https://example.com/this-route-should-not-exist'
# Expected: 404

DevTools Console — liste the rendered head signals

({
  title: document.title,
  description: document.querySelector('meta[name="description"]')?.content,
  canonical: document.querySelector('link[rel="canonical"]')?.href,
  h1: [...document.querySelectorAll('h1')].map((node) => node.textContent.trim()),
})

Run the snippet in le navigateur Console, but comparer it with the command-line result. Si a signal exists seulement in the rendered DOM, it is encore being ajouté après the initial HTML réponse.

Mesurer SolidStart SEO performances in the field

Plus grand affichage de contenu by route type

Metric: Field LCP pour public content, marketing, and autre representative route groupes.

Ce que it indique vous: Si the largest visible content arrives promptly pour réel utilisateurs; SSR helps seulement si données, images, and hosting complet the chemin.

How to pull it: Utiliser CrUX or the Search Console Core Web Vitals report, segmented by similaire URL groupes où possible.

Benchmark / realistic range: Utiliser Google’s current field-data classification and le site’s propre pre-release baseline; ne faites pas substitute a synthetic framework benchmark pour utilisateur données.

Cadence: Monthly and après a material rendering, hosting, or image-delivery modifier has accumulated field données.

Interaction jusqu’au prochain affichage

Metric: Field INP on interactive SolidJS routes.

Ce que it indique vous: Si fine-grained updates translate into responsive réel interactions plutôt que simplement favorable library benchmarks.

How to pull it: Utiliser CrUX or Search Console, alors reproduce poor page groupes with navigateur performances tooling to trouver the long interaction.

Benchmark / realistic range: Comparer with Google’s current classification and the route group’s propre baseline; the framework alone ne fait pas establish a guaranteed range.

Cadence: Monthly and après ajout grand client-side components or third-party scripts.

Décalage cumulatif de mise en page

Metric: Field CLS pour SSR and streaming routes.

Ce que it indique vous: Si hydration, streamed données, images, or late components déplacer content après the initial HTML is affiché.

How to pull it: Utiliser CrUX or Search Console pour the standing KPI and DevTools pour diagnosis on affected templates.

Benchmark / realistic range: Utiliser Google’s current field-data classification and comparer nouveau releases with the established route baseline.

Cadence: Monthly and après modification streaming boundaries, image dimensions, or client-only components.

Outils pour SolidJS SEO

• View Page Source (navigateur) — the fastest SSR vérifier. Si votre content is in the raw HTML (pas simplement <div id="root"></div>), SSR is working.
• Recherche Google Console — Inspection d’URL — the source of truth pour ce que Googlebot crawled and rendered; “View Tested Page → HTML” montre the rendered output.
• Résultats enrichis Tester — validate JSON-LD données structurées on a SolidStart page.
• Bing Webmaster Outils — Inspection d’URL — montre Bing’s rendered version, important parce que Bing is plus conservative à propos de JavaScript que Google.
• Ahrefs Site Audit (JS rendering enabled) — explorer a SolidJS site the façon a rendering robot d’exploration voudrait, surfacing manquant metadata and uncrawlable liens.
• solid-start-sitemap — build-time XML sitemap generation pour SolidStart.
• CrUX / Search Console Core Web Vitals report — confirmer the INP/LCP/CLS advantage en réalité lands pour réel utilisateurs, pas simplement in the lab.
• DevTools Network tab — inspect the initial HTML corps de la réponse to vérifier SSR content (vs. content injected après JS runs).

Testez vos connaissances: SolidJS SEO

Five rapide questions on SolidJS, SolidStart, and getting a Solid site indexé. Pick an réponse pour chaque, alors vérifier.

Ressources utiles

My writing

• JavaScript SEO Problèmes & Meilleur Practices — my definitive guide to rendering, DOM parity, crawlable liens, and getting JS-built content indexé; the foundation a SolidJS site builds on.
• Core Web Vitals: A Complet Guide — ce que INP, LCP, and CLS mesurer and how ils factor into SEO — the metrics SolidJS’s runtime helps with.
• The Beginner’s Guide to SEO technique — où rendering and framework choice fit in the bigger picture.

My speaking

• SMX Avancé 2018: SEO pour JavaScript Frameworks (SlideShare) — my walkthrough of how moteur de recherches handle JS frameworks.
• JavaScript SEO — Ungagged 2019 (SlideShare) — rendering modes, the two-wave traiter, and diagnosis.

From autour the industry

• SolidStart — Head and Metadata — the primary-source guide to @solidjs/meta and SSR head tags.
• SolidStart — Route Pre-rendering — configuring SSG in app.config.ts.
• SolidJS — Fine-Grained Reactivity — signals and no-virtual-DOM updates straight from the docs.
• Google — Comprendre JavaScript SEO Basics — Google’s propre rules pour crawlable liens, canonicals, and the rendering pipeline.
• solid-start-sitemap plugin — build-time XML sitemap generation pour SolidStart.
• js-framework-benchmark (current results) — the long-running benchmark où SolidJS sits near the top and ahead of React on update-heavy fonctionner.

Journal des modifications