Boost International SEO for Gatsby with Pre‑Rendered Translations

Google loves fully rendered HTML. When a site serves language on the fly via JavaScript, crawlers may miss the content, hurting international rankings. SiteLocaleAI solves this by letting you pre‑render every language version at build time while keeping the flexibility of a self‑hosted LLM‑powered translation library.

---

1️⃣ Why Pre‑Render for SEO?

• Complete indexable pages – Google sees the final translated markup, not just a placeholder.
• Faster first paint – Users get the right language instantly, improving Core Web Vitals.
• No extra runtime cost – Translation happens once during the build, not on every request.

Combined with SiteLocaleAI’s price‑localization and psychological rounding, you get a truly global experience that ranks.

---

2️⃣ Install the SiteLocaleAI JS Library

npm i sitelocaleai

The library is framework‑agnostic; it works in Gatsby, Next.js, React, Vue, or even plain HTML. For Gatsby we usually add the initialization in gatsby-browser.js:

// gatsby-browser.js
import { initLocaleAI } from "sitelocaleai";

export const onClientEntry = () => {
  initLocaleAI({
    apiKey: process.env.SITELOCALEAI_API_KEY, // your Claude / GPT‑4o‑mini key
    defaultLang: "en",
    supportedLangs: ["en", "es", "fr", "de"],
    priceRounding: true, // enable psychological rounding per currency
  });
};

Tip: Keep the API key out of the repo by using environment variables. The library never stores user data – it only calls your LLM endpoint.

---

3️⃣ Generate Translations with the CLI

SiteLocaleAI ships a CLI that crawls the built static folder, sends each page to your LLM, and writes language‑specific copies. Run it after gatsby build:

npx sitelocaleai pre-render \
  --src ./public \
  --langs en,es,fr,de \
  --out ./public/i18n

• --src – folder containing the original English HTML.
• --langs – comma‑separated list of target locales.
• --out – where the translated folders will be written (e.g., public/i18n/es/index.html).

The CLI respects your price localization settings, automatically converting $19.99 to €17,99 with psychological rounding (e.g., €17.99 → €18). Detailed usage is in the docs: https://sitelocaleai.com/docs/cli.

---

4️⃣ Wire the Translated Paths into Gatsby

Create a simple redirect map in gatsby-node.js so that /es/ serves the pre‑rendered Spanish version:

// gatsby-node.js
const fs = require("fs");
const path = require("path");

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage, deletePage } = actions;
  const locales = ["en", "es", "fr", "de"];

  // Remove the original page (we'll replace it with locale versions)
  deletePage(page);

  locales.forEach((locale) => {
    const localizedPath = locale === "en" ? page.path : `/${locale}${page.path}`;
    createPage({
      ...page,
      path: localizedPath,
      context: { ...page.context, locale },
    });
  });
};

Now each locale has its own clean URL (/es/about/, /fr/contact/, …) that Google can crawl independently.

---

5️⃣ Verify with Google Search Console

1. Submit the sitemap for each locale (/sitemap-en.xml, /sitemap-es.xml, …). 2. Use the URL Inspection tool to confirm Google sees the translated HTML. 3. Monitor International Targeting reports for any hreflang issues.

If you need a quick example of a multilingual sitemap, see the docs: https://sitelocaleai.com/docs/sitemap.

---

6️⃣ Bonus: WordPress Users Can Skip the CLI

If your site also runs a WordPress blog, SiteLocaleAI offers a Node‑free plugin that pulls translations from the same LLM API and writes static HTML files into the public folder. This keeps the workflow consistent across the whole domain.

---

7️⃣ Recap

Step	What you do	Why it matters
Install	npm i sitelocaleai	Adds the translation engine
Init	initLocaleAI in gatsby-browser.js	Sets API key, languages, price rounding
CLI	npx sitelocaleai pre-render	Generates full HTML for each locale
Redirect	onCreatePage in gatsby-node.js	Serves clean locale URLs
Verify	Search Console	Confirms indexing

---

8️⃣ Ready to Go Global?

With just a few commands you turn a single‑language Gatsby site into a multilingual, SEO‑ready powerhouse—all while keeping the translation costs under control because you use your own LLM keys.

Try SiteLocaleAI today and watch your international traffic soar! 🚀

---

Further reading:
- SiteLocaleAI Docs – Getting Started
- SiteLocaleAI Docs – CLI Reference