Boost Astro Site SEO with SiteLocaleAI: A 10‑Locale Guide

International traffic is a goldmine for static sites, but getting search engines to index each language version can be tricky. SiteLocaleAI solves this with a drop‑in JavaScript library that runs on your own LLM API keys, plus a CLI that pre‑renders translated pages for SEO crawlers. In this guide we’ll turn a vanilla Astro project into a fully localized, SEO‑friendly site for 10 locales.

---

1. Prerequisites

• Astro 4.x (or newer) installed globally.
• An LLM API key (Claude, GPT‑4o‑mini, etc.) – SiteLocaleAI never stores it.
• Node 18+ for the CLI.
• Optional: a WordPress site if you want to compare the plugin approach.

---

2. Install SiteLocaleAI

npm i @sitelocaleai/js

The package is framework‑agnostic, so you can import it directly in any component.

---

3. Define Your Locales

Create a locales.json file at the project root:

{
  "en": { "name": "English", "currency": "USD" },
  "es": { "name": "Español", "currency": "EUR" },
  "fr": { "name": "Français", "currency": "EUR" },
  "de": { "name": "Deutsch", "currency": "EUR" },
  "it": { "name": "Italiano", "currency": "EUR" },
  "pt": { "name": "Português", "currency": "BRL" },
  "ja": { "name": "日本語", "currency": "JPY" },
  "zh": { "name": "中文", "currency": "CNY" },
  "ru": { "name": "Русский", "currency": "RUB" },
  "ar": { "name": "العربية", "currency": "SAR" }
}

SiteLocaleAI will read this file to know which languages to translate and how to round prices psychologically per currency.

---

4. Add the JS Library to Astro

Create a client‑only component that loads the library after the page is hydrated. In src/components/LocaleSwitcher.astro:

---
import { onMount } from 'astro/client';
import { initLocaleAI } from '@sitelocaleai/js';

const apiKey = import.meta.env.SITELOCALEAI_API_KEY; // keep it secret on the server
---
<div id="locale-switcher"></div>

{/**
  The library attaches itself to the DOM element with id "locale-switcher".
  It automatically detects the visitor's language, translates text nodes,
  and rewrites price elements using the rounding rules from locales.json.
*/}
<script type="module">
  onMount(() => {
    initLocaleAI({
      apiKey,
      localesPath: '/locales.json',
      defaultLocale: 'en',
      // Optional: custom price selector
      priceSelector: '.price',
    });
  });
</script>

Add the component to your layout (e.g., src/layouts/BaseLayout.astro):

---
import LocaleSwitcher from '../components/LocaleSwitcher.astro';
---
<html lang="en">
  <head>
    <!-- meta tags here -->
  </head>
  <body>
    <LocaleSwitcher />
    <slot />
  </body>
</html>

Now every page rendered by Astro will be client‑side translated for visitors.

---

5. SEO Pre‑Rendering with the CLI

Search engines don’t execute JavaScript reliably, so we need static HTML for each locale. SiteLocaleAI ships a CLI that crawls your built site, calls the LLM for translation, and writes the results to dist/<locale>/.

5.1 Install the CLI globally (optional)

npm i -g @sitelocaleai/cli

5.2 Build the Astro site

npm run build   # produces ./dist with the default English version

5.3 Run the pre‑render command

sitelocaleai prerender \
  --input ./dist \
  --output ./dist \
  --locales ./locales.json \
  --api-key $SITELOCALEAI_API_KEY \
  --price-rounding true

The CLI will:
1. Load each HTML file.
2. Send visible text (excluding code blocks) to the LLM for translation.
3. Apply psychological rounding to every element matching .price.
4. Write a copy of the page under /es/, /fr/, … etc.

5.4 Verify the output

ls dist | grep -E 'en|es|fr|de|it|pt|ja|zh|ru|ar'

You should see a folder for each locale containing fully translated HTML ready for crawlers.

---

6. Configure Astro’s Sitemap

Astro can generate a sitemap automatically. Update astro.config.mjs to include all locales:

import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  integrations: [sitemap()],
  // Custom function to add locale prefixes
  build: {
    pageUrlFilter: ({ url }) => {
      // Keep the original URL for the default locale
      if (url.pathname === '/') return true;
      // Include locale‑specific URLs
      return /^\/(en|es|fr|de|it|pt|ja|zh|ru|ar)\//.test(url.pathname);
    },
  },
});

Now search engines receive a sitemap that lists every language version, improving index coverage.

---

7. WordPress Plugin (Optional)

If you also run a WordPress blog, SiteLocaleAI provides a Node‑free plugin that mirrors the same translation logic. Install it from the WordPress admin, paste your API key, and select the same locales.json. The plugin will generate localized slugs and price rounding automatically, keeping your SEO consistent across platforms.

---

8. Testing & Monitoring

• Google Search Console → URL Inspection for a translated URL (e.g., https://example.com/es/).
• Use Lighthouse to verify that the language attribute (lang="es") is present.
• Check price formatting with a tool like CurrencyFormatter to ensure rounding matches psychological expectations.

---

9. Internal Resources

For deeper configuration options, see the official docs: https://sitelocaleai.com/docs.

---

10. Wrap‑Up & CTA

You now have a fully localized Astro site that serves visitors in ten languages, with SEO‑friendly static pages that search engines can index instantly. The combination of SiteLocaleAI’s client‑side translation and its pre‑render CLI gives you the speed of a static site and the reach of a multilingual powerhouse.

Ready to go global? Try SiteLocaleAI today and watch your international traffic soar. 🚀