Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What are the options for making a simple static website multilingual?

I'm setting up a static website which I want to display in two languages.

I can't find a comprehensive overview of the different options (e.g. server-side loading vs front-end loading vs using different folders. What are the advantages of each option (e.g. for SEO, maintainability, scalability etc.)?

Ideally the translations will be stored in separate json files. The main thing I care about is translation - less so the other aspects of i18n and l10n.

For example how might I translate:

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>Welcome</h1>
    <p>Here's a website</p>
    <p>Here's a <a href="https://www.google.com/">Link</a> to language specific Google</p>
    <button>Click here</button>
  </body>
</html>

Some of the many options I've encountered so far:

  • i18next - most standard option. support for loads of frameworks, but not clear which one is appropriate for most basic usage. i18nextify? jquery-i18next?
  • i18js - simple, but for rails?
  • i18n - most popular on npm, but has build status
  • i18n-2 - updated version of above

I feel like i18next is the most standard way to go, but is it suited to a simple site?

like image 891
F. Lumley Avatar asked Mar 28 '19 22:03

F. Lumley


People also ask

What are multilingual websites?

A multilingual website is any website that offers content in more than one language. Examples of multilingual websites might include a Canadian business with an English and a French version of its site, or a blog on Latin American soccer available in both Spanish and Portuguese.

How does a multilingual website work?

A multi-lingual website is a website where the content is written in more than one language. The information displayed in different languages is often the same, but maybe tailored for different audiences. Booking.com is an example of a multi-lingual website as its content is available in 35 different languages.

How to create a multilingual website with different languages?

Place your language switching drop-down in a prominent location on your homepage and every other page of your site. You’ll find multi language websites will have the language switcher in the header or footer of the page. Whatever option you decide to go with for your multilingual site, make sure it’s really easy to find.

How do I build a static website?

With Spaces you can build static sites with HTML, CSS, and JavaScript. Everything you need right in the browser. There are two ways to start building a static website. Building from scratch or using a template.

What are the advantages of a static website?

Static websites are quick and easy to create. It is cheap to host. Static websites are secure. It is fun and you can create awesome sites with HTML, CSS, and JavaScript. HTML, CSS and JavaScript are the basic languages to build any website. Create the structure with HTML.

How do you attract customers to your multilingual website?

Don’t put up a barrier to them buying from your multilingual website — help them access your content in their preferred language. Here’s an excellent example of a company that actually lets visitors choose their preferred language — Uber displays its language switching options in the footer:


Video Answer


1 Answers

For anyone else looking around, I found an overview on this Reddit thread. I'll also explain the option I went with below.

To summarise the thread:

1) Front-End JS (e.g. jquery.i18n)

  • Generally fairly easy to implement
  • They can negatively impact SEO
  • Can increase page weight
  • Website doesn't work for people who don't run JS
  • Not recommended but ok for very small projects

2) Multiple Pages

  • This is easiest to setup, but maintenance becomes a nightmare. Not recommended

3) Server Side (e.g. node-i18n)

  • Because it avoid the disadvantages of front-end mentioned above, this is generally recommended for larger projects

4) Using a build tool like npm scripts or gulp (e.g. static-i18n)

  • Generates separate directories for each language using build scripts
  • Bit of initial set up but easy to maintain and extend
  • Since only static html pages are generated, html code can be safely embedded in the translation json files.

Solution

In the end I went with option 4 using static-i18n. While it took a bit of setting up, it works well for SEO, works for static sites, is easily maintainable, is scalable, and avoids the messiness of front-end dynamic language loading.

like image 170
F. Lumley Avatar answered Jan 06 '23 08:01

F. Lumley