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

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

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

Step 3: Implement ‘hreflang’ tag

1. Add custom code to both the original page and the new Spanish page to include ‘hreflang’ tags for SEO.
2. Go to the Page Settings of each page.
3. 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

1. Publish your site to make the changes live.
2. 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

‍

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

‍

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

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

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

1. 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.
2. Cost: Think about the initial costs, the expenses for ongoing upkeep, and any additional costs that might arise as you expand your multilingual features.
3. 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.
4. 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.
5. 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.
6. 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.
7. Scalability: Consider whether the method can manage a lot of content, add new languages easily, and handle a lot of website visitors without issues.
8. 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.
9. Support and Documentation: Check for reliable customer support, thorough documentation to help you manage the localization, and a community forum for extra guidance.
10. 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:

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.