Seo Guide

Boost International SEO for Astro Sites with SiteLocaleAI

Published September 18, 2026

Boost International SEO for Astro Sites with SiteLocaleAI

Published on SiteLocaleAI Blog

Introduction

Astro’s static‑site generator gives you lightning‑fast pages, but reaching a global audience requires more than just translation. You need locale‑aware URLs, price adjustments, and, most importantly, SEO‑friendly pre‑rendered pages that search engines can crawl. SiteLocaleAI’s self‑hosted JavaScript library solves all of these problems in one drop‑in package.

In this guide we’ll walk through a complete workflow for an Astro site that supports 10 locales (e.g., en-US, en-GB, fr-FR, de-DE, es-ES, it-IT, pt-BR, ja-JP, zh-CN, ru-RU). By the end you’ll have:

A multilingual front‑end powered by your own LLM API keys.
Prices automatically rounded to the psychological sweet‑spot for each currency.
SEO‑pre‑rendered HTML for every locale using SiteLocaleAI’s CLI.
A clean, framework‑agnostic implementation that works with any Astro component.

Prerequisites

Node.js ≥ 18 (for Astro dev server and CLI)
An Astro project (npm create astro@latest my‑site)
Access to an LLM API (Claude, GPT‑4o‑mini, etc.) – you’ll provide the key to SiteLocaleAI.
Optional: a WordPress site if you want to use the SiteLocaleAI WordPress plugin (no Node.js required).

1. Install SiteLocaleAI

SiteLocaleAI is distributed as an npm package that ships a tiny runtime script. Run:

npm i @sitelocaleai/sdk

The package adds a single JS file (sitelocaleai.js) that you can import anywhere in your Astro components.

2. Configure Your LLM API Key

Create a .env file at the root of your Astro project:

SITELOCALEAI_LLM_ENDPOINT=https://api.openai.com/v1/chat/completions
SITELOCALEAI_API_KEY=sk-XXXXXXXXXXXXXXXXXXXXXXXX

Security tip: Keep the .env file out of version control (gitignore). The key is used only in the browser when you enable the client‑side translation mode; otherwise the CLI performs server‑side calls.

3. Add the Drop‑in JS Library

In your src/layouts/BaseLayout.astro (or any layout component) insert the script once:

---
import { initLocaleAI } from '@sitelocaleai/sdk';
---
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Astro Site</title>
    <script type="module">
      // Initialize the library with your LLM endpoint and key
      initLocaleAI({
        endpoint: import.meta.env.SITELOCALEAI_LLM_ENDPOINT,
        apiKey: import.meta.env.SITELOCALEAI_API_KEY,
        defaultLocale: 'en-US',
        supportedLocales: ['en-US','en-GB','fr-FR','de-DE','es-ES','it-IT','pt-BR','ja-JP','zh-CN','ru-RU'],
        priceRounding: true,
      });
    </script>
  </head>
  <body>
    <slot />
  </body>
</html>

The initLocaleAI call registers a global window.localeAI object that you can use to translate any DOM element on the fly.

4. Translate Content on the Fly

In a component, wrap translatable text with a small helper:

---
import { translate } from '@sitelocaleai/sdk';
---
<h1>{translate('Welcome to our store')}</h1>
<p>{translate('Discover the best products for your needs.')}</p>

translate sends the source string to the configured LLM and returns the localized version for the current locale. The library caches results in localStorage to avoid repeated API calls.

5. Price Localization with Psychological Rounding

SiteLocaleAI includes a utility that rounds prices to the nearest “psychological” value (e.g., $9.99 → $9.95, €19.99 → €19.90). Use it wherever you display a price:

import { localizePrice } from '@sitelocaleai/sdk';

// Example product data
const product = {
  priceUSD: 19.99,
  priceEUR: 17.49,
};

// Render price for the active locale
const price = localizePrice(product.priceUSD, 'USD', locale);

<p>{price}</p>

The function automatically selects the correct currency based on the locale and applies rounding rules that increase conversion rates.

6. SEO Pre‑render CLI for Static Locales

Search engines can’t execute JavaScript to discover translations. SiteLocaleAI’s CLI generates pre‑rendered HTML for each locale, which you can then deploy as static files.

First, add the CLI as a dev dependency:

npm i -D @sitelocaleai/cli

Create a config file sitelocaleai.config.js:

module.exports = {
  locales: ['en-US','en-GB','fr-FR','de-DE','es-ES','it-IT','pt-BR','ja-JP','zh-CN','ru-RU'],
  outputDir: 'dist-localized',
  llm: {
    endpoint: process.env.SITELOCALEAI_LLM_ENDPOINT,
    apiKey: process.env.SITELOCALEAI_API_KEY,
  },
};

Run the pre‑render step:

npx sitelocaleai prerender

The CLI crawls your built site (dist/), translates every page, applies price rounding, and writes locale‑specific HTML files under dist-localized/. Deploy that folder to your static host (Netlify, Vercel, Cloudflare Pages, etc.) and you’ll have SEO‑ready URLs like:

https://example.com/en-us/
https://example.com/fr-fr/

7. WordPress Plugin (Optional)

If you also run a WordPress shop, SiteLocaleAI offers a no‑Node.js plugin that pulls the same LLM keys from your .env file and injects the translation script into the <head>. Install it from the WordPress admin dashboard → Plugins → Add New → “SiteLocaleAI”. No extra build step is required.

8. Testing & Validation

Local testing – Run npm run dev and append ?locale=fr-FR to the URL. Verify text and prices change.
SEO verification – Use curl -L https://example.com/fr-fr/ to fetch the pre‑rendered HTML and check that the <title> and <meta description> are in French.
Performance – Because the translation happens at build time, the final pages are pure HTML, keeping Lighthouse scores high.

9. Best Practices

Cache LLM responses: Store translations in a JSON file (translations.json) and commit it to your repo for repeatable builds.
Keep source strings short: Short, context‑rich strings improve translation quality.
Use locale‑aware routing: Astro’s createPages API can generate a folder per locale automatically.
Monitor API usage: Set up alerts for LLM token consumption to avoid unexpected costs.

Conclusion

By combining Astro’s static generation with SiteLocaleAI’s self‑hosted JS library and SEO pre‑render CLI, you can launch a 10‑locale, price‑localized, search‑engine‑friendly website in a matter of hours. The framework‑agnostic approach means you’ll get the same benefits on React, Vue, Shopify, or any other platform.

Ready to boost your global traffic? Try SiteLocaleAI today – sign up for the $5 Indie plan and start translating your Astro site in minutes!

For more details, see the full documentation:
- https://sitelocaleai.com/docs
- https://sitelocaleai.com/docs/astro

Back to blog