O que é hreflang: atributo HTML para sites mul­ti­lín­gues

Se você pretende ter um site in­ter­na­ci­o­nal e dis­po­ni­bi­lizá-lo em outros idiomas, terá que se en­car­re­gar de várias tarefas, incluindo a oti­mi­za­ção de versões para os me­ca­nis­mos de busca. Também será preciso adotar medidas de SEO es­pe­cí­fi­cas para cada idioma ou país, para que os crawlers dos me­ca­nis­mos de busca possam ca­te­go­ri­zar cor­re­ta­mente as di­fe­ren­tes versões lin­guís­ti­cas do mesmo site e exibi-las para o público apro­pri­ado. Um dos recursos de SEO mais eficazes para sites mul­ti­lín­gues é o hreflang attribute (atributo hreflang).

O que é hreflang?

Em dezembro de 2011, o Google in­tro­du­ziu o atributo hreflang como uma solução simples e eficaz para indicar ao próprio mecanismo de busca as relações entre as versões al­ter­na­ti­vas de um site. O hreflang attribute sinaliza para os crawlers do mecanismo de busca que o conteúdo da página em questão é dis­po­ni­bi­li­zado em di­fe­ren­tes idiomas. Para isso, você precisa inseri-lo dentro de um elemento de link no documento HTML, e incluir os res­pec­ti­vos códigos de idioma. Por exemplo, para assinalar uma página em língua espanhola, você deve usar o código de idioma “es”. Nesse caso, o elemento HTML completo ganha a seguinte estrutura:

<link rel="alternate" hreflang="es" href="Website URL" />

Se esse elemento for inserido, digamos, em uma página em inglês, o mecanismo de busca au­to­ma­ti­ca­mente en­ca­mi­nhará, para a versão em espanhol, os vi­si­tan­tes lo­ca­li­za­dos em países de língua espanhola, o que pode ser de­ter­mi­nado pelo endereço IP.

O atributo hreflang também pode ser usado para iden­ti­fi­car variações lin­guís­ti­cas de um mesmo idioma. Nesse caso, basta com­ple­men­tar o atributo com o código da região ou país desejado (hreflang country code). Assim, também po­de­ría­mos fazer dis­tin­ções entre usuários situados na Espanha ("hreflang="es-ES") e no México ("hreflang="es-MX"), por exemplo. Para di­fe­ren­ciar variantes do português, podemos utilizar pt-BR (Brasil) e pt-PT (Portugal). Códigos de países para hreflang são definidos pelos padrões ISO 639 e ISO 3166.

Re­le­vân­cia do hreflang para o SEO

O principal motivo para se utilizar atributos como canonical e hreflang é evitar que sites mul­ti­lín­gues sejam con­si­de­ra­dos de conteúdo duplicado. É comum que ope­ra­do­res de sites tentem atender a diversos mercados ela­bo­rando versões al­ter­na­ti­vas, cujo conteúdo não apresenta grandes di­fe­ren­ças, com exceção da tradução. Em países que falam o mesmo idioma, a situação é ainda mais com­pli­cada: a não ser por umas poucas al­te­ra­ções para atender a di­fe­ren­ças culturais ou regionais (vo­ca­bu­lá­rio, moeda, in­for­ma­ções de contato etc.), versões carregam conteúdos ba­si­ca­mente idênticos. Já que essas versões costumam usar o mesmo domínio, uma indicação clara é im­por­tante, para evitar que me­ca­nis­mos de busca emitam clas­si­fi­ca­ções negativas.

Enquanto o atributo canonical indica que um certo URL cor­res­ponde à versão principal, excluindo da indexação todas as versões al­ter­na­ti­vas, o atributo hreflang sinaliza a versão da página que deve ser apre­sen­tada a um de­ter­mi­nado público-alvo (idioma e/ou país) nos re­sul­ta­dos das pesquisas. Portanto, essa marcação HTML é fun­da­men­tal a quem pretende dis­po­ni­bi­li­zar conteúdo mul­ti­lín­gue e tornar um site ver­da­dei­ra­mente in­ter­na­ci­o­nal. Mesmo que o atributo não in­flu­en­cie di­re­ta­mente a clas­si­fi­ca­ção dos me­ca­nis­mos de busca, seu uso correto compensa a longo prazo, pois tanto os crawlers quanto os usuários obterão melhor acesso ao seu site, a depender da lo­ca­li­dade.

Estrutura do hreflang

Hreflang tags baseiam-se no elemento de link HTML. O elemento de link <link /> é um elemento vazio, que serve apenas para associar atributos ao URL es­pe­ci­fi­cado. Esse elemento deve ser usado dentro da seção head e quantas vezes for ne­ces­sá­rio. Para vincular di­fe­ren­tes versões de um idioma com hreflang, além do hreflang attribute, são ne­ces­sá­rios os dois atributos: rel e href. Cada um deles tem uma função par­ti­cu­lar:

• rel: rel es­pe­ci­fica as relações entre o documento atual e o documento vinculado. O valor alternate informa ao mecanismo de busca que o documento externo contém uma versão al­ter­na­tiva do site.
• hreflang: o atributo hreflang em si iden­ti­fica o idioma do documento vinculado, podendo também, op­ci­o­nal­mente, indicar o país em que ele é mais relevante. No site lingoes.net, você encontra a lista de todas as com­bi­na­ções possíveis.
• href: o atributo href nor­mal­mente es­pe­ci­fica o URL da versão no idioma al­ter­na­tivo.

Observe, abaixo, um exemplo ilus­tra­tivo de uso do hreflang:

<link rel="alternate" hreflang="Language code-country code" href="Website URL" />

Se não for feita uma atri­bui­ção correta das versões de idioma, é o ranking que decide qual delas será exibida a cada visitante. Em con­sequên­cia disso, você pode perder possíveis leitores logo nos primeiros segundos, caso eles sejam di­re­ci­o­na­dos à versão errada. Contudo, o Google oferece a opção "x-default", que permite amenizar essa situação. Esse elemento indica ao mecanismo de busca que o URL linkado é a solução padrão (default) para todos os usuários para quem não existe uma versão de idioma es­pe­cí­fica. Por exemplo:

<link rel="alternate" hreflang="x-default" href="URL of the “default” page" />

Como im­ple­men­tar o hreflang

Existem três jeitos de im­ple­men­tar hreflang tags: o mais comum é incorporá-las na seção head do res­pec­tivo documento HTML. Para do­cu­men­tos que não são em formato HTML (por exemplo, um arquivo PDF), o elemento pode ser incluído no cabeçalho HTTP. Por último, há também a opção de in­cor­po­rar atributos de idioma ou país no sitemap.

Em princípio, in­cor­po­rar um cabeçalho HTTP funciona de acordo com o mesmo esquema, pois nele também é preciso re­fe­ren­ciar todas as versões de idiomas exis­ten­tes. Apenas a sintaxe é li­gei­ra­mente diferente:

Link: <http://exampledomain.com/es/downloads/manuals.pdf/>; rel="alternate"; hreflang="es"

Por isso, prin­ci­pal­mente se você está lidando com um grande projeto de site in­ter­na­ci­o­nal, incluir o atributo hreflang em um sitemap XML é mais eficaz do que fazer as marcações em cada página in­di­vi­dual. Pois, se seu site possui um grande volume de conteúdo mul­ti­lín­gue, será re­la­ti­va­mente tra­ba­lhoso fazer a im­ple­men­ta­ção em HTML da forma con­ven­ci­o­nal. Em um sitemap, também é preciso listar uma a uma todas as versões de idioma, inserindo o res­pec­tivo URL. Além disso, cada URL é es­pe­ci­fi­cado por um elemento xhtml:link, que re­fe­ren­cia as outras versões dis­po­ní­veis:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
    xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <url>
        <loc>http://exampledomain.com/</loc>
        <xhtml:link
            rel="alternate"
            hreflang="en"
            href="http://exampledomain.com/"
        />
        <xhtml:link
            rel="alternate"
            hreflang="it"
            href="http://exampledomain.com/it/"
        />
        <xhtml:link
            rel="alternate"
            hreflang="es"
            href="http://exampledomain.com/es/"
        />
        <xhtml:link
            rel="alternate"
            hreflang="de"
            href="http://exampledomain.com/de/"
        />
    </url>
</urlset>

Você deve repetir a tag <url> seguindo o mesmo padrão a cada versão da sua página mul­ti­lín­gue.

Há uma pro­pri­e­dade do hreflang attribute que é fun­da­men­tal para com­pre­en­der o fun­ci­o­na­mento dele: ele vincula dois ou mais do­cu­men­tos de forma bi­di­re­ci­o­nal, e não em uma só direção, como no caso de um en­ca­mi­nha­mento. Ou seja, não basta que a página em inglês tenha um link hreflang para a versão em espanhol, se esta não apontar também para a versão em inglês. Só quando a marcação hreflang HTML é incluída em todos os do­cu­men­tos, em todas as direções (versões de idioma) exis­ten­tes, é que o mecanismo de busca pode re­co­nhe­cer a estrutura do site e adaptar os re­sul­ta­dos de busca para os usuários.

Assim sendo, o seguinte exemplo de código hreflang para o site exampledomain.com – com versões em inglês, italiano, espanhol e alemão – pre­ci­sa­ria ser inserido no cabeçalho de todos os quatro do­cu­men­tos HTML:

<link rel="alternate" href="http://exampledomain.com/" hreflang="en" />
<link rel="alternate" href="http://exampledomain.com/it/" hreflang="it" />
<link rel="alternate" href="http://exampledomain.com/es/" hreflang="es" />
<link rel="alternate" href="http://exampledomain.com/de/" hreflang="de" />

Erros fre­quen­tes ao im­ple­men­tar hreflang

Os exemplos de hreflang para HTML que apre­sen­ta­mos acima mostram que im­ple­men­tar uma atri­bui­ção au­to­má­tica de vi­si­tan­tes em sites mul­ti­lín­gue não é nenhum bicho de sete cabeças. Porém, não devemos su­bes­ti­mar os esforços e o potencial de erros que podem ocorrer durante a inserção das inúmeras re­fe­rên­cias cruzadas. Estes erros podem ser pequenos ou grandes, às vezes afetando apenas páginas in­di­vi­du­ais, mas também podem com­pro­me­ter a fun­ci­o­na­li­dade do hreflang em todo o site. Por isso, é bom ficar atento aos erros mais fre­quen­tes:

hreflang não im­ple­men­tado no nível do URL

Já que hreflang tags são sempre vin­cu­la­das a um URL es­pe­cí­fico, elas também devem sempre ser incluídas nesse nível. Ou seja: se você associar o atributo somente ao URL inicial das di­fe­ren­tes versões lin­guís­ti­cas, a atri­bui­ção au­to­má­tica de vi­si­tan­tes se aplicará somente a essas páginas iniciais, e não ao site inteiro. Portanto, você terá o trabalho de inserir o elemento de link em cada uma das páginas ou URLs mul­ti­lín­gue, ou então trabalhar com o método al­ter­na­tivo de sitemap acima men­ci­o­nado.

Uma ou mais versões de idioma não re­fe­ren­ciam a si mesmas

Muitos ope­ra­do­res de sites assinalam cor­re­ta­mente os URLs das outras versões com o hreflang attribute, porém se esquecem de que cada página também deve re­fe­ren­ciar a si mesma. Nesse caso, a estrutura de links fica in­com­pleta e não pode ser in­ter­pre­tada pelo Google ou por outros me­ca­nis­mos de busca.

Também não deixe de definir uma página padrão (default), uti­li­zando a tag hreflang x-default, para apro­vei­tar to­tal­mente os po­ten­ci­ais de oti­mi­za­ção.

Códigos ISO in­cor­re­tos

Na hora de incluir códigos de países e idiomas, alguns ope­ra­do­res de sites acabam sendo criativos demais. Isso ge­ral­mente não dá certo e faz com que as hreflang tags inseridas não funcionem. Por exemplo: a com­bi­na­ção "en-uk" parece apro­pri­ada para uma página com conteúdo voltado a usuários do Reino Unido. Contudo, o código correto é "en-gb". Por esse motivo, re­co­men­da­mos que você confira aten­ta­mente os códigos de países do padrão ISO 639-1.

Re­fe­rên­cia a URLs de­sa­tu­a­li­za­dos ou ine­xis­ten­tes

Uma causa comum de erros em hreflang tags é a indicação de URLs ine­xis­ten­tes. Isso acontece, sobretudo, quando marcações são in­te­gra­das au­to­ma­ti­ca­mente em todas as sub­pá­gi­nas de um site, mas nem todas essas sub­pá­gi­nas estão dis­po­ní­veis em todos os idiomas ofe­re­ci­dos. URLs ficam de­sa­tu­a­li­za­dos sempre que você faz al­te­ra­ções es­tru­tu­rais e não as reflete nos elementos de links.

Uso con­tra­di­tó­rio das tags canonical e hreflang

Muitos ope­ra­do­res de sites in­ter­na­ci­o­nais fazem uso da tag canonical para impedir que os crawlers dos me­ca­nis­mos de busca indexem re­pe­ti­da­mente páginas com o mesmo conteúdo. Esse pro­ce­di­mento é uma excelente opção para evitar problemas com conteúdo duplicado. Por outro lado, ele não é com­pa­tí­vel com o uso de hreflang tags: quando as duas tags estão presentes em uma mesma página, os me­ca­nis­mos de busca recebem in­for­ma­ções con­tra­di­tó­rias e ignoram ambas as in­di­ca­ções. Portanto, só utilize hreflang tags em páginas que não apontam para outra página por meio do atributo canonical.

Con­fi­gu­ra­ções con­tra­di­tó­rias no Google Search Console

Ao registrar o seu site no Google Search Console (antigo Webmaster Tools), você poderá definir o di­re­ci­o­na­mento in­ter­na­ci­o­nal de um domínio ou URL, contanto que eles estejam sob um domínio de nível superior genérico (gTLD). Em extensões de domínio com código de país (ccTLDs), o próprio Google realiza essa atri­bui­ção au­to­ma­ti­ca­mente. Isso com certeza é vantajoso para qualquer operador de site, pois, com essas in­for­ma­ções, o Google pode ca­te­go­ri­zar o site de forma ideal. Sempre vale a pena informar o Google sobre versões lo­ca­li­za­das de um site.

Porém, nunca se esqueça de refletir essas con­fi­gu­ra­ções nas suas es­tra­té­gias de SEO. Ou seja, se você assinalar páginas com o hreflang attribute, cer­ti­fi­que-se de que não haverá con­tra­di­ções. Essas con­tra­di­ções ocorrem, por exemplo, quando uma página é iden­ti­fi­cada somente com código de idioma (não possuindo es­pe­ci­fi­ca­ção regional), enquanto, no Search Console, está indicado um país es­pe­cí­fico.

Fer­ra­men­tas úteis para hreflang

Como você pode perceber, inserir hreflang tags em todas as páginas HTML re­le­van­tes é um processo con­si­de­ra­vel­mente tra­ba­lhoso, que envolve grandes quan­ti­da­des de códigos. Quanto maior for a com­ple­xi­dade do seu site mul­ti­lín­gue, maior será a pro­ba­bi­li­dade de surgirem erros nessa im­ple­men­ta­ção, mesmo que você esteja atento às possíveis falhas que apre­sen­ta­mos. Por isso, re­co­men­da­mos que você use fer­ra­men­tas para criar tags e verificar pe­ri­o­di­ca­mente se elas estão fun­ci­o­nando da forma correta. Acompanhe a nossa lista de re­co­men­da­ções:

• SISTRIX hreflang Generator: Com o gerador de hreflang gratuito da SISTRIX, você pode fa­cil­mente criar elementos de link com o atributo hreflang para o cabeçalho HTML do seu site mul­ti­lín­gue. Basta inserir os res­pec­ti­vos URLs e os idiomas e países desejados para que a fer­ra­menta gere au­to­ma­ti­ca­mente um código, que você pode copiar e colar no seu site. Também é possível definir uma página padrão com o atributo hreflang "x-default".
• SISTRIX hreflang Validator: Se você já in­cor­po­rou re­fe­rên­cias a di­fe­ren­tes versões de idiomas no seu site, outra fer­ra­menta que pode ser útil é o validador de hreflang, também oferecido pela SISTRIX. Esse serviço gratuito verifica se as hreflang tags estão inseridas cor­re­ta­mente para o URL es­pe­ci­fi­cado.
• Google Search Console: Se você registrar o seu site no Google Search Console, não só este se tornará mais visível para o mecanismo de busca, como também lhe concederá acesso a diversas fer­ra­men­tas de análise, para a oti­mi­za­ção do seu projeto.
• Hreflang Checker: No site Hreflang Checker, é possível vi­su­a­li­zar, com rapidez, todos os atributos hreflang de qualquer URL inserido, de forma clara e or­ga­ni­zada. A fer­ra­menta indica até mesmo de qual fonte os atributos hreflang foram retirados (HTML, HTTP etc.) e fornece sugestões de melhoria na im­ple­men­ta­ção de hreflang tags.