Translate Your Astro Site to 10 Locales with Full SEO Support
Published on SiteLocaleAI Blog
Introduction
Astro is a fast, static‑site generator that lets you build content‑rich pages with zero runtime JavaScript. When you want to reach a global audience, you need two things:
1. Accurate, LLM‑driven translation for every page.
2. SEO‑friendly pre‑rendering so search engines can index each locale.
SiteLocaleAI provides a drop‑in JavaScript library that works with any framework—including Astro—while keeping the translation process self‑hosted. You supply your own LLM API key (Claude, GPT‑4o‑mini, etc.), and the library handles language detection, price localization with psychological rounding, and SEO pre‑rendering via a CLI.
In this guide we’ll:
- Add SiteLocaleAI to an Astro project.
- Configure 10 language locales.
- Enable price rounding per currency.
- Generate static, SEO‑optimized pages for each locale.
- Deploy the final site.
Tip: All steps assume you have an existing Astro project (
npm init astro). If you’re starting from scratch, create one first.
1. Install SiteLocaleAI
SiteLocaleAI is a pure‑JavaScript library, so you can install it with npm or yarn. The library is framework‑agnostic, which means you can import it directly in Astro components.
# From your Astro project root
npm i @sitelocaleai/core
Note: The library does not run any server‑side code; it only prepares translation data that the CLI later uses to generate static HTML.
2. Create a Configuration File
Create a sitelocale.config.js at the project root. This file tells SiteLocaleAI which locales to generate, the default language, and how to round prices.
// sitelocale.config.js
module.exports = {
// Your LLM API key – keep it secret (use env vars in production)
apiKey: process.env.SITELOCALEAI_API_KEY,
// Languages you want to support (ISO 639‑1 codes)
locales: [
"en", // English (default)
"es", // Spanish
"fr", // French
"de", // German
"it", // Italian
"pt", // Portuguese
"ja", // Japanese
"zh", // Chinese (Simplified)
"ru", // Russian
"ar" // Arabic
],
// Price rounding rules per currency (psychological rounding)
priceRounding: {
USD: (c) => Math.round(c / 0.99) * 0.99, // $0.99, $1.99, etc.
EUR: (c) => Math.round(c / 0.95) * 0.95,
GBP: (c) => Math.round(c / 0.99) * 0.99,
JPY: (c) => Math.round(c / 100) * 100,
// Add more as needed
},
// Output folder for pre‑rendered SEO pages
seoOutput: "dist/seo",
};
Security note: Store
SITELOCALEAI_API_KEYin a.envfile and add it to.gitignore.
3. Wrap Your Content with the LocaleProvider
In Astro you can use a layout component to wrap every page. Create a src/layouts/LocaleProvider.astro that loads the SiteLocaleAI script and provides a translate helper.
---
import { onMount } from "solid-js";
import SiteLocaleAI from "@sitelocaleai/core";
import config from "../../sitelocale.config.js";
export let children;
let locale = "en"; // default, will be overridden by URL
onMount(() => {
// Initialize the library with the API key and locale
SiteLocaleAI.init({
apiKey: config.apiKey,
locale,
priceRounding: config.priceRounding,
});
});
---
<html lang={locale}>
<head>
<!-- SEO meta tags will be injected later by the CLI -->
<slot name="head" />
</head>
<body>
<slot />
</body>
</html>
Now, in each page, import the layout:
---
import LocaleProvider from "../layouts/LocaleProvider.astro";
---
<LocaleProvider>
<title>My Astro Site</title>
<h1>{SiteLocaleAI.t("welcome_message")}</h1>
<p>{SiteLocaleAI.t("intro_paragraph")}</p>
<p>Price: {SiteLocaleAI.formatPrice(49.99, "USD")}</p>
</LocaleProvider>
The SiteLocaleAI.t function fetches the translated string from the LLM, while formatPrice applies the rounding rule defined earlier.
4. Generate Translation Files (CLI)
SiteLocaleAI ships a CLI that walks through every page, sends the source text to your LLM, and writes locale‑specific JSON files.
# Install the CLI globally (optional)
npm i -g @sitelocaleai/cli
# Run the translation pass
sitelocale translate --config sitelocale.config.js
The CLI will create a folder like src/locales/{locale}.json containing key‑value pairs for each translatable string.
5. Pre‑Render SEO Pages
Search engines need fully rendered HTML for each locale. SiteLocaleAI’s SEO CLI reads the locale JSON files, injects them into the Astro build, and outputs static HTML in dist/seo.
sitelocale seo --config sitelocale.config.js --output dist/seo
During this step, the CLI also generates <link rel="alternate" hreflang="..."> tags for each language, helping Google understand the multilingual structure.
6. Deploy the Site
After the SEO pre‑rendering step, you can deploy the dist folder (which now contains both the original Astro build and the SEO‑ready pages). Most static hosts (Vercel, Netlify, Cloudflare Pages) work out of the box.
# Build Astro (includes the normal static assets)
npm run build
# Copy SEO HTML into the final distribution
cp -r dist/seo/* dist/
# Deploy – example with Vercel
vercel --prod
Your site now serves:
- Localized content for 10 languages.
- Psychologically rounded prices per currency.
- SEO‑friendly static pages that Google can index without JavaScript.
7. WordPress Plugin (Optional)
If you also run a WordPress blog alongside your Astro site, SiteLocaleAI offers a Node‑less plugin that reads the same locale JSON files and serves translated content. Install it from the WordPress admin panel and point it to the sitelocale.config.js path.
8. Monitoring & Updates
Because the translation is performed at build time, you only need to re‑run the CLI when you add new content or change pricing rules. Set up a CI job that runs:
npm run build && sitelocale translate && sitelocale seo && npm run deploy
This ensures every locale stays in sync with your source content.
Conclusion
By integrating SiteLocaleAI with Astro, you get a self‑hosted, LLM‑powered translation pipeline that respects price psychology and delivers SEO‑ready static pages for any number of locales. The approach is framework‑agnostic, cheap (you only pay for the LLM calls), and gives you full control over API keys and data.
Ready to go global? Try SiteLocaleAI on your next Astro project and see how easy multilingual SEO can be.
Read the full installation guide | Learn more about SEO pre‑rendering
Start translating today and boost your international traffic with SiteLocaleAI!