Localized SEO and locale routing
Learn how Webflow handles SEO localization and domain- and page-level routing.
Before you get started: Check out the Localization overview to familiarize yourself with Localization.
SEO (Search Engine Optimization) localization can improve your site’s visibility in new markets and increase traffic to your site overall. While you have total control over your page-level SEO in Page settings, Webflow implements best practices to localize your site-level SEO and route site visitors to their desired locale — without any additional action on your part.
Note: Some Localization features are available only on certain Localization plans. Check out a complete comparison of Localization plans and features.
In this lesson, you’ll learn about:
SEO localization
Webflow uses several methods to indicate multiple language/locale versions of a page to Google and other search engines:
HTML lang tags
The HTML lang attribute (i.e., site language code) specifies the language of page content for browsers, search engines, and screen readers. Webflow automatically sets your site’s language code according to each locale.
Important: The language code field in Site settings > General tab > Localization overrides any locale-specific language codes. If your site supports multiple locales, make sure the language code field in Site settings is empty.
HTML page-level tags
Each page on your site includes the list of localized variants of the specified page in the <head> tag to ensure search engines understand how your localized pages relate to each other.
Sitemap hreflang tags
The hreflang tags in sitemaps help search engines understand the available language and region variants of your site content, identify how localized pages are related to each other, and deliver the most relevant locale to site visitors in search results. For sites with an auto-generated sitemap, Webflow automatically includes hreflang tags for all static and dynamic pages on your site. Only locale subdirectories with publishing enabled will appear in the auto-generated sitemap. Learn more about Webflow’s auto-generated sitemap.
Note: If you use a custom sitemap in Webflow, you’ll need to manually add hreflang tags for each page, or you may consider custom code alternatives like injecting page-level hreflang tags.
Important: If any CMS content on a secondary locale (e.g., Locale B) is an alternate of localized content in another secondary locale (e.g., Locale C), you should always keep a default version live on the primary locale (e.g., Locale A). When a CMS item is not published on a primary locale but live on 2 or more supported locales, Webflow cannot determine what the fallback non-primary locale is, and each localized version will be assigned a unique “x-default hreflang” tag in the sitemap, which indicates the pages are independent of each other.
Locale routing
Locale routing is the process of routing site visitors to the locale version that is most appropriate for them when they visit your site. Locale routing happens at both the site level and page level.
Site- or domain-level routing
Enterprise and Advanced Localization plans include automatic domain-level routing — meaning if a site visitor has a browser preference for “Spanish,” Webflow will attempt to route them to the correct locale version of your site’s root domain. If your site doesn’t support their preferred locale, or if a site visitor has no preference set, Webflow will route them to the primary locale.
Page-level routing
The Locale list element and page links (i.e., the page link type in link settings) have automatic page-level routing to direct visitors to site pages in their preferred language. For example, if a site visitor visits your “About” page in English and then chooses Spanish from your locale switcher, your site will route them to the Spanish locale’s “About” page.
If a site visitor navigates to a page that doesn’t exist in a given locale, your site will route them to the locale subdirectory. For instance, if a site visitor visits a site page in your English locale and then uses your locale switcher to visit your Spanish locale where the given page doesn’t exist, they’ll be routed to the homepage for your site’s Spanish locale.