April 21, 2024

3 ways of making your Webflow site multilingual (and which one to use)

Tips & Tricks

by Rajat Kapoor

Did you know that only about 17% of the world's population speaks English? By building an English-only website, you're potentially missing out on connecting with over 83% of global internet users. Imagine the opportunities!

Here’s what you're missing with a single-language website:

55% of consumers prefer to only buy products from websites that provide information in their language.

50% of Google's search queries come from non-English languages.

Businesses not adapting to local languages risk losing up to 40% of their total addressable market.

Expanding your website to include multiple languages isn’t just about reaching more people—it’s about significantly improving user engagement and increasing your profitability along with it. Here are the benefits of building a multilingual website in 2024 and how you can achieve this with Webflow.

‍

The benefits of building a Multilingual website in 2024

Access to a broader market and new audiences

By providing more language options on your website, you can get access to a wider audience who don’t speak English. This also opens up opportunities for entering different markets and countries with your existing content, just in their language.

Better conversion rates

76% of online customers prefer to buy from websites which provide content in their native language. Just by localizing your buying experience and providing content in your audience’s native language, you can improve your conversion rates.

Reduced bounce rate

By making it easy for your audience to understand your content, you increase the likelihood of them spending more time on your website, and reducing your bounce rate.

Improved International SEO

If your website already ranks well on Google in English, that's great! However, it might not hold the same position in other languages.

By making a multilingual website, you can significantly boost your international SEO and rank on Google even when someone does a Google search in their native language.

Higher sales and revenue

Being able to tap into new markets means you’ve already increased your total addressable market. This improves your ability to increase sales without necessarily increasing your ad spending and marketing budgets.

By simply localizing your website, you increase your chances of improving your revenue from a wider audience.

Increased brand recognition and awareness

Building a multilingual website not only grows your customer base but also builds more trust with these new audiences. It shows that you care about including everyone and present your brand as culturally sensitive and focused on the customer, which improves your brand recognition and awareness.

‍

Quick Fact: Did you know? Airbnb expanded its user base in 190 countries & 34,000 cities after adapting its website’s content in 62 languages in 2019. (case study here)

Now that you understand the difference a multilingual website can make in your business, let’s see how you can execute it.

‍

How to make your site multilingual

There are 3 primary methods of making your site multilingual in Webflow. We’ll show you how each of them works, the pros and cons of each, and lastly, which one’s the right fit for you.

Method 1 - Duplicates and ‘hreflang’ tag

This is a straightforward method where you create multiple versions of the same page, each tailored to a different language. Once ready, you add ‘hreflang’ attribute on all your pages to tell Google that you have this page available in other languages too.

How it works

Let’s say you have a 3-page website and you want to add Spanish as an additional language on it. Here’s how you’ll make it -

Step 1: Plan Your Pages

Finalize the pages you want to make multilingual.
Determine the content that needs translation, including text, images with text, and metadata like titles and descriptions.
Duplicate your page once you have clarity on everything that needs to be translated.

Pro Tip: Make a folder for your new set of pages and name the folder the same as the ISO code for that language. For example, the code for Spanish will be ‘es’. This way all your Spanish pages will be under the ‘es’ subfolder.

Step 2: Translate the Content

Start Translating all textual content on the page into Spanish. This includes headings, paragraphs, button texts, image alt texts etc
Update any images that have content inside of them.
Update metadata like page title, meta description and any other SEO tags for improved SEO.

Step 3: Implement ‘hreflang’ tag

Add custom code to both the original page and the new Spanish page to include ‘hreflang’ tags for SEO.
Go to the Page Settings of each page.
In the Custom Code section in the <head> tag, add the following code:

For the English page:

<link rel="alternate" hreflang="en" href="http://www.yoursite.com/originalpage" />
<link rel="alternate" hreflang="es" href="http://www.yoursite.com/originalpage-es" />

‍

For the Spanish page:

<link rel="alternate" hreflang="es" href="http://www.yoursite.com/originalpage-es" />
<link rel="alternate" hreflang="en" href="http://www.yoursite.com/originalpage" />

Change the URLs to match your actual site structure. (Learn more about implementing hreflang tags here.)

Step 4: Publish and Test

Publish your site to make the changes live.
Test both versions of the page:

Ensure that the translations are accurate.
Check that the ‘hreflang’ tags are implemented correctly using tools like Hreflangs.com.

When to use

This method is suitable when you have a small website with around 1-3 pages, and you want to translate it into only 1 or 2 languages. If you intend to expand your website soon, or have a CMS collection you want to manage in multiple language, this might not be the best method for you.

Pros and Cons

Pros	Cons
Full Control Over Translations: You maintain complete control over the accuracy and cultural relevance of the translations, ensuring they meet the specific needs of your target audience.	Time-Consuming: Manually duplicating and translating a page is a time-intensive task, especially for content-heavy pages.
SEO Benefits: Properly implemented hreflang tags help improve SEO by directing users to the correct language version of the page, reducing bounce rates and improving user engagement.	Maintenance Overhead: Any updates to the original page need to be manually duplicated on the other page, increasing maintenance efforts.
Custom Localization: Customize each element of the page to suit cultural nuances and preferences, increasing the effectiveness of your content in the target market.	Increased Complexity: Managing multiple language versions of a page adds complexity to your site's structure and may require additional SEO monitoring.
Immediate Implementation: Changes and translations can be implemented and published immediately without depending on third-party tools or services.	Higher Potential for Errors: Manual handling increases the risk of inconsistencies and errors in translation or code implementation, particularly hreflang tags.
Cost-Effective (Free): This method incurs no additional costs as it does not require subscription-based translation services or paid plugins, making it economically beneficial for budget-conscious projects.	CMS Management Difficulties: Maintaining separate CMS collections for each language version can become a hassle, especially when dealing with a large amount of dynamic content.

‍

Method 2 - Using Third-party tools

Another way to make your website multilingual is by using third-party tools like Weglot or Polyflow. These tools easily integrate with your website and help you speed up the translation process. You can manage and update your translated content in their dashboards and see it updated on your live website.

How it works

Both Weglot and Polyflow have a simple no-code integration process, after which they automatically detect and translate all the content and metadata across your website.

You can add your translations over specific areas and make the content truly your own. You can even add specific terms, phrases or product names in a glossary, so you don’t need to change them on every page, and the tool takes care of maintaining this consistently.

You can read the implementation documentation for Weglot and Polyflow on their respective websites.

When to use

These tools are very useful when you have a larger website which cannot be translated and maintained manually, or you have a CMS collection in your website. It is also a fast solution if you intend to add more than 2 languages.

Pros and Cons

Pros	Cons
Ease of Implementation: Third-party tools are typically plug-and-play solutions that integrate easily with existing websites, simplifying the setup process.	Cost: This can become expensive, especially for content-heavy websites, as costs typically scale with the volume of content and the number of languages. E.g., Weglot starts at $17/month.
Automatic Content Detection and Translation: Automatically detects and translates content, saving significant time and effort.	Dependence on External Services: Creates a dependency, which can be risky if the service experiences downtime, changes pricing, or discontinues features.
SEO Management: Handles complex SEO considerations including hreflang tags, ensuring proper indexing of multilingual content.	Potential Issues with Translation Quality: Initial machine translations may require revisions to capture language nuances accurately.
Easier to Add Multiple Languages: Adding additional languages is often as simple as selecting new options in the tool’s dashboard.	Limited Customization: May offer limited options for customization compared to native or fully custom solutions, which could affect the user experience.
Ability to Create Your Glossary: Allows you to ensure consistent translation of specific terms or brand names across all languages.	Data Privacy Concerns: Using external services for sensitive content could raise issues depending on the provider's security standards.

‍

Method 3 - Native localization

The third and most recent method of adding localization on your Webflow website is via Webflow’s native localization feature. This lets you create and manage your multilingual website, directly on Webflow Designer. You can edit and manage both static and CMS items for multiple languages on Webflow itself.

Since this feature is native to Webflow, you get the most flexibility in terms of controlling content, design, images and even styles.

When to use

Like third-party solutions, Webflow’s native localization feature is most useful when you have a larger website or you plan to add multiple languages to your website. It is also a great choice if you plan to customize the visual appeal of your website based on locales.

See how you can add localization via Webflow’s native localization feature here.

Pros and Cons

Pros	Cons
Officially Supported by Webflow: Integrated solution with consistent support and compatibility.	Does Not Support Webflow E-commerce: Localization features are unavailable for e-commerce sites.
Direct Management within Webflow: Simplifies workflows by allowing all localization tasks to be managed directly on the platform.	No Built-in Glossary Feature: Lacks a glossary for consistent terminology, though it can integrate with Lokalise.
Hosted on Webflow’s Infrastructure: Ensures that all language versions are as reliable and performant as the primary site.	Manual Updates Required: Any primary language updates require manual implementation in each localized version.
Automatic Sitemap Localization: Automatically localizes sitemaps, enhancing SEO for multiple languages.	Site Exports Do Not Include Locales: Exporting a site from Webflow will not include the localized versions.
Intuitive User Experience: Familiar interface for those accustomed to Webflow’s CMS and styling tools.	Increased Workload for Content-Heavy Sites: Frequent updates across multiple locales can be challenging to manage.

What to look for before picking the right localization method for you

Before finalizing a localization method for your website, consider the following factors -

Ease of Implementation: Look at how easy it is to set up the localization, how complicated the process is, and how much technical know-how you need.
Cost: Think about the initial costs, the expenses for ongoing upkeep, and any additional costs that might arise as you expand your multilingual features.
Translation Quality: Make sure the translations are accurate, can be adjusted to match your brand’s voice, and are capable of handling content that changes frequently.
Speed and Performance: Check how the localization affects your website’s loading speed and whether translations are handled more on the server or in the user's browser.
SEO Friendliness: Ensure that the localization supports SEO best practices for multilingual content, manages hreflang tags well, and helps improve your site’s visibility in search engines.
Flexibility and Customization: See if you can customize the look and feel of the language switcher, support different dialects or custom language options, and if it works well with other tools you use.
Scalability: Consider whether the method can manage a lot of content, add new languages easily, and handle a lot of website visitors without issues.
User Experience: Ensure the language switcher is easy to use, the translation quality is consistent across the site, and the system can detect and switch to the user’s preferred language automatically.
Support and Documentation: Check for reliable customer support, thorough documentation to help you manage the localization, and a community forum for extra guidance.
Compliance and Legal Considerations: Make sure the localization follows data privacy laws, meets accessibility standards, and fulfils legal requirements related to how accurate the translations need to be.

To simplify your decision-making process, we’ve made a comparison table, comparing these metrics for all 3 methods of making your site multilingual.

Comparison of Methods:

Metric	Duplicates and 'hreflang' Tags	Third-Party Tools	Native Localization
Ease of Implementation	Manual and time-consuming, requires duplicating and translating each page.	Easy plug-and-play integration, automatic content detection and translation.	Direct management within Webflow, straightforward for those familiar with Webflow.
Cost	Free, no additional costs for tools or subscriptions.	Can be expensive, costs scale with content volume and number of languages.	Starts at $9/mo, but costs scale up as you add more languages.
Translation Quality	High control over translation accuracy and cultural relevance.	Automatic translations may require manual corrections for nuance.	High control, allows for manual adjustments to ensure accuracy.
Speed and Performance	No impact on performance, but updates require manual re-translation.	Minimal impact on performance, automated processes handle translations.	Integrated with Webflow, performance optimized within Webflow's environment.
SEO Friendliness	Strong, with proper implementation of hreflang tags for multilingual SEO.	Handles SEO considerations including hreflang tags.	Supports SEO best practices including automatic sitemap localization.
Flexibility and Customization	High, allows for complete customization of translated content and assets.	Limited customization options compared to native solutions.	High, fully flexible within Webflow with support for custom designs and layouts.
Scalability	Low, adding new languages or content requires manual replication.	High, easily add languages through the tool’s dashboard.	High in terms of adding languages, but updates do not automatically sync across languages.
User Experience	Consistent user experience can be maintained with effort.	Generally good, but dependent on the quality of the translation tool used.	Intuitive user experience, aligns with Webflow’s CMS and Style panel.
Support and Documentation	Dependent on general Webflow support and community resources.	Generally well-supported with dedicated customer service from tool providers.	Officially supported by Webflow with comprehensive documentation.
Compliance and Legal	Needs manual compliance with data privacy and accessibility standards.	Compliance could be an issue depending on the tool's data handling policies.	Adheres to data privacy regulations, meets accessibility standards.

Choosing the right one for you

When deciding how to make your Webflow site multilingual, each method has its pros and cons. Your choice will depend on what you need from your website and what resources you have.

1. Duplicates and ‘hreflang’ Tags:

Use this if: You have a small website with just a few pages and want tight control over every translation and SEO aspect. This method is great if you don’t mind handling updates yourself and are looking to save money, as it doesn’t require extra fees for services.

2. Third-Party Tools (like Weglot or Polyflow):

Use this if: Your website is larger or has content that changes often. These tools make it easy to start and manage many languages, handling everything automatically, including updates and SEO. While convenient, remember that the costs can add up with more content and languages.

‍3. Native Localization:

Use this if: You want a solution that fits perfectly within Webflow, where you can control a lot of custom settings. It’s perfect if you’re already familiar with using Webflow and need to scale up by adding more languages smoothly. This method works best for non-e-commerce sites and those who prefer everything integrated in one place.

In short, think about what’s most important for your site—whether it’s ease of management, cost, or having detailed control over every part of the process. Matching your specific situation with the right method will help you reach more people around the world in a way that works best for you and your site.