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, Open Graph settings, and custom code. 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
-
Custom code — the head and body tag scripts for the page in this locale
How to localize page-level settings
To localize page settings for a secondary locale:
- Click the “Locale view” dropdown in the top bar
- Choose your desired locale
- Open the Pages panel from the left toolbar
- Hover over the page whose settings you want to edit
- Click the “Edit page settings” icon
- 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.
Pro tip
On Collection pages, you can add Collection fields to your SEO settings and Open Graph settings.
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:
- Open Settings > Interface in Webflow
- Under Pages, turn on Show primary page names in secondary locales
Good to know
This is a per-user setting and is off by default. It only affects how page names appear in Webflow's interface — it has no impact on your published site, page slugs, or SEO metadata.
How to localize custom code
You can localize custom code in a page's <head> and <body> tags so each locale runs different scripts — useful for locale-specific tracking pixels, analytics tags, or consent tools.
By default, both fields inherit the custom code from your primary locale. When you edit a field on a secondary locale, it stops inheriting and applies to that locale only.
To localize a page's custom code for a secondary locale:
- Click the “Locale view” dropdown in the top bar
- Choose your secondary locale
- Open the Pages panel from the left toolbar
- Hover over the page whose custom code you want to edit
- Click the “Edit page settings” icon
- Add your code to the Inside <head> tag or Before </body> tag section under Custom code
- Click Save
To reset a field back to your primary locale's code, click the “localized” indicator on the field's label and choose Reset to primary. The field re-syncs with the primary locale and resumes inheriting future changes.
Use the lang attribute as a single-script alternative
If you'd rather manage every locale from one script on your primary locale, use the HTML lang attribute as a selector to run different code per locale:
<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>