International SEO for Astro Sites with SiteLocaleAI

Published on SiteLocaleAI Blog

---

Introduction

Astro’s static‑site generation gives you lightning‑fast pages, but reaching a global audience requires more than just speed. You need multilingual content, price localization, and search‑engine‑friendly rendering for each locale. SiteLocaleAI solves all three with a single, framework‑agnostic JavaScript library that you host yourself, using any LLM API you prefer (Claude, GPT‑4o‑mini, etc.).

In this guide we’ll take an Astro project and make it SEO‑ready for 10 locales (en, es, fr, de, it, pt, ja, zh, ru, and ar). You’ll learn how to:
1. Install and configure SiteLocaleAI.
2. Localize prices with psychological rounding.
3. Pre‑render translated pages for crawlers using the SiteLocaleAI CLI.
4. Deploy the final build without a Node.js runtime on the server.

Tip: All code snippets assume you have an Astro project set up (npm init astro).

---

1. Install the SiteLocaleAI JS Library

SiteLocaleAI is a tiny drop‑in script that works with any front‑end framework—or none at all. Add it to your project via npm:

npm i @sitelocaleai/js

Then create a configuration file (sitelocale.config.js) at the project root:

// sitelocale.config.js
module.exports = {
  // Your LLM API key (keep it secret – use env vars in production)
  apiKey: process.env.SITELOCALEAI_API_KEY,
  // List of target locales
  locales: [
    'en', 'es', 'fr', 'de', 'it',
    'pt', 'ja', 'zh', 'ru', 'ar'
  ],
  // Price rounding rules per currency
  priceRounding: {
    USD: { step: 0.99 },
    EUR: { step: 0.95 },
    JPY: { step: 100 },
    // Add more as needed
  },
  // Optional: custom translation prompts
  translationPrompt: "Translate the following HTML snippet into {locale} while preserving HTML tags."
};

Security note: Because SiteLocaleAI is self‑hosted, the LLM API key never leaves your server.

---

2. Wrap Your Content with the <LocaleProvider>

In Astro you can place a component anywhere in the markup. Here’s a minimal wrapper that loads the library and injects translations at runtime:

---
import { LocaleProvider } from '@sitelocaleai/js';
---

<LocaleProvider config="/sitelocale.config.js">
  <!-- Your existing page content -->
  <slot />
</LocaleProvider>

All child elements will be scanned for translatable text nodes. The library sends them to the LLM, receives the translation, and swaps the innerHTML in place.

---

3. Localize Prices with Psychological Rounding

SiteLocaleAI can automatically adjust numbers based on the priceRounding map. Use the data-price attribute on any element that displays a price:

<p data-price="49.99" data-currency="USD">$49.99</p>
<p data-price="1999" data-currency="JPY">¥1999</p>

When the locale changes, the library will:
1. Convert the base amount to the target currency (via an optional exchange‑rate API you configure).
2. Apply the rounding step (e.g., $49.99 → $49.99 stays, €1999 → €1999.95 if step is 0.95).
3. Replace the text content.

---

4. Pre‑Render SEO‑Friendly Pages with the CLI

Search engines can’t execute JavaScript reliably for every locale. SiteLocaleAI’s CLI pre‑renders static HTML for each language, letting crawlers index the full content.

First, install the CLI globally (or as a dev dependency):

npm i -g @sitelocaleai/cli

Then add a script to package.json:

{
  "scripts": {
    "build": "astro build",
    "sitelocale:render": "sitelocale-cli render --config ./sitelocale.config.js --out ./dist"
  }
}

Run the full build pipeline:

npm run build && npm run sitelocale:render

The CLI will:
- Crawl the generated HTML files.
- For each locale, request translations from the LLM.
- Write locale‑specific files into dist/en, dist/es, … etc.

Now your static host (Netlify, Vercel, Cloudflare Pages) serves pre‑translated HTML to bots, boosting indexing and rankings.

---

5. WordPress Integration (Optional)

If part have a WordPress front‑end that pulls data from your Astro API, you can skip Node.js on the WordPress side. Install the SiteLocaleAI WordPress plugin, point it at your LLM API key, and the plugin will handle translation of any shortcode output. This keeps the same workflow across platforms.

---

6. Verify SEO Signals

After deployment, use tools like Google Search Console and Screaming Frog to confirm:
- Each locale URL (/en/, /es/, …) returns a lang attribute in the <html> tag.
- Meta titles and descriptions are translated (you can set them dynamically via the library).
- Structured data (price schema) reflects the localized amounts.

You can also test with curl:

curl -I https://example.com/es/
# Should return 200 and Content-Language: es

---

7. Internal Resources

For deeper configuration details, see the official docs:
- SiteLocaleAI Configuration
- CLI Usage Guide

---

8. Wrap Up

By combining Astro’s speed with SiteLocaleAI’s self‑hosted translation, price rounding, and SEO pre‑rendering, you can launch a 10‑locale site that ranks well in every target market—without the overhead of a separate translation service.

Ready to go global? Try SiteLocaleAI today and see how fast you can ship multilingual, price‑aware, SEO‑optimized pages.

---

Happy translating!