Localized SEO and locale routing

Learn how Webflow handles SEO localization and domain- and page-level routing.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
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: 

  1. SEO localization
  2. Locale routing

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.

Note: 301 redirects are relative to your root domain and won’t apply to localized slugs or subdirectories. For example, if you’d like both /old-url and /es/old-url to redirect to /new-url, you’d need to set these up as two separate redirect rules.

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 homepage.

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. If your site visitors navigate to a specific page URL or the homepage of a secondary locale, Webflow will direct them to the destination as specified in the URL.

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. 

Note: Automatic page-level locale routing only works for page links with the Link setting set to Page or Collection page — so, if you use a direct URL in your link settings to link to another page or item on your site, your link will not route site visitors to the locale-specific page. Learn more about link settings.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top