Pre‑Render Translations in Gatsby for SEO with SiteLocaleAI

Published on SiteLocaleAI Blog

Author: SiteLocaleAI Team

---

Why Pre‑Render Translations?

Google indexes the HTML that it receives from the server. If your site only translates content client‑side, search bots see the default language and miss the multilingual signals that improve international rankings. Pre‑rendering translated pages at build time solves this problem:

• Full HTML per language – search engines can crawl and rank each version.
• Zero runtime overhead – visitors get static assets, no extra JavaScript latency.
• Consistent SEO metadata – titles, descriptions, and structured data are localized automatically.

SiteLocaleAI makes this workflow painless with a drop‑in JavaScript library, a CLI for static pre‑rendering, and support for any LLM API key you prefer (Claude, GPT‑4o‑mini, etc.).

---

Prerequisites

Item	Version
Node.js	>= 18
Gatsby CLI	5.x
SiteLocaleAI library	npm i @sitelocaleai/core
LLM API key	Claude, GPT‑4o‑mini, or compatible
Git	any recent version

Make sure you have a self‑hosted copy of your Gatsby site (e.g., a GitHub repo) and an LLM API key with enough quota for translation requests.

---

1. Install SiteLocaleAI in Your Gatsby Project

# From the root of your Gatsby project
npm install @sitelocaleai/core

Create a tiny wrapper that loads the library on the client. Because we’ll pre‑render, the wrapper will be executed during the build as well.

// src/utils/siteLocale.js
import { initLocale } from "@sitelocaleai/core";

export const locale = initLocale({
  apiKey: process.env.SITELOCALEAI_API_KEY, // store securely
  defaultLang: "en",
  supportedLangs: ["en", "es", "de", "fr", "ja"],
  // Optional: psychological rounding per currency
  priceLocalization: true,
});

Add the environment variable to your .env.production (never commit it):

SITELOCALEAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxx

---

2. Wrap Your Content with the Locale Provider

Gatsby uses React under the hood, so we can wrap the root element. Create a gatsby-browser.js and gatsby-ssr.js file if they don’t exist.

// gatsby-browser.js & gatsby-ssr.js
import React from "react";
import { LocaleProvider } from "@sitelocaleai/core";
import { locale } from "./src/utils/siteLocale";

export const wrapRootElement = ({ element }) => (
  <LocaleProvider locale={locale}>{element}</LocaleProvider>
);

Now any component can call locale.translate("key") or use the <Trans> component for inline strings.

---

3. Mark Up Translatable Text

// src/pages/index.js
import { Trans } from "@sitelocaleai/core";

export default function Home() {
  return (
    <main>
      <h1><Trans>Welcome to Our Store</Trans></h1>
      <p><Trans>Explore the best products at unbeatable prices.</Trans></p>
      {/* Example price localization */}
      <p>{locale.formatPrice(49.99, "USD")}</p>
    </main>
  );
}

The Trans component extracts the literal text and sends it to your LLM for translation during the pre‑render step.

---

4. Generate Pre‑Rendered Translations with the SiteLocaleAI CLI

SiteLocaleAI ships a CLI that walks through your built pages, calls the LLM for each language, and writes static HTML files.

First, add a script to package.json:

{
  "scripts": {
    "build": "gatsby build",
    "prerender": "sitelocaleai prerender --out-dir public"
  }
}

Run the two‑step build:

npm run build && npm run prerender

The CLI does the following:
1. Reads every HTML file in public/.
2. For each supportedLangs entry, it sends the extracted strings to the LLM.
3. Replaces the original text with the translated version.
4. Writes language‑specific copies, e.g., public/es/index.html, public/de/index.html.

You can verify the output:

ls public | grep "/index.html" -l
# => public/index.html public/es/index.html public/de/index.html ...

---

5. Serve Language‑Specific URLs

A simple gatsby-node.js redirect setup ensures visitors (and bots) are served the correct language based on the URL path.

// gatsby-node.js
exports.onCreatePage = ({ page, actions }) => {
  const { createPage, deletePage } = actions;
  const langPrefix = page.path.match(/^\/(en|es|de|fr|ja)\//);
  if (!langPrefix) {
    // Create language‑specific clones
    const langs = ["en", "es", "de", "fr", "ja"]; 
    langs.forEach((lang) => {
      const newPath = `/${lang}${page.path}`;
      createPage({ ...page, path: newPath, context: { ...page.context, lang } });
    });
    // Remove the original page to avoid duplicate content
    deletePage(page);
  }
};

Now a request to example.com/es/ returns the Spanish pre‑rendered page, fully indexed by Google.

---

6. Verify SEO with Google Search Console

1. Submit a sitemap that includes every language path.
2. Use the URL Inspection tool to confirm Google sees the translated HTML.
3. Check the International Targeting report for language‑specific indexing.

Because each page is static HTML, you’ll see the correct <title>, <meta description>, and Open Graph tags (all localized via locale.translate).

---

7. Optional: WordPress Plugin for Non‑Node Environments

If part of your site lives in WordPress, SiteLocaleAI offers a plugin that runs the same pre‑render logic on the server side without needing Node.js. See the WordPress docs for details.

---

8. Deploy

Deploy the public/ folder to any static host (Netlify, Vercel, AWS S3 + CloudFront, etc.). The language‑specific URLs are already baked in, so no runtime translation is required.

---

9. Recap

Step	What you did
Install	Added @sitelocaleai/core
Wrap	Integrated LocaleProvider
Markup	Used <Trans> and formatPrice
CLI	Ran sitelocaleai prerender
URLs	Generated language‑specific paths
Verify	Checked Google Search Console
Deploy	Uploaded static assets

Your Gatsby site now serves fully indexed, SEO‑optimized translations for every target market, while keeping the performance of a static site.

---

Next Steps

• Experiment with psychological price rounding per currency – SiteLocaleAI automatically adjusts prices to appear more attractive.
• Add structured data (<script type="application/ld+json">) inside <Trans> blocks for localized schema.
• Scale to more languages by updating supportedLangs and re‑running the CLI.

---

Ready to boost your international traffic?

Try SiteLocaleAI on your next project and see how easy it is to create multilingual, SEO‑friendly static sites. https://sitelocaleai.com/docs/get-started