Acho que uma das melhores formas é usar o link
, como:
<link rel="alternate" hreflang="en-gb" href="http://en-gb.site.com" />
<link rel="alternate" hreflang="pt-br" href="http://pt-br.site.com" />
Isso já vai fazer com que os buscadores já mostrem o conteúdo na linguagem certa, na maioria dos casos.
Mas, obviamente isso não é suficiente. Para obter a linguagem do usuário, uma boa maneira é obter o window.navigator.language
, então usar algum tipo de matcher de BCP-47, assim se o resultado do navegador for en-us
ele iria obter o idioma mais próximo disponível, o en-gb
, por exemplo. Se não houver um idioma próximo cairá num padrão, que é o que você define.
Esta é a primeira vez que tento fazer um site com multiplos idiomas, então o que vou escrever aqui é o que estou fazendo, mas não foi "testado em produção" e talvez haja outros problemas nesse método.
Estou usando o GopherJS, Golang, portanto apenas copiei o que uso e tentei simplificar, mas será necessário achar funções equivalentes para Javascript.
O que tenho feito é simplesmente:
<div data-text="welcome"></div>
Então, ao iniciar a página se obtêm a linguagem do cliente, usando o window.navigator.language
, e existe um dicionário e a lista de idiomas:
var Idiomas = []language.Tag{language.English, language.BrazilianPortuguese}
var Dicionario = texts{
"welcome": {
"Welcome",
"Bem-vindo",
},
"another-text": {
"Another text",
"Outro texto",
},
}
Agora, para saber qual conteúdo exibir, eu utilizo o text/language
, você deverá achar algum outro para o Javascript. Dessa forma simplesmente se torna:
var idiomaEscolhido string
// Obtêm o idioma do subdominio, se existir
subdominio := strings.Split(js.Global.Get("location").Get("host").String(), ",")
if len(subdominio) > 1 && subdominio[0] != "meusite" {
idiomaEscolhido = subdominio[0]
}
// Obtêm o idioma do navegador, se não há definido até então
if idiomaUsuario = "" {
idiomaUsuario = js.Global.Get("navigator").Get("language").String()
}
// Encontra o idioma mais próximo
_, index := language.MatchStrings(language.NewMatcher(AvailableLanguages), lang)
O index
representa 0
para language.English
e 1
para language.BrazilianPortuguese
. Primeiro usamos o idioma do subdominio (como en-us.meusite.com
), mas se não existir um subdominio (como meusite.com
) iremos usar o idioma do navegador. Então, quando carregar a página basta fazer um:
for _, el := range t.QuerySelectorAll("[data-text]") {
text, ok := Dicionario[el.GetAttribute("data-text")][index]
if !ok == "" {
logs.Warn("Não encontramos textos para " + el.GetAttribute("data-text"))
}
t.SetText(el, text)
}
A ideia deste código é obter todos os data-text
e substituir. Então, se houver data-text="welcome"
ele deve pegar o texto que está no mapa do dicionario
. Então, o dicionario["welcome"][0]
será o inglês, e o dicionario["welcome"][1]
será o português.
Isso tem algumas limitações, como formatações de datas ou plurais. Por exemplo, no Brasil, usamos DD/MM/AAAA
, enquanto em outros lugares é MM/DD/AAAA.
Uma maneira de mitigar isso é usando um padrão internacional, mas isso pode ser estranho em alguns casos.
Já no lado da performance, há como mitigar o impacto. Uma vez que você tem que encontrar todos os data-text
e então realizar a inserção do texto, você pode usar o HTMLTemplateElement (o <template>
) ou o HTMLSlotElement (o <slot>
). Esses dois elementos não são renderizados, exceto quando iniciados. Isso indica que todos os data-text
dentro dele não será traduzido e não será obtido. Então, a cada vez que for exibir um template
terá que traduzir o texto contido nele.
Isso reduz o impacto, já que apenas o que foi iniciado será traduzido. Então, apenas o que o usuário ver será traduzido, não perderá tempo traduzindo aquilo que o usuário não vai ver.
Já na parte do SEO, você pode realizar o mesmo do JS no lado do servidor. O objetivo aqui é simples. Quando o usuário acessar en-us.site.com
o bot já vai ver o conteúdo em inglês, então todos os data-text
já vão estar preenchidos antecipadamente, mesmo que o cliente não tenha o Javascript.
Para isso, é possível criar, no meu caso, um http.Handle
, nele irá executar um código usando o htmlquery
, que usa o XPATH. Então, cria um arquivo index_en_us.html
e index_pt_bt.html
, ambos tem o conteúdo os data-text
já preenchido e já previamente armazenado.
Quando o usuário acessar en-us.site.com
ele será servido por index_en_us.html
. Porém, se ele clicar em "Português", os efeitos serão imediatos e não precisará esperar uma requisição para o pt-br.site.com
, já que a tradução também pode ser feita no cliente.
Caso utilize o NodeJS poderá fazer a mesma coisa, talvez até reutilizar o código do cliente no servidor.
Quando o usuário acessar a página padrão, site.com
, ele será servido com o index_en_us.html
. Porém, o conteúdo será traduzido no lado do cliente, baseado no idioma do navegador.
Você também poderia ler o cabeçalho de Accept-Language
, no servidor, e dar um conteúdo com o melhor idioma. Porém, muitos CDNs (como o CloudFlare) não respeitam o Vary
. Então, mesmo que você retorne um cabeçalho de Vary: Accept-Language
, para indicar que o conteúdo é outro dependendo do Accept-Language
, eles continuam dando o mesmo resultado para qualquer requisição. Por isso, eu preferi por enviar o conteúdo padrão e o cliente, no Javascript, traduzir. A tradução no lado do cliente é positiva por ser imediata, então o usuário pode alternar o idioma quando quiser, sem ter que esperar.