Get Started with Localization
It includes various tools and capabilities, such as localized text and images, adaptive designs, and content specific to each locale. The built-in AI Translation in Framer is specifically optimized for website translation, ensuring that links, images, CMS variables, and other elements are maintained across languages.
To streamline the localization process, Framer provides a Localization Table, which offers an optimized workflow for managing translations. Additionally, you can use the Canvas feature to iterate and make adjustments within the context of your website.
FAQ
How many languages are available in Framer?
There are over 500 locales available for use in Framer.
How do we set up the URL structure?
Locales are automatically served at yourwebsite.com/[locale-slug]/example-page
. For example framer.com/nl/meetups
. The slug can be customized in the Locale settings.
How do I make a draft of my Locale while I work on it?
Draft Locales are actively being worked on. Until then, we recommend using the Staging & Deploy feature to let you test on staging and deploy to your production URL when ready.
How do we ensure URLs point to the right page within Framer?
All links within your website will retain the active Locale. Such as viewing your home page in the German Locale and clicking a link to your About page, will automatically route to the German version of the About page.
What if I do not translate everything? What if pieces are missing?
If any piece of content has not been translated, the fallback language will be shown for that specific piece of content. This also scales to entire pages. This does not affect the active locale or URL.
Can you translate whole slugs?
Currently, you cannot translate whole slugs in Framer. However, this is a feature we're considering for a future release.
Do you set up URLs for some sites hosted outside of Framer but need the right URL?
At the moment, Framer does not support localized links for sites hosted outside of Framer.
Can we add custom links to the localization toggle?
The Locale Picker component in Framer automatically only supports the locales within Framer. We'd love to hear more about your use case for adding custom links.
You mentioned we use Href lang tags, but the sitemap doesn’t show them. Where are they?
Yes, this is expected. You can see the hreflang tags in the HTML of every page.
What is the performance impact of adding Translations?
Web page Localizations are loaded asynchronously, which means they don't block the rendering of the rest of your page. This is a good thing for performance, as it means users can start interacting with your page even if all Localizations haven't loaded yet.
For smart components, Localizations are loaded synchronously, and all the translated strings are loaded per component. This could potentially be an issue if you have very large very text-heavy components, but this is not a common scenario.
How does Localization affect SEO?
The Localized pages in Framer are deeply optimized for SEO. They include all the same performance and SEO features as base language pages in Framer. Along with this, we include the html lang tag and hreflang tags that Search engines are looking for in order to link to the correct pages.
What if I don’t want something Translated?
Non-translated items will always use the fallback value instead, if you want to have these still marked as “Done” and contribute to your Locale completion percentage, you can right-click them and select “Ignore”
How does it play with reverse proxy and already set language paths?
If you have a setup where you're using a reverse proxy and have language paths set up, and you have a page inside your Framer project with the same path as a locale, it will override the locale.
For example, if you have a page in your Framer project at /en/p and you're also using a reverse proxy to direct /en/p to a non-Framer page, the Framer page will take precedence and be displayed instead.
Can I create Locales with specific regions?
When creating a new Locale, first select a language and then you may optionally specify a region. This list displays common regions for the Locale, such as The Netherlands and Belgium for the Dutch language. For advanced Localization, projects on an Enterprise plan can define non-standard language / region pairings, such as English (Netherlands).