Framework Guide

Translate Your Astro Site into 10 Locales with SEO Pre‑Rendering

Published June 30, 2026

Translate Your Astro Site into 10 Locales with SEO Pre‑Rendering

Translate Your Astro Site into 10 Locales with SEO Pre‑Rendering

Published on SiteLocaleAI Blog ---

International traffic is a huge growth lever for static sites, but delivering SEO‑friendly translations can be tricky. In this tutorial we’ll walk through a complete, production‑ready setup for an Astro static site that:

  1. Uses the SiteLocaleAI drop‑in JavaScript library (framework‑agnostic).
  2. Leverages your own LLM API keys (Claude, GPT‑4o‑mini, etc.).
  3. Generates pre‑rendered, fully indexed pages for 10 locales via the SEO CLI.
  4. Applies psychological price rounding per currency.

By the end you’ll have a multilingual site that search engines can crawl instantly, while keeping translation costs under control.

1. Prerequisites

Requirement Why it matters
Node.js ≥ 18 Astro runs on modern Node.
Astro project We’ll start from a fresh astro start site.
SiteLocaleAI API key You’ll need a key for the LLM you prefer (e.g., OPENAI_API_KEY).
Docker (optional) Useful for running the SEO pre‑rendering CLI in a container.

Tip: If you already have an Astro site, skip the npm init astro step and work inside your existing folder.

2. Install SiteLocaleAI

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

The library is framework‑agnostic, so you can import it anywhere – in a component, a layout, or a plain script tag.

3. Configure the locales

Create a siteLocaleConfig.json file at the project root. This file tells SiteLocaleAI which languages to generate, the target currency, and the rounding rules.

{
  "locales": [
    {"code": "en", "currency": "USD", "round": true},
    {"code": "es", "currency": "EUR", "round": true},
    {"code": "fr", "currency": "EUR", "round": true},
    {"code": "de", "currency": "EUR", "round": true},
    {"code": "it", "currency": "EUR", "round": true},
    {"code": "pt", "currency": "BRL", "round": true},
    {"code": "ja", "currency": "JPY", "round": true},
    {"code": "zh", "currency": "CNY", "round": true},
    {"code": "ru", "currency": "RUB", "round": true},
    {"code": "ko", "currency": "KRW", "round": true}
  ],
  "defaultLocale": "en",
  "apiProvider": "openai",   // or "anthropic", "gemini", etc.
  "apiKeyEnv": "OPENAI_API_KEY"
}

Why psychological rounding? The round flag tells SiteLocaleAI to convert prices to the nearest “psychologically appealing” value (e.g., $9.99 → $9.95).

4. Add the translation script to your layout

Open src/layouts/BaseLayout.astro (or create one) and inject the SiteLocaleAI client.

---
import { SiteLocale } from '@sitelocaleai/js';
import localeConfig from '../../siteLocaleConfig.json';
---
<!DOCTYPE html>
<html lang="{localeConfig.defaultLocale}">
  <head>
    <!-- SEO meta tags will be replaced per locale by the CLI -->
    <meta charset="UTF-8" />
    <title>My Astro Site</title>
    <meta name="description" content="A fast static site built with Astro." />
    <script type="module">
      const locale = new SiteLocale({
        configUrl: '/siteLocaleConfig.json',
        apiKey: import.meta.env.SITELOCALEAI_API_KEY,
      });
      // Auto‑translate visible text nodes after the page loads
      window.addEventListener('DOMContentLoaded', () => locale.translatePage());
    </script>
  </head>
  <body>
    <slot />
  </body>
</html>

Important: Store your LLM API key in an environment variable (SITELOCALEAI_API_KEY) and never commit it to the repo.

5. SEO pre‑rendering CLI

SiteLocaleAI ships a CLI that crawls your built site, translates every page, and writes static HTML files for each locale. Search engines then see the exact content they index.

First, add the CLI as a dev dependency:

npm i -D @sitelocaleai/cli

Add a script to package.json:

{
  "scripts": {
    "build": "astro build",
    "prerender": "sitelocaleai prerender --config siteLocaleConfig.json --output dist"
  }
}

Now run the full pipeline:

npm run build && npm run prerender

The CLI will:
1. Load each HTML file from dist/.
2. Call your LLM for every text node and price.
3. Apply the rounding rules.
4. Write locale‑specific files under dist/en/, dist/es/, … etc.

You can verify the output locally:

n -P 8080 dist
# Open http://localhost:8080/es/ in a browser to see the Spanish version.

6. Deploy (Vercel, Netlify, Cloudflare Pages, etc.)

Because the site is fully static after pre‑rendering, any static‑host works. Here’s a minimal Netlify netlify.toml example:

[build]
  publish = "dist"
  command = "npm run build && npm run prerender"

All locale folders are served as normal directories, so example.com/ja/ will be indexed as a separate URL.

7. Verify SEO

Use Google Search Console’s URL Inspection tool on a few locale URLs (e.g., https://example.com/fr/). You should see the translated <title> and <meta description> tags that the CLI injected.

For a quick sanity check, run:

curl -s https://example.com/de/ | grep -i '<title>'

If the title appears in German, you’re good to go.

8. Optional: WordPress plugin for hybrid sites

If part of your content lives in WordPress, you can still use SiteLocaleAI without Node.js. The official WordPress plugin pulls the same siteLocaleConfig.json and runs translations on the server side. See the WordPress integration guide for details.

9. Wrap‑up

You now have:
- A self‑hosted translation pipeline that respects your LLM budget.
- Psychologically rounded prices per currency.
- Fully SEO‑ready static pages for ten locales, indexed instantly by Google.
- A framework‑agnostic setup that works with Astro, React, Vue, Shopify, and more.

Give it a spin on a staging environment, monitor the LLM usage, and adjust the round flag if you need tighter price control.

Ready to go global?

Try SiteLocaleAI on your own project today and see how easy multilingual SEO can be. Get started now →

Back to blog