O atributo lang do HTML especifica o idioma do conteúdo textual usado em uma página web. Ele é geralmente usado para sinalizar claramente qual é o idioma da página e evitar qualquer confusão.

Os motores de busca usam o atributo lang para retornar resultados específicos de idioma para o pesquisador, e ele também sinaliza para o motor de pronúncia dos leitores de tela para mudar para outro idioma.

Este artigo ajudará você a entender a tag lang no HTML e sua importância, o que ela faz, como implementá-la em seu site e se ela impacta o SEO?

Pronto? Vamos começar.

O que é o Atributo Lang do HTML?

O atributo lang do HTML é usado para determinar o idioma do texto utilizado em qualquer página da web. O propósito principal deste atributo é sinalizar o idioma do documento principal.

É também utilizado por leitores online que alteram idiomas para exibir a pronúncia e o sotaque corretos do conteúdo da página da web.

A tag de idioma HTML é suportada por navegadores web comumente usados como Chrome, Internet Explorer, Firefox, Safari e Opera.

suporte do navegador ao atributo lang do html

Aqui está a sintaxe do atributo lang do HTML:

<html lang="código_do_idioma">

Na sintaxe acima, language_code é usado para especificar o código de idioma ISO.

Por exemplo, se o idioma do conteúdo for inglês, então o código do idioma deve ser “en”:

<html lang = "en">

Da mesma forma, se o conteúdo estiver em francês, o código do idioma deve ser:

<html lang = "fr">

No HTML 5, o atributo lang pode ser usado com qualquer elemento HTML como <p> e <h1>.

Por exemplo, se você tem uma página da web cujo conteúdo está escrito em 4 idiomas diferentes - Inglês, Francês, Russo e Espanhol, então os códigos de idioma corretos podem ser especificados assim:

<html lang="pt-BR"> ...
<body>
<p>Este parágrafo está em inglês.</p>
<p html lang="fr">este parágrafo está em francês</p>
<p html lang="ru">este parágrafo está em francês</p>
<p html lang="es">este parágrafo está em espanhol</p>
</body> </html>

No código acima, os motores de busca podem claramente entender o idioma de quatro parágrafos diferentes e exibi-los no SERP sempre que apropriado.

Além disso, leitores de tela podem selecionar o idioma correto e a pronúncia para melhor acessibilidade para usuários com deficiência visual.

Por que o Atributo Lang do HTML é Importante e Útil?

O atributo lang HTML é crucial porque ajuda motores de busca como Google, Bing, Yandex e outros a retornar resultados específicos de idioma na SERP.

motores de busca
Fonte da imagem: Reliablesoft

Se você tem várias versões de uma página da web para diferentes regiões ou idiomas, você deve informar aos motores de busca sobre essas versões. Isso ajudará os motores de busca a exibir a melhor versão do seu site com base no idioma ou localização deles.

Aqui estão algumas das principais razões pelas quais a tag lang do HTML é útil:

  • Isso ajuda os motores de busca a entenderem o idioma correto da página da web. Isso melhora a qualidade dos resultados de busca porque os motores de busca podem retornar resultados com base nas preferências linguísticas do pesquisador.
  • Extensões de navegador e outros softwares, como ferramentas de tradução, podem usar a tag lang para exibir as informações no idioma correto.
  • As tags de idioma também permitem variar a estilização do conteúdo por idioma. Por exemplo, você pode definir uma fonte específica para um determinado idioma. Além disso, os agentes de usuário podem fazer seleções automáticas de fonte com base no idioma do documento.
  • Leitores de tela, sintetizadores de voz e tradutores de Braille usam o atributo lang para produzir saída a partir do texto. Em países como o Reino Unido, o governo impõe o uso de tags lang corretas de acordo com as Diretrizes de Acessibilidade para a Web do W3C.

O Atributo Lang do HTML Afeta o Seu SEO?

Este atributo de idioma HTML não impacta o SEO porque os principais motores de busca, como o Google e o Bing, não usam essa tag para filtrar resultados de pesquisa com base em idioma ou localização.

O Google utiliza a hreflang tag para determinar a localização e o idioma do seu conteúdo.

Aqui está a sintaxe da tag hreflang:

<link rel="alternate" hreflang="código_do_idioma" href="url_da_página"/>

Ou

<link rel="alternate" hreflang="en-gb">

Onde en se refere ao inglês e gb se refere ao Reino Unido. Isso significa que a página é para usuários de língua inglesa no Reino Unido.

Da mesma forma, o Bing usa a meta tag “content-language” para entender o idioma do documento.

Aqui está a sintaxe da meta tag “content-language”:

<meta http-equiv="content-language" content="">

Ou

<meta http-equiv="content-language” content=”en-us”>

Onde en refere-se a inglês e us refere-se aos Estados Unidos. Isso significa que a página é para usuários que falam inglês nos Estados Unidos.

Portanto, o atributo lang do HTML não impacta o SEO. No entanto, você sempre deve usar a tag lang porque ela afeta a experiência do usuário e ajuda a tornar o seu site amigável ao W3C.

Ao lidar com sites multilíngues, você deve usar as tags hreflang e content-language para o Google e Bing, respectivamente, dependendo das suas localizações-alvo e motores de busca.

Como Implementar o Atributo Lang no Seu Site

Você pode adicionar a tag lang em uma página da web editando o código-fonte.

Você deve sempre usar o elemento HTML como uma declaração para definir o idioma porque o HTML herda todos os outros elementos em uma página.

atributo lang html no código-fonte

Por exemplo, se você deseja definir o francês como o idioma de toda a página da web, então use esta tag:

<html lang="fr">
<body>
<p>Esta é uma página da web escrita em inglês.</p>
<h1>A tag de título h1</h1>
<image src=””>
</body>
</html>

html lang francês

Você também pode especificar o idioma de diferentes parágrafos dentro de um documento. Neste caso, você precisa usar várias tags HTML lang juntas.

Aqui está um exemplo de uma página tendo dois idiomas diferentes:

<html lang="pt-BR">
<body>
<p>Este é um parágrafo escrito em inglês.</p>
<h1>...</h1>
<image src=””>
<p html lang="fr">este parágrafo está em francês</p>
<h1>...</h1>
<image src=””>
</body>
</html>

Além disso, se você quiser especificar o idioma de algum conteúdo quando não houver marcação, use span, bdi ou div.

Aqui está um exemplo:

<p>Diga olá em coreano como <span lang="ko">안녕하세요</span>.</p>

Como Escolher Códigos de Idioma

Você deve sempre adicionar o atributo lang do HTML para definir o idioma padrão de uma página da web.

Navegadores, motores de busca e outros aplicativos podem usar essas informações para exibir informações aos usuários da maneira mais apropriada.

Ao lidar com vários idiomas, você precisa de ajuda para escolher os códigos corretos para cada localização.

Aqui está a lista completa dos códigos de idioma ISO para cada localização:

Idioma Código ISO
Abkhaziano ab
Afar aa
Africâner af
Akan ak
Albanês sq
Amárico am
Árabe ar
Aragonês an
Armênio hy
Assamês as
Avaric av
Avestan ae
Aymara ay
Azerbaijano az
Bambara bm
Bashkir ba
Basco eu
Bielorrusso be
Bengali (Bangla) bn
Bihari bh
Bislama bi
Bósnio bs
Breton br
Búlgaro bg
Birmanês my
Catalão ca
Chamorro ch
Checheno ce
Chichewa, Chewa, Nyanja ny
Chinês zh
Chinês (Simplificado) zh-Hans
Chinês (Tradicional) zh-Hant
Chuvash cv
Cornish kw
Córsego co
Cree cr
Croata hr
Tcheco cs
Dinamarquês da
Divehi, Dhivehi, Maldiviano dv
Holandês nl
Dzongkha dz
Inglês en
Esperanto eo
Estoniano et
Ewe ee
Feroês fo
Fijiano fj
Finlandês fi
Francês fr
Fula, Fulah, Pulaar, Pular ff
Galician gl
Gaélico (Escocês) gd
Gaélico (Manx) gv
Georgiano ka
Alemão de
Grego el
Greenlandic kl
Guarani gn
Gujarati gu
Crioulo Haitiano ht
Hausa ha
Hebraico he
Herero hz
Hindi hi
Hiri Motu ho
Húngaro hu
Islandês is
Ido io
Igbo ig
Indonésio id, in
Interlingua ia
Interlingue ie
Inuktitut iu
Inupiak ik
Irlandês ga
Italiano it
Japonês ja
Javanês jv
Kalaallisut, Groenlandês kl
Kannada kn
Kanuri kr
Caxemira ks
Cazaque kk
Khmer km
Kikuyu ki
Kinyarwanda (Ruanda) rw
Kirundi rn
Quirguiz ky
Komi kv
Kongo kg
Coreano ko
Curdo ku
Kwanyama kj
Lao lo
Latim la
Letão (Letão) lv
Limburguês (Limburger) li
Lingala ln
Lituano lt
Luga-Katanga lu
Luganda, Ganda lg
Luxemburguês lb
Manx gv
Macedônio mk
Malagasy mg
Malaio ms
Malaiala ml
Maltês mt
Maori mi
Marathi mr
Marshalês mh
Moldavo mo
Mongol mn
Nauru na
Navajo nv
Ndonga ng
Northern Ndebele nd
Nepalês ne
Norueguês no
Norueguês bokmål nb
Norueguês nynorsk nn
Nuosu ii
Ocitano oc
Ojibwe oj
Antigo Eslavo Eclesiástico, Antigo Búlgaro cu
Oriya or
Oromo (Afaan Oromo) om
Ossétio os
Pāli pi
Pashto, Pushto ps
Persa (Farsi) fa
Polonês pl
Português pt
Punjabi (Oriental) pa
Quechua qu
Romanche rm
Romeno ro
Russo ru
Sami se
Samoano sm
Sango sg
Sânscrito sa
Sérvio sr
Sérvio-Croata sh
Sesotho st
Setswana tn
Shona sn
Sichuan Yi ii
Sindhi sd
Cingalês si
Siswati ss
Eslovaco sk
Esloveno sl
Somali so
Ndebele do Sul nr
Espanhol es
Sundanês su
Swahili (Kiswahili) sw
Swati ss
Sueco sv
Tagalog tl
Taitiano ty
Tajik tg
Tâmil ta
Tártaro tt
Telugu te
Tailandês th
Tibetano bo
Tigrinya ti
Tonga para
Tsonga ts
Turco tr
Turcomeno tk
Twi tw
Uigur ug
Ucraniano uk
Urdu ur
Usbeque uz
Venda ve
Vietnamita vi
Volapük vo
Wallon wa
Galês cy
Wolof wo
Frisão Ocidental fy
Xhosa xh
Iídiche yi, ji
Iorubá yo
Zhuang, Chuang za
Zulu zu

Você pode selecionar um código de idioma com base na sua localização alvo e adicioná-lo à página da web.

Se você deseja encontrar subtags para idiomas regionais, você pode usar uma ferramenta de Busca de Subtags de Idioma.

Digite o código de localização primário do seu local alvo, e a ferramenta buscará automaticamente todas as subtags relacionadas a essa localização.

Aqui está um exemplo:

subtags de idioma

Erros Comuns ao Implementar Tags de Idioma HTML

Aqui estão alguns dos erros mais comuns cometidos ao usar o atributo lang do HTML:

  • Usar um código de idioma incorreto. Por exemplo, usar ch para China, em vez de zh.
  • Erros comuns ao escrever a sintaxe da tag lang. Por exemplo, escrever <html lan="en"> em vez de <html lang="en"> para inglês e ou <html lang="tu"> em vez de <html lang="tr"> para turco.
  • Adicionar códigos de país incorretos, como usar o código do país antes do idioma. Por exemplo, <html lang="bn-in”> está correto, enquanto <html lang="in-bn”> está incorreto. O idioma deve sempre preceder o código do país. Para ver a lista completa de códigos de país, você pode visitar este recurso.

Conclusão

O atributo lang do HTML é um elemento vital do seu site. Não importa se você atende usuários de diferentes localizações ou não; usar atributos lang do HTML válidos é crucial para melhorar a acessibilidade e a experiência do usuário do seu site.

Se você está procurando melhorar o SEO do seu site, então certifique-se de usar as tags hreflang e content-language, respectivamente.

Espero que este guia de idioma HTML tenha ajudado a responder às perguntas frequentes relacionadas à tag de idioma HTML.

Feliz marcação!