How style.display="none" and different languages affects SEO?

I'm just starting out with SEO and I have a question: I have a website programmed by me (not Wordpress or similar) that is available in three different languages.

However, the language displayed depends on a javascript when loading the page that collects the browser’s default language. Depending on this, it displays a DIV containing the information in the corresponding language, hiding the other two (via style.display = “none”).

In other words, in a single page code there are all three languages ​​at the same time, but only the one that matches the browser’s language (or English by default) is shown on the screen.

I have looked for information about how can this affect the positioning in Google but I have not yet made a clear conclusion.

At the current stage of the website would be very difficult to implement another system for a multilingual website, like separate URLs for every language.

Will the Google bot understand the structure and index all three languages? Or just the default language? Or worse, none of them? What do you think?

Thanks

Google’s crawlers are sophisticated and generally able to handle JavaScript-based content, including the scenario you’ve described. However, there are a few things to consider:

  • JavaScript rendering: Google may not render JavaScript on every page it crawls, especially if it’s a large website. This means that the hidden content might not be indexed if the crawler doesn’t execute the JavaScript.
  • Content duplication: While having all languages in one file isn’t ideal, it’s unlikely to cause major issues if Google can determine the relevant language for each visitor. However, ensure that each language version is unique and doesn’t have duplicate content.
  • SEO best practices: It’s still recommended to use separate URLs for each language version (e.g., /en/, /es/, /fr/) to avoid potential indexing issues and ensure optimal SEO. This allows for clearer language identification for both crawlers and users.

While it might be difficult to implement a complete language separation at this stage, prioritize making your site’s structure easily understandable for Google. This includes:

  • Using rel=“alternate” hreflang tags: This clearly identifies the different language versions of your content and helps Google understand the relationship between them.
  • Utilizing structured data markup: Schema.org markup can provide additional context for your content, allowing Google to better understand the different language versions.

By taking these steps, you can help ensure that Google effectively indexes all three languages of your site, even with the current JavaScript-based approach.