Por Que o Chrome Detecta Incorretamente o Idioma da Página: Soluções
Resumo Rápido
Para evitar que o navegador Chrome sugira uma tradução da página, especifique explicitamente o idioma do conteúdo usando o atributo lang na tag <html>:
<html lang="pt-BR">Se a página contiver conteúdo em vários idiomas, anote cada segmento com o atributo lang apropriado:
<p lang="es">¡Hola, mundo!</p>Isso ajudará o Chrome a entender corretamente o idioma do seu conteúdo e evitar sugestões indesejadas de tradução.
Declare o Tipo de Documento e a Codificação de Caracteres
Imediatamente após declarar <!DOCTYPE html>, especifique a codificação de caracteres:
<meta charset="UTF-8">Esses metadados ajudam o Chrome a processar e identificar corretamente o conteúdo da sua página.
A Importância de Cada Atributo
Use meta tags específicas do Google para prevenir sugestões de tradução:
<meta name="google" content="notranslate">Embora essa meta tag não faça parte dos atributos HTML padrão, ela instruí efetivamente o Chrome de que a página não precisa de tradução.
Seja Ainda Mais Claro! Especifique o Idioma com Clareza
Se os métodos anteriores forem ineficazes, informe explicitamente ao navegador usando uma meta tag equivalente ao cabeçalho HTTP Content-Language:
<meta http-equiv="Content-Language" content="pt-BR">Esse método não é tão comumente usado para especificar um idioma quanto o atributo lang, mas ele envia um sinal claro para o navegador.
Verificação Prática
Caso o Chrome continue sugerindo traduções após a publicação do seu site, tente:
- Respirar fundo, relaxar e reiniciar ou atualizar o Chrome.
- Adicionar texto que não requer tradução em um elemento invisível, como um div oculto—o Chrome não sugerirá traduzir o que não está visível.
- Indicar para os elementos de uma forma que evite que eles chamem a atenção do navegador:
<div translate="no">Shhh! Este conteúdo não precisa de tradução!</div>Definindo Limites para o Chrome
Às vezes, é necessário dizer claramente ao navegador o que ele deve fazer, usando a classe notranslate para elementos que devem permanecer inalterados:
<div class="notranslate">Este elemento não requer tradução!</div>Investigue o Que Afeta o Chrome
Se você deseja explorar mais sobre esse tópico, investigue os algoritmos n-gram do Google e entenda o que pode acionar o recurso de tradução do Chrome.
Seu CMS Como Defensor do Idioma
Se você está usando um CMS para gerenciar seu site, consulte as diretrizes para definir tags de idioma fornecidas na documentação do sistema.
Melhoria Contínua
Assim como na culinária, não hesite em experimentar e fazer ajustes até que seu site não sugira mais traduções incorretas—especificamente, não sugerindo quando não necessário.
Visualização
Pensar no navegador Chrome como um turista (🧳) que chegou a uma cidade com sinais multilíngues (🗽) pode ser útil:
Sinais da Cidade: [🇬🇧 Welcome, 🇫🇷 Bienvenue, 🇪🇸 Bienvenido]O Chrome comete um erro:
🧳💭 "Talvez eu esteja na França. Hora de melhorar meu francês!"
🗣️🤖 "Você deseja traduzir a página para o francês?"Realidade—uma cidade multilíngue:
🧳🌐 Muitos idiomas são falados aqui! Um tradutor não é necessário.Solução—instruções claras:
🛑🏷️ *Adicionado o atributo `lang="pt-BR"` ao HTML*
🧳✨ "O inglês é falado principalmente aqui! Nenhuma tradução necessária."O Chrome rejeita a ideia de tradução:
🗣️🤖 "Aproveite seu tempo sem a necessidade de tradução!"Brincando com Campos de Entrada
Os campos de entrada podem levar o navegador a determinar incorretamente o idioma principal da página. Vamos informar o campo de entrada:
<input type="text" lang="pt-BR" translate="no">Analisando Cabeçalhos
Verifique os cabeçalhos HTTP do seu servidor. Eles devem transmitir com precisão as informações de linguagem para o Chrome, incluindo charset e Content-Language.
Recursos Externos—Seu Aliado
Não hesite em consultar materiais fornecidos por criadores de desenvolvimento web e pesquisas de caso. Eles ajudarão você a lidar com os problemas de tradução no seu site. Destaque-se!
Gerenciando o Atributo translate
O atributo translate é sua ferramenta para controlar a tradução de elementos individuais na página:
<p translate="no">Este parágrafo não está disponível para tradução.</p>Recursos Úteis
- Alterando Configurações de Idioma no Chrome e Traduzindo Páginas Web - Ajuda do Google Chrome - encontre informações sobre configurações de idioma no navegador Chrome.
- Compreendendo o Critério de Sucesso 3.1.1: Idioma da Página | WAI | W3C - O W3C explica a importância de usar atributos de idioma em detalhe.
- lang - HTML: Linguagem de Marcação Hipertexto | MDN - guia do MDN sobre como usar o atributo
langem HTML. - JavaScript para Detectar Preferências de Idioma do Navegador - Stack Overflow - dicas para definir preferências de idioma no Chrome usando JavaScript.
- Versões Localizadas de Suas Páginas | Central de Pesquisa do Google | Desenvolvedores do Google - guia do Google sobre como criar versões localizadas de páginas web.
- Informações sobre BCP 47 » Editor RFC - documento oficial descrevendo tags de idiomas BCP 47.