How to Build a Multi‑Locale Astro Site with Full SEO Support

Published on SiteLocaleAI Blog ---

International audiences are the lifeblood of modern web businesses, but delivering a seamless, SEO‑friendly experience across languages can be a nightmare. In this tutorial we’ll take an Astro static site and turn it into a globally optimized powerhouse using SiteLocaleAI. By the end you’ll have:

1. A drop‑in JavaScript library that translates every page on the fly.
2. Price localization with psychological rounding per currency.
3. Pre‑rendered, fully translated HTML for 10 locales, ready for search‑engine indexing.
4. A WordPress‑style plugin‑free setup that works with any framework.

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
npm i @sitelocaleai/js

SiteLocaleAI is framework‑agnostic, so after installation we’ll simply import the library in a client‑side script.

---

2. Create a Configuration File

Create src/siteLocaleConfig.js (or .ts if you prefer TypeScript). This file tells SiteLocaleAI which locales you support, the default language, and how to round prices.

// src/siteLocaleConfig.js
export const localeConfig = {
  defaultLocale: "en",
  locales: [
    { code: "en", name: "English", currency: "USD" },
    { code: "es", name: "Español", currency: "EUR" },
    { code: "fr", name: "Français", currency: "EUR" },
    { code: "de", name: "Deutsch", currency: "EUR" },
    { code: "ja", name: "日本語", currency: "JPY" },
    { code: "zh", name: "中文", currency: "CNY" },
    { code: "pt", name: "Português", currency: "BRL" },
    { code: "ru", name: "Русский", currency: "RUB" },
    { code: "it", name: "Italiano", currency: "EUR" },
    { code: "ko", name: "한국어", currency: "KRW" },
  ],
  // Psychological rounding: e.g., $9.99 instead of $10.00
  priceRounding: {
    USD: (value) => Math.round(value * 100) / 100,
    EUR: (value) => Math.round(value * 100) / 100,
    JPY: (value) => Math.round(value),
    CNY: (value) => Math.round(value * 10) / 10,
    BRL: (value) => Math.round(value * 100) / 100,
    RUB: (value) => Math.round(value * 100) / 100,
    KRW: (value) => Math.round(value),
  },
  // Your LLM API key – keep it secret (env variable recommended)
  llmApiKey: process.env.SITELOCALEAI_API_KEY,
  // Choose the model you prefer
  model: "gpt-4o-mini",
};

Tip: Store SITELOCALEAI_API_KEY in a .env file and load it with dotenv to avoid committing secrets.

---

3. Add the Library to Your Layout

Edit src/layouts/BaseLayout.astro (or any root layout) and inject the script that boots SiteLocaleAI on the client.

---
import { localeConfig } from "../siteLocaleConfig.js";
---
<!DOCTYPE html>
<html lang="{localeConfig.defaultLocale}">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{title}</title>
    <!-- SEO meta tags (will be overwritten by pre‑rendered pages) -->
    <meta name="description" content="{description}" />
  </head>
  <body>
    <slot />
    <!-- SiteLocaleAI bootstrap -->
    <script type="module">
      import { initSiteLocale } from "@sitelocaleai/js";
      import { localeConfig } from "../siteLocaleConfig.js";
      initSiteLocale(localeConfig);
    </script>
  </body>
</html>

The initSiteLocale call does three things:

• Detects the visitor’s language (or reads the lang URL prefix).
• Fetches translations from your LLM API.
• Replaces any element with data-price attribute using the rounding rules.

---

4. Mark Up Content for Translation & Price Localization

In your pages, wrap translatable text in data-i18n and mark prices with data-price.

---
import { localeConfig } from "../siteLocaleConfig.js";
---
<h1 data-i18n="hero.title">Welcome to Our Store</h1>
<p data-i18n="hero.subtitle">Best products for every budget.</p>

<div class="product">
  <span data-i18n="product.name">Premium Headphones</span>
  <span data-price="199.99" data-currency="USD" class="price"></span>
</div>

When the page loads, SiteLocaleAI will replace the text with the appropriate translation and format the price according to the visitor’s locale and the rounding function defined earlier.

---

5. Pre‑Render SEO‑Friendly Pages for All Locales

Search engines can’t execute JavaScript reliably, so we’ll use SiteLocaleAI’s CLI to generate static HTML for each locale before deployment.

# Install the CLI globally (optional)
npm i -g @sitelocaleai/cli

# Run the pre‑render command
nsite-localeai prerender \
  --src ./dist \
  --out ./dist-localized \
  --locales en,es,fr,de,ja,zh,pt,ru,it,ko \
  --config ./src/siteLocaleConfig.js

The CLI does the following:
1. Crawls every HTML file in ./dist.
2. Calls the LLM API to translate the content for each locale.
3. Rewrites price values with the appropriate rounding.
4. Writes a locale‑specific folder (/en, /es, …) containing fully translated static HTML.

Result: When Googlebot requests /es/about.html, it receives a ready‑to‑index Spanish page with proper <title> and <meta description> tags.

---

6. Deploy the Localized Build

Copy the dist-localized folder to your static host (Netlify, Vercel, Cloudflare Pages, etc.). Because the URLs are static, you can set up simple redirects:

# netlify.toml
[[redirects]]
  from = "/"
  to = "/en/"
  status = 301

[[redirects]]
  from = "/es/*"
  to = "/es/:splat"
  status = 200

Now each locale has its own clean URL hierarchy, which is ideal for international SEO.

---

7. Verify SEO with the SiteLocaleAI Docs

For deeper configuration (sitemap generation, hreflang tags, or custom translation prompts) see the official docs:
- https://sitelocaleai.com/docs/astro-integration
- https://sitelocaleai.com/docs/seo-pre-render

---

8. Wrap‑Up & Next Steps

You now have a self‑hosted, framework‑agnostic solution that:
- Translates content on the fly for dynamic visitors.
- Localizes prices with psychological rounding that feels natural to each market.
- Serves pre‑rendered, SEO‑optimized pages for 10 locales, boosting organic traffic.

Because SiteLocaleAI runs on your own LLM API keys, you stay in control of costs and data privacy—perfect for enterprises and indie developers alike.

---

Ready to supercharge your multilingual Astro site?

Try SiteLocaleAI today and watch your global reach grow. Get started for $5 Indie or explore the higher‑tier plans for larger teams.

---