Seo Guide

Boost International SEO with Pre‑Rendered Gatsby Translations

Published May 27, 2026

Boost International SEO with Pre‑Rendered Gatsby Translations

Boost International SEO with Pre‑Rendered Gatsby Translations

International traffic is a goldmine for any e‑commerce or content site, but Google will only rank what it can crawl. With a static Gatsby site, you can pre‑render every language version at build time, giving search engines fully indexed, SEO‑friendly pages. This guide shows how to achieve that with SiteLocaleAI, a self‑hosted JavaScript library that leverages your own LLM API keys for translation, price localization, and SEO pre‑rendering.

1. Why Pre‑Render Translations?

  • Instant indexing – Google crawls the static HTML, not a client‑side translation script.
  • Performance – No extra JavaScript latency for visitors; the page is ready to serve.
  • Control – You decide the exact wording, tone, and price rounding per currency.

SiteLocaleAI’s CLI can generate the translated HTML files before Gatsby’s build step, turning each locale into a separate static page.

2. Prerequisites

Requirement Details
Gatsby v5+ (static site generation)
Node.js 18+
LLM API key Claude, GPT‑4o‑mini, or any OpenAI‑compatible endpoint
SiteLocaleAI npm i @sitelocaleai/core

Tip: Keep your API keys in environment variables (.env.production) – never commit them.

3. Install the Library

npm install @sitelocaleai/core

Create a tiny wrapper that injects the translation script into every page. Because the library is framework‑agnostic, you can place it in gatsby-browser.js:

// gatsby-browser.js
import { initSiteLocale } from '@sitelocaleai/core';

export const onClientEntry = () => {
  initSiteLocale({
    apiKey: process.env.SITELOCALEAI_API_KEY,
    defaultLang: 'en',
    supportedLangs: ['en', 'es', 'fr', 'de', 'ja'],
    priceRounding: true,
  });
};

The library will automatically replace price elements with localized, psychologically rounded values (e.g., $9.99 → €8.99).

4. Set Up the SEO CLI

SiteLocaleAI ships a CLI that fetches translations from your LLM and writes static HTML files for each locale. Install it globally:

npm i -g @sitelocaleai/cli

Create a config file sitelocale.config.js at the project root:

// sitelocale.config.js
module.exports = {
  sourceDir: 'public',          // Gatsby output folder
  locales: ['en', 'es', 'fr', 'de', 'ja'],
  apiKey: process.env.SITELOCALEAI_API_KEY,
  priceRounding: true,
  // Optional: custom prompt to guide the LLM
  translationPrompt: `Translate the page content into {{lang}}. Keep SEO meta tags intact and use local currency formatting.`,
};

Run the CLI after Gatsby builds the site:

npm run build   # Gatsby build
niteocaleai prerender

The command reads every HTML file in public/, sends the content to your LLM, and writes locale‑specific files like public/es/index.html and public/fr/index.html.

5. Hook the CLI into the Build Pipeline

Add a script to package.json so the process is seamless:

{
  "scripts": {
    "build": "gatsby build",
    "postbuild": "sitelocaleai prerender",
    "start": "gatsby develop"
  }
}

Now npm run build will automatically generate the multilingual static files.

6. SEO Metadata per Locale

Because the CLI works on the raw HTML, you can embed locale‑specific <title> and <meta description> tags in your Gatsby components using react-helmet (or gatsby-plugin-react-helmet). Example:

import { Helmet } from 'react-helmet';

const SEO = ({ title, description, lang }) => (
  <Helmet htmlAttributes={{ lang }}>
    <title>{title}</title>
    <meta name="description" content={description} />
    {/* Open Graph tags */}
    <meta property="og:locale" content={lang} />
  </Helmet>
);

export default SEO;

When the CLI translates the page, it will also translate the content of those tags, ensuring Google sees the correct language version.

7. Verify Google Indexing

  1. Fetch as Google – Use Search Console’s URL Inspection tool on a translated URL (/es/).
  2. Sitemap – Generate a multilingual sitemap (e.g., sitemap.xml with <xhtml:link rel="alternate" hreflang="es" href="https://example.com/es/"/>).
  3. Robots.txt – Ensure the locale folders are not blocked.

A quick test with curl -I https://example.com/fr/ should return a 200 and contain the translated <title>.

8. Price Localization in Action

Add a data-price attribute to any price element:

<span class="price" data-price="19.99">$19.99</span>

SiteLocaleAI will replace it with the appropriate currency and rounding:

<span class="price" data-price="19.99">€17.99</span>

The rounding logic follows psychological pricing (e.g., ending in .99 or .95) per locale, boosting conversion rates.

9. Optional: WordPress Plugin for Hybrid Sites

If part of your content lives in WordPress, you can still use SiteLocaleAI without Node.js. The official WordPress plugin pulls the same LLM API key and performs server‑side translation, then writes static HTML files that Gatsby can import via gatsby-source-wordpress.

For full details, see the docs: https://sitelocaleai.com/docs/wordpress-plugin

10. Recap & Next Steps

Step Command
Install library npm i @sitelocaleai/core
Install CLI npm i -g @sitelocaleai/cli
Build & pre‑render npm run build
Verify indexing Search Console URL Inspection

You now have a fast, SEO‑friendly multilingual Gatsby site that serves localized prices and fully indexed pages.

Ready to go global?

Try SiteLocaleAI on your next project and see how easy it is to turn a static site into an international revenue engine. Get started for free or explore the full documentation at https://sitelocaleai.com/docs.

Back to blog