We built an Angular web app that, at initial loading, does a HTTP-request to an API to determine the available languages. Then it uses the first language to set the <html>
's lang
-attribute, so, for example, it looks like this: <html lang="en">
The problem is that at initial load, before the HTTP-request is completed, the html
-tag does not have a lang
attribute and Google Chrome is going to guess (always wrongly) what the language is and shows a "Translate this page" pop-up in the top-right corner. At this time, there isn't even content yet.
We can't set the lang
attribute initially because we don't know the language of the page yet. We only know that after the first HTTP-request is done.
Adding <meta name="google" value="notranslate" />
or <meta name="google" content="notranslate" />
does not prevents the "Translate this page" pop-up from showing up.
How can we make Google Chrome suggesting the right, dynamically set, language to be translated, or prevent the pop-up from showing up at all?