Translating an Astro Static Site to 10 Locales with Full SEO Support
Published on SiteLocaleAI Blog
Overview
Astro is a fast, content‑focused static site generator that works great with any front‑end framework. When you need to serve the same site in multiple languages, handle currency conversion, and keep search engines happy, a traditional i18n plugin can become a bottleneck. SiteLocaleAI solves this by providing a drop‑in, framework‑agnostic JavaScript library that runs on the client (or during a pre‑render step) and uses your own LLM API keys for translation. In this guide we’ll:
- Add the SiteLocaleAI library to an Astro project.
- Define ten locales (en‑US, en‑GB, fr‑FR, de‑DE, es‑ES, ja‑JP, zh‑CN, pt‑BR, ko‑KR, it‑IT).
- Localize prices with psychological rounding per currency.
- Use the SiteLocaleAI CLI to pre‑render SEO‑friendly pages for each locale.
- Deploy the static output to any host (Netlify, Vercel, Cloudflare Pages, etc.).
Tip: All steps work with any JavaScript runtime, so you can keep your existing Astro build pipeline unchanged.
1. Install the Library
First, add the npm package to your Astro project. The package is tiny (≈ 5 KB gzipped) and has no runtime dependencies.
npm i @sitelocaleai/js
Then create a small wrapper that loads the library only on the client side (Astro renders on the server by default).
// src/lib/siteLocale.ts
import { initSiteLocale } from "@sitelocaleai/js";
export function initLocalization() {
if (typeof window === "undefined") return; // skip during SSR
initSiteLocale({
// Your LLM provider – you can swap Claude, GPT‑4o‑mini, etc.
apiKey: import.meta.env.SITELOCALEAI_API_KEY,
defaultLocale: "en-US",
// Optional: custom rounding rules per currency
priceRounding: {
USD: (v) => Math.round(v),
EUR: (v) => Math.round(v * 0.95) * 5, // psychological rounding to nearest 5
JPY: (v) => Math.round(v),
// add more as needed
},
});
}
Add the initializer to the root layout so it runs on every page.
// src/layouts/BaseLayout.xl
---
import { initLocalization } from "../lib/siteLocale";
initLocalization();
---
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta tags, etc. -->
</head>
<body>
<slot />
</body>
</html>
2. Define Locales and Translation Files
Create a locales folder with JSON files for each language. The keys should match the text you want to translate.
// src/locales/en-US.json
{
"title": "Welcome to Our Store",
"description": "Shop the best products at unbeatable prices.",
"priceLabel": "Price"
}
Repeat for the other nine locales (fr‑FR, de‑DE, …). You can generate the initial files by running the SiteLocaleAI CLI with the --generate flag, which will call your LLM to produce translations automatically.
npx siteLocaleai generate --source src/locales/en-US.json --locales fr-FR,de-DE,es-ES,ja-JP,zh-CN,pt-BR,ko-KR,it-IT
The CLI will ask for your API key once and then populate the target JSON files.
3. Localize Prices with Psychological Rounding
SiteLocaleAI lets you pass a priceRounding map (see the init code above). When you render a price, call the helper:
// src/components/ProductCard.tsx
---
import { formatPrice } from "@sitelocaleai/js";
---
<div class="product-card">
<h2>{product.name}</h2>
<p>{formatPrice(product.price, "USD")}</p>
</div>
The formatPrice function automatically:
1. Detects the current locale (e.g., fr-FR).
2. Converts the base price using the built‑in exchange‑rate service (or a custom one you provide).
3. Applies the rounding rule defined for that currency.
Result: a French visitor sees € 19,95 instead of € 20,00, which feels cheaper while still respecting the real conversion.
4. Pre‑render SEO‑Friendly Pages with the CLI
Search engines need static, fully translated HTML to index each locale correctly. SiteLocaleAI’s CLI can crawl your Astro build folder, replace translation placeholders, and output a separate folder per locale.
# Build the Astro site first
npm run build
# Then run the SEO pre‑render step
npx siteLocaleai seo \
--input dist/ \
--locales en-US,en-GB,fr-FR,de-DE,es-ES,ja-JP,zh-CN,pt-BR,ko-KR,it-IT \
--output dist-localized/
What happens under the hood:
- The CLI loads each HTML file, injects the correct locale strings from the JSON files, and rewrites <html lang="…">.
- It also updates <link rel="alternate" hreflang="…"> tags automatically, which is essential for Google’s multilingual indexing.
- Prices are rendered with the appropriate rounding and currency symbols.
After the command finishes, you’ll have a folder structure like:
/dist-localized/
├─ en-US/
├─ fr-FR/
├─ de-DE/
…
Deploy the entire dist-localized folder to your static host. Most CDNs treat each sub‑folder as a separate site, so the URL pattern becomes https://example.com/fr/ for French, https://example.com/ja/ for Japanese, etc.
5. Add <link rel="alternate"> Tags for Search Engines
While the CLI adds these tags automatically, you may want to customize them in your Astro head component.
---
import { getAvailableLocales } from "@sitelocaleai/js";
---
<head>
<title>{title}</title>
<meta name="description" content={description} />
{getAvailableLocales().map((loc) => (
<link rel="alternate" hreflang={loc} href={`/${loc}/${pagePath}`} />
))}
</head>
This ensures Google and Bing understand the relationship between the language versions, boosting international SEO.
6. Deploy
Your Localized Site
Upload the dist-localized folder to your preferred static host. For Netlify, you can set the publish directory in netlify.toml:
[build]
publish = "dist-localized"
For Vercel, just point the output directory to the same folder in the project settings.
7. Verify SEO with Google Search Console
- Add each locale URL (
https://example.com/fr/,https://example.com/ja/, …) as a property. - Use the URL Inspection tool to confirm Google sees the correct language tag and content.
- Submit a sitemap that lists every locale page. SiteLocaleAI can generate one automatically:
npx siteLocaleai sitemap --locales en-US,fr-FR,de-DE,es-ES,ja-JP,zh-CN,pt-BR,ko-KR,it-IT --output dist-localized/sitemap.xml
8. Wrap‑up
You now have a fully multilingual Astro site that:
- Translates content on‑the‑fly using your own LLM API key.
- Localizes prices with psychologically rounded values per currency.
- Serves static, SEO‑optimized pages for ten locales.
- Requires no Node.js on the server (the WordPress plugin works similarly for non‑JS sites).
All of this is possible with a few lines of configuration and the powerful SiteLocaleAI CLI.
Ready to go global?
Try SiteLocaleAI today and see how easy it is to turn any static site into a multilingual, SEO‑ready powerhouse.