How to create a multilingual website in Webflow

Although you may have covered your local, regional, or even national markets with a monolingual website, translating your content is the key to expanding into new international markets. Languages such as Chinese, Spanish, Arabic, and French are increasingly growing online and offer big market opportunities.

A translated website is especially important for businesses selling goods or services online. A full 75% of people surveyed about why language matters on global websites admitted an obvious preference to shopping online in their native language, and 60% of people rarely, or never, buy on English-only websites.

So, with that in mind, let’s take a look at the options for adding a language to your Webflow website.

How to make your Webflow website multilingual

In Webflow, you have a few options for bringing multi-language capabilities to your website. Let’s explore them.

1. Duplicate websites and pages

Search in the Webflow forum for multilingual options and you’ll likely come across the concept of duplicating your website or creating multiple pages. While this solution can work well for very small websites, with a small word count, it’s still a time-consuming process and can be a bit tedious.

You can duplicate collection items though static pages. The way this solution works is to take all your website pages, duplicate them, and then create folders for each language. However, creating duplicate pages or websites requires duplicate work as you’ll be adding and managing multiple pages as well as your original website. This is why some users may not favor this way of creating a multilingual website.

Consider the length of time it takes to manage your primary website — every time you update content in the original version of your website, you’ll need to update your duplicate pages as well.

If you create duplicate websites, you can create language subdirectories. But you’ll likely be penalized by search engines if you don’t add hreflang tags. These tags tell Google about pages that are similar in content but target different languages, as it will be considered duplicate content. You’ll need to add hreflang tags to your pages manually.

The second downside of this process is that in addition to creating duplicate pages, you will have to take care of translating the content of your website. You’ll need to work with a translator if you don’t speak the language you want to add. Then, you’ll have to manually add the translated content to your site.

2. Use the Weglot integration

Weglot, a Webflow translation solution, was created to eliminate the dozens of manual steps the above option requires. As a no code solution, you’ll have a multi-language website up and running in just a few steps, with no manual work needed from your side.

Weglot works by scanning the content of your original page, detecting the content visible on the page (non-visible too, such as your metadata), and replacing the content with the translations. You’ll get a first layer of automatic translation, which you can then edit, manage, and fine-tune through your Weglot dashboard — you also have access to professional translators if required.

There’s no manual page by page translation or the need for duplicate pages or websites — Weglot takes care of all the technical parts of having a multilingual Webflow website. You then need to focus only on your content.

Once installed, Weglot will give you separate language subdomains, which are great for SEO and recognized as one of the key components when following Google best practices for multilingual SEO.

You’ll also get an automatically added front-end language switcher for your users so they can select the language of their choice.

To get started, you'll need to make a Webflow account and have a project you want to translate to another language. Assuming you already have is done, let's get into.

For those who like to watch, you can check out this video:

For the readers out there, let's continue.

Step 1: create your account

Create an account on Weglot. This is the place where you’ll be able to manage and edit your translations.

Step 2: adding your project

You’ll then be prompted to add your domain name, the original language of your site, and the languages you want to add.

(Note: If you’re using a temporary Webflow domain name, use this integration or wait until you’ve added a custom domain.)

Step 3: configuring your DNS records

Create your subdomains by configuring your DNS records. This can be done in your domain name provider account. Look for your DNS tab and create a new CNAME entry. 

Add the language code of the language you’re adding in Name, and in Data, add websites.wegot.com. Then click Check DNS.

If you get stuck here, you can also check out Weglot’s tutorial here.

Step 4: adding custom code in Webflow

Copy and paste the JavaScript snippet provided in your Weglot account. Then go to your Webflow admin area under Settings → Custom Code. Go to Head Code and paste the Weglot code to your <head> tag.

Step 5: save and publish

Save and publish your changes. That’s all there is to it — you’ll now have a multilingual Webflow website.

Technical aspects of translating a website

You need to think about these key components when choosing a translation solution for your website.

Multilingual SEO

Multilingual SEO is an important factor when translating your website. If the solution you’re planning on using doesn’t take into consideration the many aspects of SEO, then it’s likely to have an impact when it comes to the visibility of your newly translated website.

You choose to add additional languages to your website so you can enter new markets. But if you’re using a solution that doesn’t include language subdomains, then it’s unlikely you’ll be found by your new audience due to duplicate content penalties from Google.

Translated content on your Webflow website — together with translated meta titles and meta descriptions — enables you to target a broader range of keywords. Weglot also detects and translates content not visible on your site, like metadata, which boosts your chances of being ranked in SERPs for Google in your new markets.

Editing options

It’s important to choose a solution that makes it as easy as possible to edit and manage your translations. While duplicate websites and pages might seem like a good idea, you’re likely to regret the decision later when you need to make small changes to each page manually.

Weglot handles your site differently. Weglot automatically detects all of your content, including any new content you add to your pages. With a first layer of automated translation, any new content added to your site can be validated and that’s it. You don’t even need to validate your translations if you switch on the display automatic translations feature in your Weglot dashboard. You have full control over your translations.

You can manage your translations two ways with Weglot. You can choose to edit your translations through a live preview of your site so you can visually see where each one of your translations is, or you can edit them through a simple translations list.

Weglot is a great solution for helping you build your own workflow, such as inviting new team members or freelancers to help manage your translations or using the private mode feature to edit your translations before they go live on your site.

You also have access to professional translators through the Weglot dashboard. While automatic translation is becoming increasingly accurate, you might want to use a professional translator for some of your important pages.

One of the most important aspects of adding a language to your Webflow website is giving a better user experience to your website visitors.

It’s therefore important to give your website visitor the option to change the language of their website with a language switcher. If you’re using Weglot as your Webflow translation solution, you’ll get a front-end language switcher automatically added to your website.

The Weglot language switcher is neutral in its appearance and is by default added to the bottom right of your Webflow website. As a Webflow user, we’re going to presume you will more than likely want to edit the look of this switcher to fit the unique look and feel of your website design.

And that’s made easy by Weglot’s handy UI Kit, featuring 14 customized language switchers that can be cloned and added to your website. Check out the tutorial video here.

It’s also possible to automatically redirect website visitors based on browser language — this is a useful feature that can be turned on or off in your Weglot dashboard.

Make a multilingual website with Webflow

Adding languages to your Webflow website is a great way to increase website traffic and enter new markets. If your website visitors can’t understand the content of your site, they’re unlikely to convert.

Luckily, translating your Webflow website just got a whole lot easier. While some circumstances might call for duplicate pages or collections — such as, if you’re looking to translate only a couple of pages on your site — the easiest and fastest way (at the moment) to create a multilingual website is by integrating with a translation solution.