Localize page settings

Localize your page's name, SEO details, Open Graph settings, and custom code.

In addition to localizing content in the CMS panel and on the Designer canvas, you can also localize your page's name, slug (i.e., URL), page-level SEO settings, and Open Graph settings. By default, each page on your site inherits its settings from the primary locale, but you can edit these page settings independently on any secondary locale:

• Page name — the name that appears in the Designer's Pages panel
• Page slug — the URL path for the page in this locale
• SEO title and description — the page-level metadata for search engines
• Open Graph title, description, and image — the metadata used when the page is shared on social media

How to localize page-level settings

To localize page settings for a secondary locale:

1. Click the Locale view dropdown in the top bar
2. Choose your desired locale
3. Open the Pages panel
4. Hover over the page whose settings you want to edit
5. Click the settings cog icon
6. Make your edits, which apply to just this locale

To translate a field using AI, hover over the field and click the globe icon. Webflow will automatically translate the content from your primary locale into the current locale's language. AI translation is available on page name, SEO title, SEO description, and Open Graph fields. It is not available on the page slug.

Show primary page names in secondary locales

When you translate your page names, the translated names appear in the Pages panel while working in a secondary locale. If you manage many pages across multiple locales, this can make it harder to identify pages quickly.

To show primary locale page names while working in a secondary locale:

1. Open Settings > Interface in Webflow
2. Under Pages, turn on Show primary page names in secondary locales

How to localize custom code

Similar to other design elements (i.e., layout of elements and components), custom code in secondary locales is inherited from the primary locale. You cannot add or remove custom code while in a secondary locale.

If you want to create custom code that only affects a specific locale, using the HTML lang attribute as a selector to target the locale is a good approach, like so:

<script>
// Get the lang attribute from the HTML element
const htmlLang = document.documentElement.lang;

// Check the lang attribute and run a script accordingly
if (htmlLang === 'en') {
  console.log('This page is in English. You can run English-specific code here.');
  // Add your English-specific code here
} else if (htmlLang === 'fr') {
  console.log('This page is in French. You can run French-specific code here.');
  // Add your French-specific code here
} else {
  console.log('This page is in a language other than English or French.');
  // Add code for other languages here
}
</script>
  

Or, for dynamic CSS:

<script>
// Get the lang attribute from the HTML element
const htmlLang = document.documentElement.lang;

// Check the lang attribute and run a script accordingly
if (htmlLang === 'en') {
  console.log('This page is in English. You can run English-specific code here.');
  // Add your English-specific code here
} else if (htmlLang === 'fr') {
  console.log('This page is in French. You can run French-specific code here.');
  // Add your French-specific code here
} else {
  console.log('This page is in a language other than English or French.');
  // Add code for other languages here
}
</script>