Building a Multi-Language Webflow Site: hreflang and Beyond

Why Multilingual Matters for Global Growth

If your audience spans multiple countries or language groups, a single-language site leaves traffic on the table. Research from CSA shows that 76% of online shoppers prefer buying in their native language, and 40% will never purchase from a site in a foreign language. For B2B SaaS, localized landing pages consistently outperform English-only equivalents in non-English markets. Building a multilingual Webflow site correctly — with proper hreflang tags, locale-based URL structures, and translated content — is a high-ROI investment for international growth.

Webflow's Native Localization Feature

Webflow launched native localization support that lets you add multiple locales to a single project. Each locale gets a subfolder (e.g., /fr/, /de/, /es/) and you can translate static text, CMS content, and even swap images per locale. Webflow automatically generates hreflang tags in the page head for each locale, which tells Google which version to serve to users in different regions. The localization panel in the Designer lets you switch between locales and edit content visually — no JSON files or translation plugins needed.

Understanding hreflang Tags

The hreflang attribute is an HTML tag that tells search engines which language and regional variant a page targets. It goes in the of every page and points to all language versions, including itself. The format is a link element with rel='alternate', the hreflang value (a language code like 'en' or a language-region code like 'pt-BR'), and the href to the alternate version. Every page must include a self-referencing hreflang and an x-default for fallback. When implemented correctly, Google serves the right version to the right audience, preventing duplicate content issues across locales.

<!-- hreflang tags for a page with English, French, and German versions -->
<link rel="alternate" hreflang="en" href="https://livv.studio/services/" />
<link rel="alternate" hreflang="fr" href="https://livv.studio/fr/services/" />
<link rel="alternate" hreflang="de" href="https://livv.studio/de/services/" />
<link rel="alternate" hreflang="x-default" href="https://livv.studio/services/" />

<!-- x-default tells search engines which page to show when no locale matches -->

URL Structure: Subfolders vs. Subdomains vs. ccTLDs

Subfolders are the recommended approach for most Webflow multilingual sites. They consolidate all link equity under one domain, are natively supported by Webflow's localization feature, and are the simplest to manage. Subdomains and ccTLDs are viable for large enterprises with dedicated teams per market, but they split domain authority and increase maintenance burden.

Translation Workflow: Manual vs. API-Driven

For a site with under 50 pages and 3 locales, manual translation in Webflow's localization panel is efficient. For larger sites or frequent content updates, an API-driven workflow saves time. You can export page content via the Webflow Data API, send it to a translation service (DeepL API, Google Cloud Translation, or a professional translation management system like Crowdin or Phrase), receive the translated content, and push it back to Webflow via the API, targeting the correct locale.

// Automated translation pipeline with DeepL API
const DEEPL_API_KEY = process.env.DEEPL_API_KEY;

async function translateText(text, targetLang) {
  const res = await fetch("https://api-free.deepl.com/v2/translate", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams({
      auth_key: DEEPL_API_KEY,
      text: text,
      target_lang: targetLang,        // "FR", "DE", "ES", etc.
      tag_handling: "html",            // preserve HTML formatting
    }),
  });

  const data = await res.json();
  return data.translations[0].text;
}

// Translate a batch of CMS items
async function translateCmsItems(items, targetLang) {
  return Promise.all(
    items.map(async (item) => ({
      ...item,
      fieldData: {
        ...item.fieldData,
        name: await translateText(item.fieldData.name, targetLang),
        "post-body": await translateText(
          item.fieldData["post-body"],
          targetLang
        ),
        "meta-description": await translateText(
          item.fieldData["meta-description"],
          targetLang
        ),
      },
    }))
  );
}

SEO Checklist for Multilingual Webflow Sites

1. Verify hreflang tags on every page — use the hreflang Tags Testing Tool or Screaming Frog
2. Include an x-default hreflang pointing to your primary language version
3. Translate meta titles and descriptions — do not duplicate English meta across locales
4. Translate URL slugs where possible (e.g., /fr/services/ → /fr/nos-services/)
5. Submit each locale's sitemap to Google Search Console
6. Set geographic targeting per locale in Search Console if targeting specific countries
7. Avoid auto-redirecting users by IP — let Google serve the right version and offer a language switcher
8. Ensure canonical tags on localized pages point to themselves, not the English version
9. Translate image alt text and Open Graph tags per locale
10. Test with Google's URL Inspection tool for each locale to confirm correct indexing

Common Mistakes to Avoid

The most damaging mistake is setting canonical tags on localized pages to point to the English version — this tells Google to ignore the translated pages entirely. Another common error is incomplete hreflang implementation: if page A links to page B in hreflang but page B does not link back to page A, Google may disregard both tags. Always ensure hreflang annotations are reciprocal. Finally, avoid machine-translating content without human review. Low-quality translations hurt user trust and can increase bounce rates, which indirectly harms rankings.