Translate an Astro Site to 10 Locales with SEO‑Ready SiteLocaleAI
Published on SiteLocaleAI.com
International visitors expect content in their native language, prices that feel natural, and search‑engine results that match their queries. With SiteLocaleAI you can achieve all three on an Astro static site without leaving the comfort of a framework‑agnostic, self‑hosted solution.
In this tutorial we will:
1. Install the SiteLocaleAI drop‑in JavaScript library.
2. Configure LLM API keys for translation.
3. Enable price localization with psychological rounding.
4. Generate SEO‑friendly pre‑rendered pages for 10 locales using the SiteLocaleAI CLI.
5. Deploy the final site to a static host (e.g., Netlify or Vercel).
Prerequisites – Node ≥ 18, an Astro project (
npm create astro@latest), and an LLM API key (Claude, GPT‑4o‑mini, etc.).
1. Install SiteLocaleAI
From your Astro project root, add the library as a dev dependency:
npm i -D @sitelocaleai/client
The package ships a tiny runtime (siteLocaleAI.js) that you can import anywhere. Because Astro builds static HTML, we’ll load the script only on the client.
// src/components/LocaleSwitcher.tsx
import { onMount } from 'astro';
export default function LocaleSwitcher() {
onMount(async () => {
const { initLocaleAI } = await import('@sitelocaleai/client');
initLocaleAI({
// Your LLM endpoint – can be Claude, OpenAI, etc.
apiEndpoint: 'https://api.openai.com/v1/chat/completions',
apiKey: import.meta.env.SITELOCALEAI_API_KEY,
// Default locale for the first visit
defaultLocale: 'en',
// List of supported locales (ISO 639‑1 + country code)
locales: ['en', 'es', 'fr', 'de', 'it', 'pt', 'ja', 'zh', 'ru', 'ar'],
});
});
return (
<nav class="locale-switcher">
{/* UI for switching locales – omitted for brevity */}
</nav>
);
}
Add the component to your layout so it loads on every page:
// src/layouts/BaseLayout.astro
---
import LocaleSwitcher from '../components/LocaleSwitcher.tsx';
---
<html lang="en">
<head>
<!-- SEO meta tags will be injected later -->
</head>
<body>
<LocaleSwitcher />
<slot />
</body>
</html>
2. Configure LLM Keys
SiteLocaleAI is self‑hosted – you provide the API key. Store it in an environment variable to keep it out of the repo.
# .env
SITELOCALEAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxx
Astro automatically injects import.meta.env variables prefixed with ASTRO_. Rename the variable if you prefer:
ASTRO_SITELOCALEAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxx
Then reference it in the client script as shown earlier.
3. Price Localization & Psychological Rounding
SiteLocaleAI can rewrite numbers into locale‑specific formats and apply rounding that feels natural (e.g., €9.99 → €10). Define a price map in a JSON file:
// src/data/prices.json
{
"productA": {
"USD": 19.99,
"EUR": 17.49,
"JPY": 2100
},
"productB": {
"USD": 49.95,
"EUR": 44.90,
"JPY": 5400
}
}
Create a helper that SiteLocaleAI will call during translation:
// src/lib/priceFormatter.ts
export function formatPrice(value: number, locale: string, currency: string) {
// Apply psychological rounding: round up to the nearest 0.99 for most currencies
const rounded = Math.ceil(value * 100) / 100 - 0.01;
return new Intl.NumberFormat(locale, {
style: 'currency',
currency,
minimumFractionDigits: 0,
maximumFractionDigits: 2,
}).format(rounded);
}
Pass this function to SiteLocaleAI when initializing:
initLocaleAI({
apiEndpoint: 'https://api.openai.com/v1/chat/completions',
apiKey: import.meta.env.ASTRO_SITELOCALEAI_API_KEY,
defaultLocale: 'en',
locales: [...],
// Hook for price replacement
priceHandler: (price, locale) => {
const currencyMap: Record<string, string> = {
en: 'USD',
es: 'EUR',
fr: 'EUR',
de: 'EUR',
it: 'EUR',
pt: 'EUR',
ja: 'JPY',
zh: 'CNY',
ru: 'RUB',
ar: 'SAR',
};
const currency = currencyMap[locale] || 'USD';
return formatPrice(price, locale, currency);
},
});
Now any price token like {{price:productA}} in your HTML will be replaced with a localized, rounded amount.
4. SEO‑Friendly Pre‑Rendering with the CLI
Search engines can’t execute client‑side translation, so we pre‑render each locale at build time. SiteLocaleAI ships a CLI that crawls your site, fetches translations, and writes static HTML files.
First, install the CLI globally (or as a dev dependency):
npm i -g @sitelocaleai/cli
Create a config file that tells the CLI which locales to generate and where to find the LLM key.
// siteLocaleai.config.json
{
"locales": ["en", "es", "fr", "de", "it", "pt", "ja", "zh", "ru", "ar"],
"defaultLocale": "en",
"apiKey": "${ASTRO_SITELOCALEAI_API_KEY}",
"outputDir": "dist/locale",
"priceMapPath": "src/data/prices.json"
}
Add a script to package.json:
"scripts": {
"build": "astro build",
"prerender": "sitelocaleai prerender --config siteLocaleai.config.json",
"postbuild": "npm run prerender"
}
Now run the normal Astro build:
npm run build
During the postbuild step the CLI will:
1. Spin up a headless Chromium instance.
2. Load each generated page.
3. Call the LLM to translate visible text.
4. Replace price placeholders using the priceHandler.
5. Write a locale‑specific HTML file under dist/locale/<locale>/….
The result is a set of static, fully translated pages that search engines can index directly.
5. Deploy
Push the dist folder to your static host. For Netlify you can set the build command to npm run build and the publish directory to dist. The locale‑specific subfolders will be served automatically (e.g., example.com/locale/es/ for Spanish).
Sitemap & Robots
SiteLocaleAI can also generate a multilingual sitemap. Add the following to astro.config.mjs:
import { defineConfig } from 'astro/config';
export default defineConfig({
site: 'https://example.com',
vite: {
plugins: [
// other plugins
],
},
// Enable sitemap generation for each locale
integrations: [
// ...
],
});
Then run:
npm i -D astro-sitemap
npm run sitemap
The generated sitemap.xml will contain entries for every locale, boosting international SEO.
6. Quick Recap
| Step | What you did |
|---|---|
| 1️⃣ | Added the SiteLocaleAI client library to Astro. |
| 2️⃣ | Supplied your own LLM API key via environment variables. |
| 3️⃣ | Implemented price localization with psychological rounding. |
| 4️⃣ | Used the SiteLocaleAI CLI to pre‑render 10 locales for search‑engine indexing. |
| 5️⃣ | Deployed the static output and generated a multilingual sitemap. |
You now have a fast, SEO‑optimized, multilingual Astro site that respects local pricing conventions and leverages the power of LLMs without a third‑party SaaS lock‑in.
7. Next Steps
- Explore advanced translation prompts in the SiteLocaleAI docs.
- Try the CLI guide for custom caching strategies.
- Scale beyond 10 locales by simply adding them to
siteLocaleai.config.json.
Ready to go global?
Give SiteLocaleAI a spin on your own project. The Indie plan starts at $5/month, perfect for hobbyists, while the Enterprise tier unlocks dedicated support and on‑premise LLM routing. Start your free trial now and watch your traffic grow across borders!