How to Manage hreflang Tags on a Multilingual Webflow Site
Learn how to implement hreflang tags correctly in Webflow to tell Google which language versions of your pages to show and avoid duplicate content issues.
Hreflang tags tell Google which language version of a page to serve to which user. Without them, a multilingual site can run into duplicate content issues and poor international traffic distribution. Sandro, cofounder of Gemeos Agency, walks you through how to implement them.
Prerequisites
- A Webflow site with at least two language versions (for example, FR and EN)
- The URLs for each equivalent page version
- Access to Webflow custom code (paid plan required)
1. Understand the structure of a hreflang tag
Every page on a multilingual site must declare all of its equivalent versions, including itself. The tag goes in the page's <head>.
2. Add the tags in each page's Head Code
In Webflow Designer, open each page's settings. In the "Custom Code" section, paste the hreflang tags into the "Inside <head> tag" field. Repeat this on every language version of the page: the tags need to be present and consistent across all versions.
3. Manage the x-default tag
The "x-default" value points to the default version to serve when no language matches the user's. Point it to your most universal page, usually the English version or the main homepage.
4. Check the implementation
Use the Rich Results Test or the "hreflang Tag Checker" Chrome extension. In Google Search Console, the "International targeting" section flags hreflang errors detected on your site.
Conclusion
Hreflang tags are essential as soon as your site exists in multiple languages. Done right, they protect your international SEO and improve the user experience.
- Use case 1: FR/EN SaaS site with two complete content versions
- Use case 2: agency with a main FR site and EN service pages to target English-speaking markets
- Use case 3: multilingual e-commerce site with FR, EN, and DE versions
Good to know
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
