Streaming live at 10am (PST)

[TUTORIAL] Full Multi Language Site - Easy to set-up and to use!

I just discovered this post, but I have been reading Google search help on the topic which leads me to believe that multiple languages on one page is not a good approach.

Google recommends using different URLs for each language version of a page rather than using cookies or browser settings to adjust the content language on the page.

https://support.google.com/webmasters/answer/182192?hl=en

I am no expert, so please advise me if I am off track,

The script-using solutions described here are useful to address an urgent need, but even before being not ideal (polite way to say bad, in this case, actually) for SEO, they’re an accessibility nightmare.

In short, a prerequisite for your page to be compliant with screen readers is that it must work with JS (and CSS) deactivated.

Multilanguage implies localization, not simply translation. Localization concerns:

  • translation of texts
  • adaptaion of local variables such as numbers, dates, currency formats
  • translation of the URLs and paths
  • adaptation of the texts for the local culture (e.g. word games, to objects, actions or ideas which, in a given culture, may be subject to misinterpretation or viewed as insensitive)
  • keyboard usage
  • collation, sorting
  • symbols, icons, colors (did you know you cant depict blood as red in an entertainment product for the German market?)
  • legal everything

Localization is big, vast, and the one who should handle it is Webflow, because anyone else is hardly in the appropriate position to do so. Hopefully this is coming within a year.

6 Likes

Hey guys,

I’m Eugene from Weglot (a multilingual solution to translate any website). First of all, congrats for the creative ways you found to do a multilingual website with Webflow!

We recently launched a new way to make any Webflow website multilingual. It’s simple to install, SEO compliant and easy to manage. We got our first few users and the feedback are great.

We’ve just set up a demo website here: https://www.weglot-translate-wbflow.com/
And a simple setup guide here: https://weglot.com/integrations/translate-webflow/

To go more into details a little bit, here is the way Weglot works: Weglot scans your website content, send it to our translation API and the API sends back the translations. This makes it very light and fast. You have 2 ways of implementing it:

  • JavaScript integration: Quick and easy integration. Simply copy paste a short JavaScript code in your website section (via your Webflow admin). It takes 5 minutes to install and doesn’t require any coding knowledge.
  • Subdomain integration: More in-depth and better for SEO. Connect Weglot via your DNS (fr.mydomain.com -> French version handled via Weglot). A little longer to implement as you need to setup subdomains but SEO friendly. All your pages will be automatically indexed on Google!

You can try Weglot for free and we also have a free plan for small websites translated in 1 language.

We are new to Webflow so we’d be happy to have your feedback!

Cheers,
Eugene

1 Like

Hi,

Thanks! It works well and I had almost fully implemented it in my project. Then I found out that unfortunately it doesn’t work in combination with tabs.

Hello,

This looks really nice and indeed, less of a hack and better for SEO. But will this also work with a webflow Ecommerce site? So will i have a complete functioning shop, in both languages?

And will this also translate things that you need to fill in, in the webflow settings. Like the order button or the text shown when a product is out of stock? In other words, will it literally translate all text that is visible for a visitor?

Thanks in advance!

Oh and another question: will this also work with complete seperate url’s intead of subdomains? So for instance: www.website.nl for Dutch and www.website.com for Englisch?

Hi @kverseijden,

I’m not sure what you mean. Could you show me an example?

Weglot should detect all content present in the HTML page. If the content is inserted dynamically (like via Javascript), you might need to add the CSS class of the element in the “Dynamic elements” on your Weglot Project settings so that Weglot can detect the content.

Hi @jarnom,

Good question. We need to test it out. There is no reason why it shouldn’t work with the Ecommerce feature. The main thing we need to check is the dynamic content (as I explained earlier, Weglot might not detect part of it) but we can find a solution for that.

Unfortunately, Weglot doesn’t work with Top-level domain for the moment. Our integration is only available via subdomain.

Your product sounds great, probably a cheaper alternative to bablic. I’ll probably give it a try…
Maybe from a marketing / selling viewpoint you should show on your site what the visual editor looks like :slight_smile:
Because that’s what we’ll have to sell to our clients if the want good multilingual tools.

1 Like

Hey @pepperclip,

Thank you for your feedback! I completely agree with you. The Visual Editor is one of the favorite features of our customers. We’ll see how we can improve this.

I’m just trying to find a solution for multiple languages. Are u using a particular tool for the time being?

No, I don’t do much ML sites. If I say yes for a multilanguage site, I feel I must provide a complete localization service including URLs, SEO and many many aspects that aren’t simple translation. So I accept to do multilanguage landing pages, that’s easy to handle and also easy top cope with limitations. For a full ML Webflow site… I’ll wait for Webflow to come up with their native feature.

1 Like

Works great except the search result Page. How i can translate the “search” Button or the wording inside the searchbar ? Cant Duplikate this Elements… Thanks a Lot

Hey :slight_smile: Thank you very much for this helpful tool!

For some reason it doesn’t work for me. Do you have any idea why?
I got the code from here: http://multilinguale.webflow.io/

Here is my site: https://illuvis-wir-visualisieren-ihre-vision.webflow.io/?lang=de

You see an example at the beginning.
[[en]]This is English
[[de]]Das ist Deutsch

Very good! And it really helps. But it doesn’t work with rich text at all. Maybe there are ideas on how to make rich text work with multi language?

Thanks, this method helped. But something still doesn’t work - sliders. I assigned them the classes .english and .chinese, but by default, when the page loads, both English and Chinese slider are displayed. When switching to Chinese - English and Chinese are displayed, when switching to English - only English remains.

1 Like

Hi angro!
First of all, thanks a lot for this great solution, it’s about to solve my problems!

Only question is: I have 5 languages (en, it, zh, ru, de), how should I implement the other 3 in the following script?

Thanks again, hope this is possibile!

<!-- Language: Englisch -->
<script>
	$(".english").html(function(i,v) {
    return "[[en]]" + v + "[[it]] <b></b>";});
</script>

<!-- Language: Italian -->
<script>
	$(".italian").html(function(i,v) {
    return "[[it]]" + v + "[[en]] <b></b>";});
</script>

Hey guys,

I just wanted to let you know that Weglot is now fully compatible with Webflow Ecommerce! You can try it out on our demo site: https://www.weglot-translate-wbflow.com/banana-weglot

Eugene

Do you know how it is working with spans inside a paragraph? So when i make a single word bold it creates a text span. Then this whole thing doesnt work anymore…

Hey, thank you for the solution!

Would this work for images too?
I have some svgs I would need in 2 languages.

Hey @itsapug, FYI I don’t know if you tried Weglot but it handles media translations. Just enable it in your Project settings and you will be able to change your media URLs with new ones in each translated language.

1 Like