Framework Guide

Deploying SiteLocaleAI on Astro: SEO‑Ready Multilingual Site

Published March 28, 2026

Deploying SiteLocaleAI on Astro: SEO‑Ready Multilingual Site

Introduction

If you’re building a static site with Astro and want to reach a global audience, you need three things:
1. Accurate translations powered by your own LLM API key.
2. Localized pricing that respects cultural rounding rules.
3. SEO‑friendly pre‑rendered pages so search engines can index every locale.

SiteLocaleAI provides a drop‑in JavaScript library that works with any framework, and it can be self‑hosted, meaning you keep full control of your LLM provider (Claude, GPT‑4o‑mini, etc.). This tutorial walks you through a complete setup for 10 locales with full SEO support.

1. Prerequisites

  • Astro 2.0+ project (static‑site generation enabled).
  • Node.js 18+.
  • An LLM API key (e.g., OPENAI_API_KEY).
  • site-locale-ai npm package (public or private registry).
  • Optional: WordPress plugin if you also run a WP blog alongside Astro.

2. Install the SiteLocaleAI library

npm i site-locale-ai

The package ships a single siteLocaleAI.js file that you can import anywhere in your Astro components.

3. Configure your LLM provider

Create a .env file at the project root:

# .env
SITELOCALEAI_LLM=OPENAI
SITELOCALEAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxx
SITELOCALEAI_MODEL=gpt-4o-mini

SiteLocaleAI reads these variables automatically. If you prefer a different provider, just change SITELOCALEAI_LLM and the corresponding API key.

4. Define the locales and price rounding rules

In src/config/locale.js (you can name it whatever you like):

export const 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: "ko", name: "한국어", currency: "KRW" },
  { code: "ar", name: "العربية", currency: "SAR" },
];

export const roundingRules = {
  USD: (n) => Math.round(price * 0.99), // psychological pricing
  EUR: (price) => Math.round(price * 0.95),
  JPY: (price) => Math.round(price),
  CNY: (price) => Math.round(price * 0.98),
  BRL: (price) => Math.round(price * 0.97),
  RUB: (price) => Math.round(price * 0.96),
  KRW: (price) => Math.round(price),
  SAR: (price) => Math.round(price * 0.99),
};

These rules are applied by the library when you call localizePrice.

5. Add the library to your Astro layout

Create a src/components/LocaleProvider.jsx (or .tsx if you use TypeScript):

import { onMount } from "astro";
import { initSiteLocaleAI } from "site-locale-ai";
import { locales } from "../config/locale.js";

export default function LocaleProvider({ children }) {
  onMount(() => {
    initSiteLocaleAI({
      locales,
      defaultLocale: "en",
      apiKey: import.meta.env.SITELOCALEAI_API_KEY,
      model: import.meta.env.SITELOCALEAI_MODEL,
    });
  });

  return children;
}

Wrap your site in src/layouts/BaseLayout.astro:

---
import LocaleProvider from "../components/LocaleProvider.jsx";
---
<LocaleProvider>
  <slot />
</LocaleProvider>

Now every page automatically gets translation utilities.

6. Translating content on the fly

In any component you can use the t helper:

import { t } from "site-locale-ai";

export default function Hero() {
  return (
    <section>
      <h1>{t("Welcome to our store")}</h1>
      <p>{t("Find the best products at unbeatable prices.")}</p>
    </section>
  );
}

The first time a string is requested for a locale, SiteLocaleAI calls the LLM, caches the result, and serves it instantly on subsequent visits.

7. Localizing prices

import { localizePrice } from "site-locale-ai";
import { roundingRules } from "../config/locale.js";

export default function PriceTag({ amount, currency }) {
  const localized = localizePrice(amount, currency, roundingRules);
  return <span>{localized}</span>;
}

localizePrice returns a string like "€9.99" or "¥1,200" with the appropriate rounding applied.

8. SEO pre‑rendering with the CLI

SiteLocaleAI ships a CLI that crawls your built site, generates translated HTML for each locale, and writes static files that search engines can index.

First, add a script to package.json:

{
  "scripts": {
    "build": "astro build",
    "seo": "site-locale-ai-cli --locales en,es,fr,de,ja,zh,pt,ru,ko,ar --output dist/seo"
  }
}

Run the build and then the SEO step:

npm run build
npm run seo

The CLI will:
1. Load the generated dist/ files.
2. For each locale, request translations of the full HTML using your LLM.
3. Replace text nodes, lang attributes, and price values.
4. Write the result to dist/seo/<locale>/.

You can now point your CDN to the dist/seo folder. Search engines will see a separate URL for each locale (e.g., example.com/en/, example.com/es/).

9. Verifying the output

Deploy the dist/seo folder to your hosting provider (Vercel, Netlify, Cloudflare Pages, etc.). Then run a quick crawl:

npm i -g lighthouse
lighthouse https://example.com/es/ --output=json --output-path=es-report.json

Check that the lang attribute is set correctly and that the meta tags (title, description) are translated.

10. Optional: WordPress plugin for hybrid sites

If you also run a WordPress blog, the SiteLocaleAI WordPress plugin lets you use the same LLM keys without any Node.js runtime. Install the plugin, paste your API key, and enable the “SEO pre‑render” option. The plugin will generate static HTML snapshots that you can serve via a CDN, keeping the SEO benefits consistent across platforms.

11. Wrap‑up

You now have a fully localized Astro site with:
- 10 language versions generated on demand.
- Psychologically rounded prices per currency.
- SEO‑ready static pages that search engines can index.
- Complete control over your LLM provider, keeping data private and costs predictable.

For deeper configuration options, see the official docs:
- https://sitelocaleai.com/docs/astro-integration
- https://sitelocaleai.com/docs/seo-cli

Ready to go global?

Try SiteLocaleAI on your next project and experience multilingual SEO without sacrificing performance or privacy. Start now at https://sitelocaleai.com.

Back to blog