International SEO for Astro Sites – A Complete Guide for 10 Locales
Published on SiteLocaleAI Blog
Introduction
Astro’s static‑site generation (SSG) gives you lightning‑fast pages, but reaching a global audience requires more than speed. You need automatic translation, price localization, and search‑engine‑friendly pre‑rendering for each target language. SiteLocaleAI’s drop‑in JavaScript library solves all three while letting you keep your LLM API keys private.
In this guide we’ll build an Astro site that serves 10 locales (e.g., en, es, fr, de, ja, zh, ru, pt, it, ko) with:
1. Client‑side translation via SiteLocaleAI.
2. Psychological price rounding per currency.
3. SEO pre‑rendering using the SiteLocaleAI CLI so crawlers see fully translated HTML.
Tip: The steps work for any framework, but we’ll use Astro’s native routing and markdown pages for clarity.
1. Install SiteLocaleAI
First, add the library to your project. SiteLocaleAI is framework‑agnostic, so a simple npm install is enough:
npm i @sitelocaleai/js
Create a .env file (never commit your keys) and store your LLM API key:
SITELOCALEAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxx
2. Configure Astro for Multiple Locales
Astro supports dynamic routes. Create a folder src/pages/[locale]/ and place your markdown pages inside. For example:
src/pages/
├─ en/
│ └─ index.md
├─ es/
│ └─ index.md
…
Add a fallback route that redirects unknown locales to the default (en).
// src/pages/[locale]/index.astro
---
import { redirect } from "astro:response";
const supported = ["en","es","fr","de","ja","zh","ru","pt","it","ko"];
if (!supported.includes(params.locale)) {
return redirect("/en");
}
---
<h1>Welcome to our site</h1>
<p>{import.meta.env.SITE_NAME}</p>
3. Drop‑in Translation with SiteLocaleAI
SiteLocaleAI works by attaching a small script that calls your LLM for each text node. Add the script once in your root layout:
---
import SiteLocaleAI from "@sitelocaleai/js";
---
<html lang="{params.locale}">
<head>
<script type="module" src="/site-localeai.js"></script>
</head>
<body>
<slot />
</body>
</html>
Create public/site-localeai.js that initializes the library with your API key and the current locale:
// public/site-localeai.js
import { SiteLocaleAI } from "@sitelocaleai/js";
const locale = document.documentElement.lang;
SiteLocaleAI.init({
apiKey: import.meta.env.SITELOCALEAI_API_KEY,
targetLocale: locale,
// Optional: provide a custom prompt for better tone
prompt: `Translate the following text to ${locale} while keeping brand voice.`,
});
All static text inside the page will now be translated on the client side. For SEO we’ll pre‑render these translations (next section).
4. Localize Prices with Psychological Rounding
SiteLocaleAI also offers a price‑localization helper. Wrap any price element with a data-price attribute and let the library convert it:
<p>Only <span data-price="49.99" data-currency="USD">$49.99</span> per month!</p>
The script will:
1. Detect the visitor’s currency (or the locale’s default).
2. Convert using a live exchange rate.
3. Apply psychological rounding (e.g., $49.99 → $49.00 or $50.00 depending on the market).
You can also force a specific currency for a locale:
<span data-price="49.99" data-currency="EUR" data-locale="fr">49,99 €</span>
5. SEO‑Friendly Pre‑Rendering with the CLI
Search engines can’t execute JavaScript reliably, so we need static HTML for each locale. SiteLocaleAI’s CLI fetches the translated content and writes it to the dist/ folder.
5.1 Install the CLI globally
npm i -g @sitelocaleai/cli
5.2 Run the pre‑render command
site-localeai pre-render \
--src ./dist \
--locales en,es,fr,de,ja,zh,ru,pt,it,ko \
--api-key $SITELOCALEAI_API_KEY
The CLI:
* Loads each generated HTML file.
* Sends the page content to your LLM for translation.
* Replaces the original text nodes with the translated version.
* Writes a locale‑specific file (/en/index.html, /es/index.html, …).
5.3 Verify the output
Open dist/es/index.html in a browser – you should see the Spanish version without any <script> tags that perform translation. This is what Google will index.
6. Enhancing Sitemap and Robots
After pre‑rendering, generate a sitemap that lists every locale URL. Astro’s built‑in sitemap plugin can be configured like this:
// astro.config.mjs
import sitemap from "@astrojs/sitemap";
export default defineConfig({
integrations: [
sitemap({
customPages: [
"/en/",
"/es/",
"/fr/",
"/de/",
"/ja/",
"/zh/",
"/ru/",
"/pt/",
"/it/",
"/ko/",
],
}),
],
});
Add a robots.txt that allows all locales:
User-agent: *
Allow: /
Sitemap: https://yourdomain.com/sitemap.xml
7. Internal Documentation Links
For deeper configuration options, see the official docs:
- [Getting Started]https://sitelocaleai.com/docs/getting-started)
- [SEO Pre‑Rendering]https://sitelocaleai.com/docs/seo)
8. Deploy and Test
- Build your Astro site:
bash npm run build - Run the CLI to generate translated HTML.
- Deploy the
dist/folder to your static host (Vercel, Netlify, Cloudflare Pages, etc.). - Use Google Search Console to submit the new sitemap and monitor indexing for each locale.
9. Common Pitfalls & Solutions
| Issue | Fix |
|---|---|
| Translations lag behind content updates | Re‑run site-localeai pre-render after each build. |
| Prices show wrong currency | Ensure data-currency matches the locale’s default or set it explicitly. |
| Search engines still see the original language | Verify that the pre‑rendered HTML contains the translated text and no <script> tags for translation. |
10. Wrap‑Up
By combining Astro’s static generation with SiteLocaleAI’s self‑hosted LLM translation, price rounding, and SEO pre‑rendering, you can launch a truly global site that loads instantly, respects local pricing psychology, and ranks in every target market.
Ready to make your Astro site multilingual and SEO‑ready? Try SiteLocaleAI today and see how easy international growth can be.