Multilingual website in Webflow

Before you choose the way you want to set up the website structure, ask yourself a couple of questions to know its context better. (Or ask a client, how has more context) 

Below are a few questions to consider, before you start implementing any solution:

• How often the website will be updated? In other words, how often will I need to update the translation? The more updates you plan, the more automation you will need.
• Do I need additional subpages with extra information for visitors from different countries? Will I need them in the future? If you need a completely different site structure for language variations, you should seek solutions that allow more flexibility.
• How many language versions do I need? Will I need more of them in the future? If you’re planning to create numerous language versions, you’d better choose an option that is easily scalable.
• Is my website well-optimized for SEO already? Do I need to be especially careful when meddling in its structure and creating subdomains? (You can learn more about subdomains and how the Google algorithm treats them in the next parts of this article).

The first thing you can do is simply duplicate all the pages in your project and translate them.

Technically speaking, we’ll be creating subdirectories to organize content by topic (in this case, by language). “Organize” is a keyword here, as you’ll have URL slugs that will make your website both users and crawlers friendly.

How to set up folders

You go to your website structure, duplicate all the pages and put them in the folders. Each new folder should include one new language version:

That’s how you deal with static pages. When it comes to any collections in your project (e.g. blog), you’ll need to take care of it in a few more steps, but it’s still fairly simple, so don’t worry. 

First, go to the collection and click on settings. 

Then, add a new field (option field, to be precise).

‍

Now you need to provide a label (let’s say, you name it Lang). You also need to add languages as options.

If you now go to an example blog post in this collection, you’ll be shown a field where you need to select a language from the options you’ve entered.

This way, if you apply a filter to your blog subpage, only posts in a specified language will appear there.

Why should you use folders (and why not)

Pros:

• Providing your Webflow plan comes with enough subpages, it’s the cheapest solution from the ones we discuss here.
• It’s extremely simple and fast.
• Subfolders help you create a SEO-friendly structure that Google algorithm likes .
• Perfect for a small website with a small number of subpages.
• Perfect for static pages, but it’s possible to set up CMS items as well (the collections tip above).
• If you want to, you can keep everything the same when it comes to all the versions: layout, structure, and the number of subpages. However, if you choose to create additional subpages for one folder only, it’s also fine.
• You can use a single site plan and control every language version in one project only.

Cons: 

• Possible problems with adding more languages and growing the site. Webflow allows you to create only 150 subpages in one project, so structure duplication might not be the best solution for huge websites.
• You still have to get your website translated. This solution only lets you create the technical stuff, not the content.

The previous option, were pretty technical and did not really touch the translation aspect of creating language versions. Let’s talk a bit about solutions that make use of machine translations.

How to set up 3rd party

We’ll compare two solutions here: Weglot and Linguana. 

First, make sure your site has a sitemap as the translation app’s bots will crawl it to find all your subpages and translate every single one of them.

The basic steps in Weglot are as follows:

• Create an account in Weglot.
• Create a project.
• Provide your domain URL (doesn’t work for staging ending with .webflow.io! If you want to translate a website with such an ending, go to this guide.
• Choose the languages you want to translate your website into.
• Set up DNS records and publish your project.
• Customize your website’s look.
• After your website is published, you can go to your Weglot dashboard and edit translations in Translations List or Visual Editor.

You can find detailed info in the Weglot setup guide.

The basic steps in Linguana are as follows:

• Create an account in Linguana.
• Create a project.
• Provide your domain URL.
• Add a meta tag to your Webflow project's custom code to verify the ownership of your domain.
• You will be given a staging address on Linguana, where you can test your translations.
• Choose the language you want to translate your website into.
• You will be provided with a list of subpages (you can add pages manually as well).
• It’s your turn to verify the translated images and blocks of text. Just for sure, publish any changes on Linguana’s stage domain first.
• Set up DNS records and publish your project.

The detailed version is available in this Linguana setup guide.

From the guides only, it’s quite clear that:

• Weglot seems like a way to go if you want the new version live as soon as possible and do not plan to verify the translation before you publish your site (although this is also possible in Linguana).
• Linguana seems better for those who want to speed up the translation process but not necessarily automate it completely.

Why should you use third-party translators (and why not)

Pros:

• This option actually provides you with the translation, not just a technical setup where you still need to add translated content.
• It’s fast thanks to the AI tools (Weglot’s tools are DeepL, Google Translate, and Microsoft Translator while Linguana uses Google Cloud translations and in-house technology).
• If you want, you can order a professional translation which will be implemented in your project for you. If your text includes a lot of cultural references or is directed to knowledgeable audiences, we recommend doing that.
• Third-party translators implement hreflang tags (important for SEO of your multiple language site) and allow multilingual SEO setup. Although in some cases they don't provide all necessary features.
• It’s possible to adjust the site’s design (words and phrases have different lengths in different languages, so your headers, captions, and microcopy might need a bit of polishing).
• It’s worth noticing that Linguana offers a manual translation option free of charge (you don’t pay any credits for it).
• If you add anything new to your website (pages or even words), the content could be automatically translated. If you choose to, no new translated content will be published on your website without your approval, so you’ll receive notifications on translated content to approve.

Cons:

• It's a paid solution. Weglot’s plans give you words per website while in Lingua you buy credits and then exchange them to translate words.
• You are dependent on a third-party provider.
• Some will say that AI-generated translations lack a “human factor”. If you are hesitant about relying on AI, make sure to use features that allow you to always verify the content before it goes live.

How about option 3?

Less frequently used by us in Webnomads, but still possible to set up. Theoretically, nothing stops you from duplicating the whole Webflow project and publishing it under a lang subdomain (e.g. fr.webnomads.com).

How to set up subdomains

You just click the “Duplicate” button.

‍

Now that you have two versions of the same site, you “just” need to update all the content and publish the site.

Why should you use subdomains (and why not)

Pros of this option:

• You can create a completely different navigation and site structure for all the language versions, and use different scripts, styles, fonts, layouts, etc.
• Each language version is considered a separate website. You can change everything on it depending on your target audience’s needs.
• It works pretty well when you have one main language that you constantly work on and others that you don’t deploy on a regular basis 
• Thanks to this option, you can use websites to target two completely different audiences from different countries who may value different features of the product you advertise on your website. Let’s say, you run an online shop where you sell traditional French snacks and you translate the website to English. The English version may need a whole new section explaining what the snacks are, whereas the French audience is perfectly familiar with your products.

Cons of this option:

• May be pricey, as you’ll need a Webflow plan for every new language. 
• Rather complicated, especially if you want to implement changes and care about regular updates.
• You still have to get your website translated. This solution only lets you create the technical stuff, not the content.

Last but not least, there is also one huge aspect we need to discuss to explain how exactly project duplication is different from subfolders. Let’s just say: URL structure. 

As you remember, in the first solution, the language version looked like this: website/com/fr/home. 

If you duplicate the whole project, you can:

• host a different language version on a subdomain (like: fr.website.com), or
• publish a website on a new domain (like: website.fr)

Now, you need to be aware of the fact that Google will not treat either fr.website.com or website.fr as a part of website.com. Which can be a good or bad thing, depending on your needs. 

Even if you do just a small research, you’ll probably come across stories from SEO experts who’ve seen the website’s traffic drop drastically after the subdomain was introduced. So, if you consider ANY CHANGES to your current website structure, be aware that interfering with domains and subdomains MAY HAVE an effect on your SEO ranking.

Needless, to say, we consider option 1 or 2 safer than option 3.