O que é hreflang: atributo HTML para sites multilíngues

Se você pretende ter um site internacional e disponibilizá-lo em outros idiomas, terá que se encarregar de várias tarefas, incluindo a otimização de versões para os mecanismos de busca. Também será preciso adotar medidas de SEO específicas para cada idioma ou país, para que os crawlers dos mecanismos de busca possam categorizar corretamente as diferentes versões linguísticas do mesmo site e exibi-las para o público apropriado. Um dos recursos de SEO mais eficazes para sites multilíngues é o hreflang attribute (atributo hreflang).

O que é hreflang?

Em dezembro de 2011, o Google introduziu 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 alternativas de um site. O hreflang attribute sinaliza para os crawlers do mecanismo de busca que o conteúdo da página em questão é disponibilizado em diferentes idiomas. Para isso, você precisa inseri-lo dentro de um elemento de link no documento HTML, e incluir os respectivos 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 automaticamente encaminhará, para a versão em espanhol, os visitantes localizados em países de língua espanhola, o que pode ser determinado pelo endereço IP.

O atributo hreflang também pode ser usado para identificar variações linguísticas de um mesmo idioma. Nesse caso, basta complementar o atributo com o código da região ou país desejado (hreflang country code). Assim, também poderíamos fazer distinções entre usuários situados na Espanha ("hreflang="es-ES") e no México ("hreflang="es-MX"), por exemplo. Para diferenciar 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.

Relevância do hreflang para o SEO

O principal motivo para se utilizar atributos como canonical e hreflang é evitar que sites multilíngues sejam considerados de conteúdo duplicado. É comum que operadores de sites tentem atender a diversos mercados elaborando versões alternativas, cujo conteúdo não apresenta grandes diferenças, com exceção da tradução. Em países que falam o mesmo idioma, a situação é ainda mais complicada: a não ser por umas poucas alterações para atender a diferenças culturais ou regionais (vocabulário, moeda, informações de contato etc.), versões carregam conteúdos basicamente idênticos. Já que essas versões costumam usar o mesmo domínio, uma indicação clara é importante, para evitar que mecanismos de busca emitam classificações negativas.

Enquanto o atributo canonical indica que um certo URL corresponde à versão principal, excluindo da indexação todas as versões alternativas, o atributo hreflang sinaliza a versão da página que deve ser apresentada a um determinado público-alvo (idioma e/ou país) nos resultados das pesquisas. Portanto, essa marcação HTML é fundamental a quem pretende disponibilizar conteúdo multilíngue e tornar um site verdadeiramente internacional. Mesmo que o atributo não influencie diretamente a classificação dos mecanismos 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 localidade.

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 especificado. Esse elemento deve ser usado dentro da seção head e quantas vezes for necessário. Para vincular diferentes versões de um idioma com hreflang, além do hreflang attribute, são necessários os dois atributos: rel e href. Cada um deles tem uma função particular:

• rel: rel especifica 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 alternativa do site.
• hreflang: o atributo hreflang em si identifica o idioma do documento vinculado, podendo também, opcionalmente, indicar o país em que ele é mais relevante. No site lingoes.net, você encontra a lista de todas as combinações possíveis.
• href: o atributo href normalmente especifica o URL da versão no idioma alternativo.

Observe, abaixo, um exemplo ilustrativo de uso do hreflang:

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

Se não for feita uma atribuição correta das versões de idioma, é o ranking que decide qual delas será exibida a cada visitante. Em consequência disso, você pode perder possíveis leitores logo nos primeiros segundos, caso eles sejam direcionados à 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 específica. Por exemplo:

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

Como implementar o hreflang

Existem três jeitos de implementar hreflang tags: o mais comum é incorporá-las na seção head do respectivo documento HTML. Para documentos 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 incorporar atributos de idioma ou país no sitemap.

Em princípio, incorporar um cabeçalho HTTP funciona de acordo com o mesmo esquema, pois nele também é preciso referenciar todas as versões de idiomas existentes. Apenas a sintaxe é ligeiramente diferente:

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

Por isso, principalmente se você está lidando com um grande projeto de site internacional, incluir o atributo hreflang em um sitemap XML é mais eficaz do que fazer as marcações em cada página individual. Pois, se seu site possui um grande volume de conteúdo multilíngue, será relativamente trabalhoso fazer a implementação em HTML da forma convencional. Em um sitemap, também é preciso listar uma a uma todas as versões de idioma, inserindo o respectivo URL. Além disso, cada URL é especificado por um elemento xhtml:link, que referencia as outras versões disponí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 multilíngue.

Há uma propriedade do hreflang attribute que é fundamental para compreender o funcionamento dele: ele vincula dois ou mais documentos de forma bidirecional, e não em uma só direção, como no caso de um encaminhamento. 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 documentos, em todas as direções (versões de idioma) existentes, é que o mecanismo de busca pode reconhecer a estrutura do site e adaptar os resultados 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 – precisaria ser inserido no cabeçalho de todos os quatro documentos 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 frequentes ao implementar hreflang

Os exemplos de hreflang para HTML que apresentamos acima mostram que implementar uma atribuição automática de visitantes em sites multilíngue não é nenhum bicho de sete cabeças. Porém, não devemos subestimar os esforços e o potencial de erros que podem ocorrer durante a inserção das inúmeras referências cruzadas. Estes erros podem ser pequenos ou grandes, às vezes afetando apenas páginas individuais, mas também podem comprometer a funcionalidade do hreflang em todo o site. Por isso, é bom ficar atento aos erros mais frequentes:

hreflang não implementado no nível do URL

Já que hreflang tags são sempre vinculadas a um URL específico, elas também devem sempre ser incluídas nesse nível. Ou seja: se você associar o atributo somente ao URL inicial das diferentes versões linguísticas, a atribuição automática de visitantes 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 multilíngue, ou então trabalhar com o método alternativo de sitemap acima mencionado.

Uma ou mais versões de idioma não referenciam a si mesmas

Muitos operadores de sites assinalam corretamente os URLs das outras versões com o hreflang attribute, porém se esquecem de que cada página também deve referenciar a si mesma. Nesse caso, a estrutura de links fica incompleta e não pode ser interpretada pelo Google ou por outros mecanismos de busca.

Também não deixe de definir uma página padrão (default), utilizando a tag hreflang x-default, para aproveitar totalmente os potenciais de otimização.

Códigos ISO incorretos

Na hora de incluir códigos de países e idiomas, alguns operadores de sites acabam sendo criativos demais. Isso geralmente não dá certo e faz com que as hreflang tags inseridas não funcionem. Por exemplo: a combinação "en-uk" parece apropriada para uma página com conteúdo voltado a usuários do Reino Unido. Contudo, o código correto é "en-gb". Por esse motivo, recomendamos que você confira atentamente os códigos de países do padrão ISO 639-1.

Referência a URLs desatualizados ou inexistentes

Uma causa comum de erros em hreflang tags é a indicação de URLs inexistentes. Isso acontece, sobretudo, quando marcações são integradas automaticamente em todas as subpáginas de um site, mas nem todas essas subpáginas estão disponíveis em todos os idiomas oferecidos. URLs ficam desatualizados sempre que você faz alterações estruturais e não as reflete nos elementos de links.

Uso contraditório das tags canonical e hreflang

Muitos operadores de sites internacionais fazem uso da tag canonical para impedir que os crawlers dos mecanismos de busca indexem repetidamente páginas com o mesmo conteúdo. Esse procedimento é uma excelente opção para evitar problemas com conteúdo duplicado. Por outro lado, ele não é compatível com o uso de hreflang tags: quando as duas tags estão presentes em uma mesma página, os mecanismos de busca recebem informações contraditórias e ignoram ambas as indicações. Portanto, só utilize hreflang tags em páginas que não apontam para outra página por meio do atributo canonical.

Configurações contraditórias no Google Search Console

Ao registrar o seu site no Google Search Console (antigo Webmaster Tools), você poderá definir o direcionamento internacional 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 atribuição automaticamente. Isso com certeza é vantajoso para qualquer operador de site, pois, com essas informações, o Google pode categorizar o site de forma ideal. Sempre vale a pena informar o Google sobre versões localizadas de um site.

Porém, nunca se esqueça de refletir essas configurações nas suas estratégias de SEO. Ou seja, se você assinalar páginas com o hreflang attribute, certifique-se de que não haverá contradições. Essas contradições ocorrem, por exemplo, quando uma página é identificada somente com código de idioma (não possuindo especificação regional), enquanto, no Search Console, está indicado um país específico.

Ferramentas úteis para hreflang

Como você pode perceber, inserir hreflang tags em todas as páginas HTML relevantes é um processo consideravelmente trabalhoso, que envolve grandes quantidades de códigos. Quanto maior for a complexidade do seu site multilíngue, maior será a probabilidade de surgirem erros nessa implementação, mesmo que você esteja atento às possíveis falhas que apresentamos. Por isso, recomendamos que você use ferramentas para criar tags e verificar periodicamente se elas estão funcionando da forma correta. Acompanhe a nossa lista de recomendações:

• SISTRIX hreflang Generator: Com o gerador de hreflang gratuito da SISTRIX, você pode facilmente criar elementos de link com o atributo hreflang para o cabeçalho HTML do seu site multilíngue. Basta inserir os respectivos URLs e os idiomas e países desejados para que a ferramenta gere automaticamente 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á incorporou referências a diferentes versões de idiomas no seu site, outra ferramenta 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 corretamente para o URL especificado.
• 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 ferramentas de análise, para a otimização do seu projeto.
• Hreflang Checker: No site Hreflang Checker, é possível visualizar, com rapidez, todos os atributos hreflang de qualquer URL inserido, de forma clara e organizada. A ferramenta indica até mesmo de qual fonte os atributos hreflang foram retirados (HTML, HTTP etc.) e fornece sugestões de melhoria na implementação de hreflang tags.