Localized Search Engine Optimization and regional routing

Before you start: Take a look at the Localization overview to get acquainted with Localization.

SEO (Search Engine Optimization) localization can enhance your website’s visibility in new markets and boost traffic to your site overall. While you have full control over your page-level SEO in Page settings, Webflow implements best practices to localize your site-level SEO and direct site visitors to their preferred locale — without requiring any additional steps on your end.

Please note: Certain Localization features are accessible only on specific Localization plans. Explore a comprehensive comparison of Localization plans and features.

This tutorial will cover the following topics:

SEO localization
Regional routing

SEO localization

Webflow utilizes various techniques to indicate multiple language/locale versions of a page to Google and other search engines:

HTML lang tags
HTML page-level tags
Sitemap hreflang tags

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 assigns your site’s language code according to each locale.

Important: The language code field in Site settings > General tab > Localization supersedes any locale-specific language codes. If your site supports multiple locales, ensure that 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 comprehend how your localized pages are interconnected.

Sitemap hreflang tags

The hreflang tags in sitemaps assist search engines in recognizing the available language and region variants of your site content, determining how localized pages are related, and presenting the most relevant locale to site visitors in search results. For sites with an auto-generated sitemap, Webflow automatically incorporates hreflang tags for all static and dynamic pages on your site. Only locale subdirectories with publishing enabled will be displayed in the auto-generated sitemap. Learn more about Webflow’s auto-generated sitemap.

Please note: If you utilize a custom sitemap in Webflow, you’ll need to manually add hreflang tags for each page, or you may consider alternative custom code solutions such as embedding page-level hreflang tags.

Important: If any CMS content on a secondary locale (e.g., Locale B) serves as an alternative to localized content in another secondary locale (e.g., Locale C), always maintain an active default version on the primary locale (e.g., Locale A). When a CMS item is unpublished on a primary locale but published on 2 or more supported locales, Webflow cannot determine the fallback non-primary locale, and each localized version will receive a unique “x-default hreflang” tag in the sitemap, indicating that the pages are independent of one another.

Regional routing

Regional routing involves directing site visitors to the locale version that best suits them when they access your site. Regional routing occurs at both the site level and page level.

Site- or domain-level routing

Enterprise and Advanced Localization plans encompass automatic domain-level routing — if a site visitor prefers “Spanish,” Webflow will strive to direct them to the appropriate locale version of your site’s root domain. If their desired locale isn’t supported by your site, or if a site visitor hasn’t set any preference, Webflow will redirect them to the primary locale.

Page-level routing

The Locale list element and page links (i.e., the page link type in link settings) offer automatic page-level routing to guide visitors to site pages in their preferred language. For instance, if a site visitor explores your “About” page in English and subsequently selects Spanish from your locale switcher, your site will redirect them to the Spanish locale’s “About” page.

If a site visitor lands on a page that doesn’t exist in a specific locale, your site will reroute them to the locale subdirectory. For example, if someone visits a site page in your English locale and then switches to your Spanish locale where the given page isn’t available, they will be redirected to the Spanish locale’s homepage.

Keep in mind: Automatic page-level locale routing is only applicable to page links with the Link setting set to Page or Collection page — in case you employ a direct URL in your link settings to refer to another page or item on your site, the link will not route site visitors to the locale-specific page. Learn more about link settings.

Author
Recent Posts

Ewan Mak

Webflow Expert at Tenten

Webflow expert and frontend developer with 4+ years of experience. I bring a versatile skillset (HTML, CSS, JS, Figma, Adobe) to craft exceptional Webflow experiences. 70+ projects honed my ability to seamlessly blend custom code and visual development. Organized, deadline-driven, and passionate about growth, I excel in dynamic environments. Let's push boundaries and create something amazing.