Localizing Websites with Webflow and Localize

Hey all. I recently wrote a tutorial on how to translate Webflow websites using Localize - https://localizejs.com.

Check it out here: How to easily translate Webflow websites - Localize Integration Tutorial

Feel free to email me at brandon@localizejs.com if you need any help.

11 Likes

Fantastic work :slight_smile: Will you move that tutorial also to Webflow? Or could please @danro or @cyberdave move this and pin to tutorials?

This topic is now pinned. It will appear at the top of its category until it is either unpinned by a moderator, or the Clear Pin button is pressed.

1 Like

Hi, this is a great option to use for multi-language sites and pretty simple and straightforward way to implement. Good job. I have pinned this to Tips & Tricks forum category.

Hello there guys and thanks for this tutorial!

I have implemented this on one of my sites and its working very well besides one thing.
When i change language and want to continue to another page the site goes back to default langauage and i need to redo my choice of language.

Anyone that knows how to fix this?

Cheers!

Daniel and I just solved this problem over email.

If anyone else experiences the language switching back to English, double check that your initialization code matches the one in the tutorial in Step 3, specifically line 6, the “targetLanguage” setting. This line is responsible for remembering the page language across page views.

1 Like

Everyone interested by this system, you need to be aware that it’s a potential SEO catastrophy.

A search engine is not going to see any of the translated content, because it does not use scripts.

Not to mention your content run through another third party server, with possible performance impacts.

I tried to fact-check the above as much as I could. Feel free to show me wrong or incomplete.

EDIT NOTE: Read Brandon’s post behind. I previously stated that there was a risk of rating degrading by search engines but as long as you keep using only localize.js, it’s not going to happen.


Sites localization is a hard task. It’s very often under estimated (as badly price-estimated), and proves to be a nightmare to maintain. Even on platforms who are known to bring cool solutions on many things (Wordpress ie) localization is expensive (yearly paid plugin, nights to set up) and complicated. Requires a lot of clicks, difficult and long to maintain, affects the core of your site making deep changes of anything from a bit delicate to impossible.

On big developed CMS like big Drupal, localized pages very often end up to be duplicates. Make a change of structure in a view in English, make the same amends on the localized page. Not how it’s supposed to work, but close to production reality.


At my studio, on top of thinking/making a tool to manage static pages (the goal is to never touch the static pages Webflow exports, but manage them, with domains, urls etc. For the moment, we use a Drupal for that - because we’re transitioning a big Drupal site into Webflow+Drupal before killing the latter, later - it intercepts everything, check the existence of a static page and displays it). We have a topic about bringing localization to this static content.

Here is where we are (I translate what’s below from a developer I work with, syntax can be weird):

"First, we think it should be based on the universal .po format. It’s the translation standard of the unix world. The principle is a source file containing English as a pivot file ( the pot. ) and one additional file by language (eg fr.po es.po po.po ) .

To manage it, tons of tools exist. From the specialized in publishing ( Poedit available on OS X , http://poedit.net/ ) to utilities to reintegrate modifications to already po translated files.

In the long list of these tools , there is a Python-written suite (and therefore running on OS X ) that is fairly complete and especially contains two utilities , one for extracting a jar file from an HTML source, and the other to produce HTML files, taking for input the English HTML file and a po localization file.

The goal is not to do this every time but to integrate it into our static site tool. Basically the principle
would be:
        1. generate the POT of every pages of the site, copied into fr.po, de.po etc
        2. give the PO files to client for translation (and building a tool to do that online would be a good idea)
        3. get the po files back and store them in a /po directory
        4. then look if a translated page exist before displaying any page
        5. display the adequate page"


I know this is going too far for most Webflow users (I don’t master everything I wrote, myself), but it’s the right occasion to share this. A screen cast has been made to show this in action to me, on my webflow pages: http://arnumeral.fr/partages/663bdba97560c3b834ef7976bf16a22d-vincent.ogv

3 Likes

Hello @vincent,

Thanks for your feedback. Localize isn’t right for everyone. However, I believe it’s the best and easiest localization solution for the majority of Webflow users.

The alternatives to a system like Localize are far too cumbersome for most people, and require a lot of ongoing work and maintenance. The beauty of Localize is really its ease of use.

For those who follow the steps in the tutorial, your rankings will not be degraded by duplicate content, because the translated version of your website do not have unique URLs (therefore there is no duplicate content for Google to find).

There currently is not a straightforward way to index the translated version of your website using Localize, if it’s hosted by Webflow. However, there are some good solutions for this if you export your Webflow HTML and host it on your own server, which it looks like you’re doing. I’ll write up a post on Localize SEO (and add some info to the docs) as soon as possible.

Thanks!
Brandon

4 Likes

Thank you Brandon, I’m updating my post regarding the degrading of the ranking.

And sorry because I didn’t realise you “were” Localize.js. I’d have email you first if I had realised that, of course.

And yes, there’s room for Localize.js, especially around Webflow, because as you said and as I did, Localization has never been a simple problematic to handle.

Localize is BRILLIANT… and TOO simple - there’s no option for manual translation, which could make it universal CMS, maybe very suitable for Webflow.

The solution would be, as just I said, something like external CMS for Webflow, making Webflow only perfect layout engine. So pasting markups instead of text (JS? PHP?), making duplicate pages using Symbols and creating external simple CMS script… (Wordpress with API?)… or creating something as simple as Localize.js with automatic text finding and replacing, but with better SEO attitude (on their own website changing language does not change URL - this is ridiculous) and of course manual translation.

Hi @mmasti,

If you’re looking to manually translate your own phrases, you can do that with Localize.js. Localize.js lets you write your own translations, or you can also order machine translations (for free) or translations from professional translators ($0.10 / word).

Regarding SEO, please review this article:
https://localizejs.com/docs/resources/search-engine-optimization

Thanks,
Brandon

Hi @Brandon (or @BrandonPaton ?),

It seems your tutorial no longer exists on the URL provided in the beginning of this post. Is there any other place where I can find it?

Best,

Hey @guihnz,

Fixed! Here it is: How to easily translate Webflow websites - Localize Integration Tutorial

Thanks,
Brandon

Hello - this is great - does this work for arabic translations too - have a client that wants to.

Cheers

Hello @OvertonGraphics,

Localize supports all major languages, including English > Arabic!

-Brandon

Thanks @Brandon

I’ve read the content and it seems to be quite easy to implement it.

However, as far as I understand, the “hidden” languages won’t be searchable, right? Is there a way to use this Webflow (hosted solution) / Localize.js “integration” considering the SEO issues (as you point out here: https://localizejs.com/docs/resources/search-engine-optimization)?

I was looking to use the subdomains option, so, I’d expect that when clicking in the language link it should redirect to its specific language URL, instead of changing the text in the same page (as your example here: http://localize-website.webflow.com/).

Best,

Hey @guihnz,

SEO would rely on serving a “HTML Snapshot” to search engine bots as described in the article you linked to. There’s currently not a way to do this using the Webflow hosted solution.

However, it’s definitely possible to have separate URLs for each language with some additional custom code. If you’d like help doing that, feel free to email me at brandon@localizejs.com.

The good news is that Google recently announced that the Google bot is beginning to execute Javascript as they crawl the web, which will enable Google to see pages translated by Localize.js (removing the need to serve HTML Snapshots).

Thanks,
Brandon

Superb - Thanks

That is much appreciated

This should be pinned

Thanks again @Brandon.

Hi Brandon - thanks for this - its great - I have followed your instructions and tested it out with arabic - everyhting has translated fine - the only issue is - its always in arabic - even on page load…

How can i get it to be english by deafult?

would really appreciate your help

Thanks

the turn arabic link is halfway down the page jsut under the portfolio links as this is jsut a test for me to use elsewhere on a clients site eventually

http://overtongraphics.webflow.com/

and public editor: https://webflow.com/design/overtongraphics?preview=4267affed08145f6daf9539b1a4a8833

Thanks :smile:

EDIT: it also appears to be permanently arabic now haha on http://overtongraphics.webflow.com/

but ok on http://www.overtongraphics.com/