"Translator Bric - The key to multilingual websites is coming soon!" More than a simple translator. +Video 🌍

Custom Brics
1

A little preview video :wink:

Functions

  1. Automatic language recognition:
    • The system detects the language of the visitor’s browser and loads the content of the page accordingly. For example:
    • If the visitor’s browser is French (fr), the page is automatically displayed in French.
    • If the browser’s language is not supported, the system uses English (en) as the default language, for example.

  2. Change language with one click:
    • Visitors can easily switch to another language with the help of language change buttons that can be placed at the top of the page or in the menu or on the page bar. For example:
    • A Spanish visitor can switch the English page to Spanish (es).
    • A Japanese user can switch from the German site to Japanese (ja).

  3. Clean URLs and country codes:
    • The URL is automatically updated based on the selected language to clearly indicate which language and region the visitor is browsing in. Examples:
    • English page: example.com/en
    • German language site: example.com/de
    • Japanese language site: example.com/ja
    • Italian language site: example.com/it
    • This is not only user-friendly, but also makes the page clear to search engines.

  4. Country indication and visual feedback:
    • It also displays the language settings with the country’s flag so that users can easily recognize which language and region they have selected. For example:
    • A French visitor sees the French flag in the language changer menu.
    • A Brazilian user will see the Brazilian flag when switching to Portuguese (pt).

  5. Support for more than 140 languages:
    • The system supports more than 140 languages, including less common languages. Some examples:
    • English (en), Spanish (es), French (fr), Chinese (zh), Russian (ru).
    • Less common languages: Icelandic (is), Zulu (zu), Tamil (ta).

  6. Restore original text:
    • If a visitor wants to see the original text, they can do so with the click of a button.

  7. Language SEO and hreflang attributes:
    • The system automatically adds the appropriate language tags (hreflang) to the web page.

7.The language selection menu currently allows you to manually add more than 80 languages, so you can customize the site’s language settings for visitors from almost anywhere in the world.

It will be available soon… :smiley:

How do you like it?

9 Likes
2

Having lived in Japan for the last 30 years, what I can say is this. I’m a native English speaker. Whenever I visit sites that auto-switch based on browser detection, I tend to mourn a bit because I then need search all over the place to find a link that allows me to choose my preferred language. The most horrible websites provide no means to switch at all, forcing you to use the “auto-detect” language.

Now I did watch the video and I see the solution seems to provide links for the user to manually switch languages. That is good, so long as everyone is nice and adds those links.

But one concern I have is about how switching is done. If I visit a site and it detects I am located in Japan and therefore switches the site to Japanese, I will want to switch it to English. Once I find the tab or button to switch it to English, will it remain in English for ALL PAGES of the site? If not, I see that as a problem. Who wants to manually switch languages on every page in the site you want to browse? But if it’s a one-click switch to English, for all pages I then browse on the site, I think it’s fine. Probably, I would need to do that one-time switch every time I visit the site, but that’s OK, so long as it’s a “one time per session” thing.

And yes, I can read Japanese well enough, but as anyone who speaks two languages knows, you always prefer your native language for the sake of speed and efficiency.

5 Likes
3

Hi @JDW

I think I understand what you’re saying, I’ll try to answer it.

But one concern I have is about how switching is done. If I visit a site and it detects I am located in Japan and therefore switches the site to Japanese, I will want to switch it to English.

It does not detect that you are in Japan, but that the device from which you are visiting the website is the browser of the one you are viewing it from, and what language it is set to. So if you are in Japanese, but your browser is set to English, then the content of the page will appear in English.

Once I find the tab or button to switch it to English, will it remain in English for ALL PAGES of the site?

Buttons, texts, and flags suitable for changing the language are usually placed in a clearly visible place on multilingual sites, so how easily the visitor finds the language change menu depends solely on how well the website creator places it in a clearly visible place.
But my answer to your question is yes, if, for example, your browser’s language setting is Japanese, but you want to read the page in English, and you switch the page to English, then all the pages on the website will appear in English, so you don’t have to switch each page one by one into English.
Also, if you close the website but visit it again, it will still appear in English, because it notes that you last visited it in English.
It will only restart in Japanese if a possible browser error occurs or if you delete the history from the browser settings.

If you look at it, you will see that in the menu where I placed the languages ​​in the video, there are two “buttons”, one is Original, if you press this the page will always appear in the language it was created in.
And there is a “Browser”, which always sets the website to the language your browser is set to.

Also, it is extremely easy to use the whole thing, if you have a ready-made website and you want to add, say, 5 languages, even if you do it slowly, you will have it in 2-3 minutes at most.

But when the brick appears, I will make a video of it.

I hope I managed to describe everything in a comprehensible way and that you got answers to your questions, but if something is not clear, feel free to say so.

4 Likes
4

Perfect!

Wonderful, thank you!

3 Likes
5

Looks great! A few questions:

  1. Is switching between languages only possible by clicking the language button, or can I also change the language directly by modifying the URL? For example, if I navigate to sitename.com/de in the browser and manually change /de to /fr, will the language switch?

  2. If I only want the language button to show 4 languages (my target customer group), I can limit it to .com, .de, .fr, and .nl. All other languages will not be available, correct?

  3. I was experimenting with browser language detection for my site and observed how Apple handles this on their website. They detect the browser’s language and ask the visitor whether they want to continue in their preferred language, stay in English, or select another language. I found this approach to be very user-friendly.

  4. I compared how Apple handles this, and they use a structure similar to what you’ve created. For example, if you’re on sitename.com/en and navigate to the “About” page, the link will be sitename.com/about. When switching to German, it changes to sitename.com/de/about.

Now, the big question: How does this impact SEO and sitemaps? how will google handel this? did you tested this?

6

Hi @sandy

The answer to your first question is no, you cannot rewrite the language in the url part, or you can, but it will not change.

I created the language change buttons so that you can see in the video how many countries can be added to the language selection menu.
Everyone creates as much as they want, if you want, you just add 2-3-4 etc. Everyone as much as they want.
But I will show this in detail in a video when the brick is released.

The answer to your third question is, I thought about it, but I couldn’t decide, and over time it will become clear whether there will be a need for it or not, and maybe it can even be optionally introduced during a later update.

The fourth observation is that when I changed the language in the video to English, to the Original language, it did not say example.com/en/about because that is the original language of the page. It doesn’t display the country code in the original language, and I don’t want to change that, at least at the moment.

The answer to the big question is yes, I tested it. It automatically creates hreflang tags in the source code of the page, so search engines perceive the website as a multilingual page. But obviously it takes some time for the Google console to detect everything properly.

CleanShot 2025-01-07 at 08.55.38

1 Like
7

Great thanks for your clarification, the sitemap looks good as well,
what about alt text of a picture, or title tags, or are the translates as well?

8

Do you mean whether the translation changes in the source code or not?

9

yes, so i have a alt text at a picture saying a word in english and if i change
to german it wil be german?

10

Is that what you meant? How does the language change in the source code? If so, you know that too. I just switched to Chinese.

CleanShot 2025-01-07 at 10.38.30

11

That looks absolutely awesome!!

12

Hi @Mattheus

Thank you, I hope everyone who uses it will like it. :wink:

13

Do you have an actual live demo page up and running?

1 Like
14

Hi @Jannis

Hi. There is currently no live demo site. But everything works as you can see in the video.

15

Great that the title is changed, but I mean something like this:

<img src="alt-tag-image-title-difference.png" alt="image alt tag vs title attribute" title="Understand the image alt tag and image title attribute for SEO and UX.">

The name of the source .png won’t change—that I understand :slightly_smiling_face:.
But will the alt tag and title tag also been translated as well?

16

It doesn’t translate the title of the image, if that’s what you meant.
Why should you translate it?
It has nothing to do with search engine optimization.

But command me, I wrote the code for it, now it translates it too :wink:

CleanShot 2025-01-08 at 10.52.46
CleanShot 2025-01-08 at 10.52.46746×497 180 KB

2 Likes
17

That’s great ! A good solution for multilingual sites althgouh the translation depends on Google which is not always very accurate. Depends on the site content.

My question is if it is possible to display country codes instead of flags. Flags are a crime against design ( :joy:) and we usually prefer to display a 2 letters code.

Is it possible ?

1 Like
18

Hello @svimic

The flags were made according to the international ISO standard, if they are beautiful if not :wink: (I note that I did not make them)

The answer to the question is yes, in this case we do not enter the country name, but the country identifier instead, and the automatic flags are not added. :slightly_smiling_face:

19

wou, great work!!! THANKS
I would love to see a site live as well, digging in source codes is nice :slight_smile:

20

There is currently no live demo site. I might make one someday, but not at the moment.

But a few tidbits… :slightly_smiling_face:
Translates the alt and title attributes of images.
Translates form placeholder texts.
Translates ARIA attributes (aria-label).
Translation of metadata (description, keywords, etc.).
Translation of tooltips (title and data-bs-original-title attributes).

2 Likes