Boost International SEO for Astro Sites with SiteLocaleAI

Published on SiteLocaleAI Blog

International traffic is a goldmine for static sites, but getting search engines to index every language version can be a headache. SiteLocaleAI solves this with a drop‑in JavaScript library that works with any framework—including Astro—plus a CLI that pre‑renders fully translated pages for crawlers. In this guide we’ll walk through turning an Astro static site into a 10‑locale, SEO‑friendly powerhouse.

---

1. Prerequisites

• Astro 2.x project (or newer) – static‑site generation enabled.
• Access to an LLM API key (Claude, GPT‑4o‑mini, etc.).
• Node.js ≥ 18 for the CLI.
• Optional: a custom domain for each locale (e.g., example.fr).

Tip: Keep your LLM keys in a .env file and never commit them to source control.

---

2. Install SiteLocaleAI

# From your Astro project root
npm i @sitelocaleai/js

The package is framework‑agnostic, so you can import it anywhere in your Astro components.

---

3. Configure the Library

Create a siteLocaleConfig.js file at the project root:

// siteLocaleConfig.js
export const localeConfig = {
  defaultLocale: "en",
  locales: [
    "en", "es", "fr", "de", "it", "pt", "nl", "sv", "ja", "zh",
  ],
  // Mapping of currency symbols per locale for price rounding
  currencyMap: {
    en: { symbol: "$", rounding: 0.99 },
    es: { symbol: "€", rounding: 0.95 },
    fr: { symbol: "€", rounding: 0.99 },
    de: { symbol: "€", rounding: 0.95 },
    it: { symbol: "€", rounding: 0.99 },
    pt: { symbol: "€", rounding: 0.95 },
    nl: { symbol: "€", rounding: 0.99 },
    sv: { symbol: "kr", rounding: 0.95 },
    ja: { symbol: "¥", rounding: 0 },
    zh: { symbol: "¥", rounding: 0 },
  },
  // LLM provider configuration – keep your key secret!
  llm: {
    provider: "openai",
    model: "gpt-4o-mini",
    apiKey: process.env.OPENAI_API_KEY,
  },
};

Internal link: For a deeper dive into configuration options, see the SiteLocaleAI Docs.

---

4. Hook the Library into Astro

Create a small wrapper component, src/components/Translator.jsx:

import { translatePage } from "@sitelocaleai/js";
import { localeConfig } from "../../siteLocaleConfig.js";

export async function onBeforeRender({ request }) {
  const url = new URL(request.url);
  const locale = url.pathname.split("/")[1] || localeConfig.defaultLocale;

  // Load the original HTML (Astro already renders it)
  const html = await request.text();

  // Translate and localize prices
  const localized = await translatePage(html, {
    locale,
    config: localeConfig,
  });

  return {
    body: localized,
    headers: { "Content-Language": locale },
  };
}

Add the hook to your astro.config.mjs:

import { defineConfig } from "astro/config";
import { onBeforeRender } from "./src/components/Translator.jsx";

export default defineConfig({
  integrations: [],
  // Global middleware for every route
  server: {
    middleware: [onBeforeRender],
  },
});

Now every request is intercepted, translated, and price‑rounded on‑the‑fly.

---

5. SEO‑Friendly Pre‑Rendering with the CLI

Search engines don’t execute client‑side JavaScript, so we need static HTML for each locale. SiteLocaleAI’s CLI does this in one command:

npx @sitelocaleai/cli prerender \
  --src ./dist \
  --out ./dist-localized \
  --locales en,es,fr,de,it,pt,nl,sv,ja,zh \
  --config ./siteLocaleConfig.js

The CLI:
1. Reads every HTML file in ./dist.
2. Generates a copy for each locale.
3. Rewrites <head> tags: lang, hreflang, and canonical URLs.
4. Injects localized meta titles & descriptions (auto‑generated by the LLM).

Internal link: Detailed CLI options are documented at the SiteLocaleAI CLI Docs.

---

6. Price Localization with Psychological Rounding

The currencyMap in siteLocaleConfig.js tells the library how to round prices. Example:

function roundPrice(value, rounding) {
  // e.g., rounding = 0.99 => 12.34 → 12.99
  const base = Math.floor(value);
  return base + rounding;
}

When the LLM sees a price like $12.34, it replaces it with $12.99 for US visitors, $12.95 for Spanish visitors, etc. This boosts conversion while keeping the UI consistent.

---

7. Verify the Output

1. Local test – run npm run preview on the pre‑rendered folder: bash npx http-server ./dist-localized -p 4000
2. Open http://localhost:4000/es/ and inspect the <html lang="es"> attribute and the price format.
3. Use Google Search Console → URL Inspection to confirm the hreflang tags are correct.

---

8. Deploy

Because the site is fully static, any CDN (Vercel, Netlify, Cloudflare Pages) works out of the box. Just upload the dist-localized folder.

---

9. Recap

• Drop‑in JS works with Astro without extra build steps.
• Self‑hosted LLM keys keep data private and cost predictable.
• Price rounding per currency improves conversion.
• CLI pre‑render gives search engines fully translated, indexable pages.
• 10 locales are supported with a single config file.

---

10. Ready to Go Global?

Give SiteLocaleAI a spin on your Astro project today. The Indie plan starts at just $5/month, perfect for testing. Visit the SiteLocaleAI pricing page and start translating!

---

Happy multilingual SEO!