SolidJS uses fine-grained reactivity and compiles templates to efficient DOM operations at runtime, avoiding a virtual DOM.

To ensure crawlability, use SSR/SSG via SolidStart. Pre-rendered HTML enables fast first paint and reliable indexing.

SolidJS is known for excellent runtime performance due to minimal overhead and granular updates, contributing positively to Core Web Vitals.

International SEO Fundamentals

When targeting multiple countries or languages, proper international SEO ensures search engines serve the right content to the right audience. This involves URL structure, hreflang tags, and language detection.

• URL Structure Options: Choose between subdirectories (/en/, /fr/), subdomains (en.site.com), or parameters (?lang=en). Subdirectories are typically recommended for most sites.
• Hreflang Tags: HTML attributes that tell search engines about language and regional variations of your pages. Format: <link rel="alternate" hreflang="en-US" href="..." />
• Language vs Locale: Use language codes (en) for language targeting, or locale codes (en-US, en-GB) for region-specific content.

Implementing International SEO in SolidJS

SolidJS with SolidStart provides flexible routing and metadata management for international SEO implementation.

• Routing Strategy: Use SolidStart's file-based routing with language prefixes: src/routes/[lang]/about.tsx. This creates dynamic routes for each language.
• Adding Hreflang: Use SolidStart's Title and Meta components from @solidjs/meta to add hreflang tags in your root or layout component.
• Recommended Tools: @solid-primitives/i18n (lightweight i18n), solid-i18n, or custom solutions leveraging Solid's reactivity.
• Code Example:

  // src/routes/[lang]/about.tsx
  import { useParams } from '@solidjs/router';
  import { Title, Meta, Link } from '@solidjs/meta';
  import { createI18nContext } from '@solid-primitives/i18n';
  
  export default function About() {
    const params = useParams();
    const lang = () => params.lang || 'en';
    
    return (
      <>
        <Title>About Us</Title>
        <Meta name="description" content="About our company" />
        <Link rel="alternate" hreflang="en" href="https://site.com/en/about" />
        <Link rel="alternate" hreflang="fr" href="https://site.com/fr/about" />
        <Link rel="alternate" hreflang="x-default" href="https://site.com/en/about" />
        
        <div lang={lang()}>
          <h1>About</h1>
        </div>
      </>
    );
  }