I have a site done with React. On this site, two languages are available: 'en' and 'fr'. Here is how I implement it:
- When the user comes on my site for the first time, I determine the language from its browser and I redirect it to www.mysite.com/fr or www.mysite.com/en.
- The user is also free to change the language or directly access to the URL containing the language (example: www.mysite.com/fr).
- Each time the language change, I store it in the local storage. This way, the user can comeback to www.mysite.com and I will redirect him to the correct URL containing the language (example: www.mysite.com/fr).
- I don't specify 'lang' attribute on 'html' tag in my 'index.html' but when I know the language, I use Javascript to add this attribute dynamically.
- I defined two 'hreflang' in the 'index.html'.
I already noticed two small problems with this implementation:
- When I analyze my site with https://validator.w3.org/, I've got a warning telling me that 'lang' attribute is missing. I guess, this validator doesn't execute the Javascript. Can I considered it as a false positive ?
- The browser extension 'Google Translate' seems to consider www.mysite.com/fr as an English page. I guess the extension doesn't wait enough to see the dynamic update of 'lang' attribute.
Is there is a way to avoid these problems ? Do you see other problems in my implementation ?