Seo Guide

Boost International SEO for Astro Sites with SiteLocaleAI

Published August 1, 2026

Boost International SEO for Astro Sites with SiteLocaleAI

Boost International SEO for Astro Sites with SiteLocaleAI

Published on SiteLocaleAI Blog

International traffic is a goldmine for any business, but static site generators like Astro need a little extra love to serve fully translated, SEO‑ready pages. In this guide we’ll walk through a complete workflow for an Astro site that supports 10 locales, localizes prices with psychological rounding, and uses SiteLocaleAI’s CLI to pre‑render SEO‑friendly HTML for search engines.

1️⃣ Why Astro + SiteLocaleAI?

  • Framework‑agnostic: SiteLocaleAI ships as a drop‑in JavaScript library that works with any framework, including Astro’s component‑driven architecture.
  • Self‑hosted: You keep control of your LLM API keys (Claude, GPT‑4o‑mini, etc.), so there are no hidden data‑privacy concerns.
  • Price localization: Automatic rounding to psychologically appealing numbers per currency (e.g., $9.99 → $9.95).
  • SEO pre‑rendering: The CLI generates static HTML for each locale, ensuring Google and Bing index the translated content.

2️⃣ Project Setup

# 1️⃣ Create a fresh Astro project (if you don’t have one)
npm create astro@latest my‑astro‑site
cd my‑astro‑site

# 2️⃣ Install SiteLocaleAI (the npm package is just a thin wrapper; the heavy lifting happens in the browser)
npm i @sitelocaleai/js

# 3️⃣ Add the CLI as a dev dependency for pre‑rendering
npm i -D @sitelocaleai/cli

Tip: The CLI works on any OS and does not require Node.js at runtime, making it perfect for CI pipelines.

3️⃣ Define Your Locales

Create a JSON file src/locales.json that lists the ten target locales and the associated currency.

{
  "locales": [
    {"code": "en-US", "language": "English", "currency": "USD"},
    {"code": "es-ES", "language": "Español", "currency": "EUR"},
    {"code": "fr-FR", "language": "Français", "currency": "EUR"},
    {"code": "de-DE", "language": "Deutsch", "currency": "EUR"},
    {"code": "it-IT", "language": "Italiano", "currency": "EUR"},
    {"code": "pt-BR", "language": "Português", "currency": "BRL"},
    {"code": "ja-JP", "language": "日本語", "currency": "JPY"},
    {"code": "zh-CN", "language": "中文", "currency": "CNY"},
    {"code": "ru-RU", "language": "Русский", "currency": "RUB"},
    {"code": "ko-KR", "language": "한국어", "currency": "KRW"}
  ]
}

4️⃣ Add the SiteLocaleAI Script

In src/layouts/BaseLayout.astro (or any top‑level layout) inject the library and initialize it with your LLM key.

---
import locales from '../locales.json';
---
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{Astro.props.title}</title>
    <!-- SEO meta tags will be filled by the pre‑render CLI -->
    <script type="module">
      import { SiteLocaleAI } from '@sitelocaleai/js';
      const ai = new SiteLocaleAI({
        apiKey: import.meta.env.SITELOCALEAI_API_KEY, // set in .env
        locales: locales.locales.map(l => l.code),
        defaultLocale: 'en-US',
        priceRounding: true,
      });
      // Attach to window for debugging
      window.siteLocaleAI = ai;
    </script>
  </head>
  <body>
    <slot />
  </body>
</html>

Security note: Store SITELOCALEAI_API_KEY in a server‑only environment variable and expose it to the client only via a short‑lived token if needed. The library itself never stores the key.

5️⃣ Translating Content on the Fly

Wrap any text you want translated with the translate helper. Create src/utils/translate.js:

import { siteLocaleAI } from '/global.js'; // exported from the script above

export async function translate(text, locale) {
  if (locale === 'en-US') return text; // default language
  const result = await siteLocaleAI.translate({
    source: text,
    targetLang: locale.split('-')[0],
  });
  return result.translatedText;
}

Use it inside a component:

---
import { translate } from '../utils/translate.js';
import { onMount } from 'solid-js';

let title = 'Welcome to Our Store';
let locale = 'es-ES'; // will be swapped by the router

onMount(async () => {
  title = await translate(title, locale);
});
---
<h1>{title}</h1>

6️⃣ Price Localization with Psychological Rounding

SiteLocaleAI automatically rounds prices to the most persuasive values. Call the localizePrice helper:

export function localizePrice(amount, currency) {
  // The library contacts the LLM to apply rounding rules per locale
  return siteLocaleAI.formatPrice({ amount, currency });
}

Example in a product card component:

---
import { localizePrice } from '../utils/price.js';

const priceUSD = 9.99;
const currency = 'USD';
---
<p>Price: {localizePrice(priceUSD, currency)}</p>

The output for en-US will be $9.95, while ja-JP will become ¥1,080 (rounded to the nearest 10 yen).

7️⃣ SEO Pre‑Rendering with the CLI

The CLI crawls your Astro routes, translates every page into each locale, and writes static HTML files under dist/.

# Add a script to package.json
# "scripts": { "build": "astro build", "seo": "sitelocaleai pre-render --locales src/locales.json" }

# Run the full pipeline
npm run build && npm run seo

The generated folder will look like:

/dist
 ├─ en-US
 │   └─ index.html
 ├─ es-ES
 │   └─ index.html
 ├─ fr-FR
 │   └─ index.html
 ...

Search engines now index a fully translated HTML page for each locale, dramatically improving international rankings.

8️⃣ WordPress Plugin (Optional)

If you also run a WordPress blog alongside your Astro site, SiteLocaleAI offers a Node‑free plugin that injects the same translation script. Install it from the WordPress admin, paste your API key, and you’re done. This keeps branding consistent across all digital properties.

9️⃣ Testing & Validation

  1. Crawl the site with a tool like Screaming Frog to verify that each locale returns a 200 and contains the correct <html lang> attribute.
  2. Check structured data – the CLI preserves JSON‑LD tags, so localized product schema appears correctly.
  3. Measure performance – because the translations are pre‑rendered, the page load time remains under 1 s on mobile.

🔟 Launch & Monitor

Deploy the dist/ folder to your static host (Netlify, Vercel, Cloudflare Pages). Use Google Search Console’s International Targeting report to confirm that Google recognizes the language and regional tags (hreflang).

📣 Ready to go global?

SiteLocaleAI gives you the power of LLM‑driven translation, price psychology, and SEO‑ready static pages—all while keeping your data private. Try it today and watch your Astro site climb the rankings in ten new markets.

Internal resources:
- Detailed Astro integration guide: https://sitelocaleai.com/docs/astro-setup
- SEO pre‑rendering CLI reference: https://sitelocaleai.com/docs/seo-pre-render

Happy translating!

Back to blog