O que é Hreflang e como implementá-lo

Carlos Silva

Fev 21, 202310 min de leitura
atributo hreflang

ÍNDICE

O que é Hreflang?

Hreflang é um atributo HTML que informa o idioma e a região de uma página. Ele permite que os mecanismos de pesquisa forneçam a versão mais apropriada com base nas preferências de país e idioma do usuário.

O Hreflang é um importante conceito de SEO internacional. Ele ajuda a garantir que o público certo veja a versão mais adequada de uma página.

Por exemplo: em vez de ter a mesma página competindo por usuários na Espanha e no México, você pode ter páginas otimizadas para o idioma (no caso, as nuances da mesma língua em cada um desses países), moeda e muito mais.

Digamos que você pesquise “blog semrush” no Google nos EUA. Este é o primeiro resultado:

site da semrush nos EUA

Já se você estiver na Espanha, é isso que você verá:

site da semrush na Espanha

Youtube video thumbnail

Como é uma tag Hreflang?

A tag Hreflang tem uma estrutura bastante direta. Normalmente, ela vai ser mais ou menos assim:

<link rel="alternate" href="url_of_page" hreflang="lang_code" />

Destrinchando:

  • link rel=“alternate” significa que o link nesta tag é uma versão alternativa da página;
  • href=“url_of_page” é onde você pode encontrar essa página alternativa;
  • hreflang=“lang_code” é o idioma escolhido.

Observação: a tag Hreflang é uma indicação, não uma diretiva. O Google e o Yandex usam os atributos Hreflang. Já o Baidu e o Bing, não; eles contam com um atributo HTML de idioma do conteúdo.

Como criar uma tag Hreflang

Para criar uma tag Hreflang, você precisa encontrar os códigos de idioma e país de que precisa. Depois, deve preencher os espaços em branco no código que vimos acima.

O Hreflang suporta códigos de idioma ISO 639-1 de duas letras e códigos de país e região ISO 3166-1 alfa-2.

Você nem sempre precisará do código de país ou região. Mas pode ser útil tê-los em mãos.

Digamos que seu blog em inglês foi traduzido para o espanhol e o português. O atributo Hreflang para um post no blog deveria ficar assim:

<link rel="alternate" href="https://exemplo.com" hreflang="en" />
<link rel="alternate" href="https://exemplp.com/es/" hreflang="es" />
<link rel="alternate" href="https://exemplo.com/pt/" hreflang="pt" />

A tag Hreflang de cada página deve incluir uma referência a todas as páginas que servem como alternativas, incluindo uma referência a si mesmo.

O Google recomenda a autorreferência de Hreflang em suas diretrizes.

Se seus atributos Hreflang não fizerem referência a todas as versões alternativas, os mecanismos de pesquisa podem acabar ignorando ou interpretando suas tags incorretamente.

Isso significa que os links de referência na linha de código do post em inglês no exemplo acima devem aparecer tanto nas suas páginas em espanhol quanto em português.

Mas e se você segmentar um país adicional que também fala português, como o Brasil? (Você pode querer fazer isso se estiver vendendo um produto em moedas diferentes, por exemplo.)

Nesse caso, você também precisa adicionar o código do país.

Assim, você ficaria com uma versão com “pt” sendo o código de duas letras para Portugal e “br” para o Brasil:

Português em Portugal

<link rel="alternate" href="https://exemplo.com/pt/" hreflang="pt-pt" />

Português no Brasil

<link rel="alternate" href="https://exemplo.com/br/" hreflang="pt-br" />

A sintaxe aqui é um pouco diferente: hreflang=“idioma-país” em vez de apenas hreflang=“idioma”.

Dica: também é importante definir tags padrão (x-default). Elas indicam a página de fallback para mostrar aos usuários quando não há uma versão localizada apropriada.

As tags x-default hreflang não são obrigatórias, mas são recomendadas.

Para implementá-las, adicione uma anotação e defina o atributo “href” para a URL à qual você deseja que os usuários cheguem se seu site não for compatível com o idioma deles.

Fica assim (a tag padrão é a última):

<link rel="alternate" href="https://exemplo.com" freflang="en-us" />
<link rel="alternate" href="https://exemplo.com/es/" freflang="es-es" />
<link rel="alternate" href="https://exemplo.com/pt/" freflang="pt-pt" />
<link rel="alternate" href="https://exemplo.com/pt/" freflang="pt-br" />
<link rel="alternate" href="https://exemplo.com" hreflang="x-default" />

Onde colocar a tag Hreflang?

Existem três maneiras de implementar atributos Hreflang:

  1. No HTML da página;
  2. No cabeçalho HTTP (para arquivos não HTML, como PDFs);
  3. No sitemap XML.

1. HTML

A saída mais básica para indicar suas páginas alternativas é no código HTML.

Basta adicionar todos os atributos Hreflang relevantes na parte <head> da página.

Lembre-se: cada versão de um artigo deve fazer referência a si mesma, bem como todas as outras versões com idiomas diferentes.

Lembrando que a sintaxe ficaria assim:

<link rel="alternate" href="url_of_page" hreflang="lang_code" />

O único problema com esse método é que ele pode ser demorado.

Por exemplo: toda vez que você traduzir um post para outro idioma, precisa adicionar outra tag Hreflang a todas as versões desse artigo.

Observação: para um grande número de entradas Hreflang, é interessante indicar suas páginas alternativas por meio do sitemap. Veremos como você pode fazer isso daqui a pouco.

Para criar ou modificar tags Hreflang em HTML, tente usar uma ferramenta especializada.

Para este exemplo, usaremos a The hreflang Tags Generator Tool, da Aleyda Solis.

Basta inserir a URL e selecionar o idioma e o país de cada versão da página em que você está trabalhando.

Selecione “Tags to include in the head area of the pages HTML” e clique em “GENERATE THE HREFLANG TAGS FOR THESE URLS”.

usando a The hreflang Tags Generator Tool

Em seguida, copie o código e cole-o na tag <head> de cada página.

tag hreflang gerada pela ferramenta

2. Cabeçalho HTTP

Os cabeçalhos HTTP são ótimos para implementar atributos Hreflang para conteúdos não HTML do seu site, como PDFs.

Os códigos de cabeçalho HTTP transferem dados entre um servidor e um cliente. Eles contêm informações sobre a data da solicitação, o referenciador, o idioma preferido etc.

Observação: você também pode usar esse método para conteúdo HTML. Mas isso pode deixar o processo mais pesado em termos de solicitações do servidor. Portanto, é melhor usá-lo apenas quando necessário.

O formato do cabeçalho em HTTP é assim:

Link: <url 1>; rel="alternate"; hreflang="código do idioma 1", 
<url 2>; rel="alternate"; hreflang="código do idioma 2", …

Entendendo a sintaxe:

  • <url x> é a URL da página alternativa relacionada à localidade atribuída ao Hreflang. Deve incluir as marcas < e >.
  • Language code x é a língua (ou região) de destino da página.

Você deve indicar um conjunto de valores <url>, rel="alternate" e hreflang para cada versão da página, separando-os por vírgula.

Digamos que você crie um documento PDF em três versões: uma em inglês, uma em espanhol e outra em português.

Seu cabeçalho HTTP deve ficar assim (para cada arquivo):

Link: <https://exemplo.com/doc.pdf>; rel="alternate"; hreflang="en",
<https://exemplo.com/es/doc.pdf>; rel="alternate"; hreflang="es",
<https://exemplo.com/pt/doc.pdf>; rel="alternate"; hreflang="pt"

3. Sitemap XML

O terceiro método de implementação do Hreflang é por meio do seu sitemap XML.

Esse é um arquivo que fornece aos mecanismos de pesquisa informações sobre as páginas do seu site.

Portanto, é uma ótima maneira de informar ao Google todas as variações de idioma e região de cada URL.

Ele também tem um grande benefício: o sitemap XML permite que você faça alterações nos seus atributos Hreflang em um só lugar.

Com os métodos de Hreflang em HTML e HTTP, você precisa atualizar os arquivos toda vez que um post ou documento é traduzido para outro idioma.

Você precisa adicionar um elemento <loc> em cada URL. Com entradas <xhtml:link> para todas as versões de idioma e região da página, incluindo a própria página atual.

Isso significa que, se você tiver três versões de uma página, seu sitemap terá três entradas, uma para cada URL. E cada uma dessas entradas terá três listagens idênticas.

Voltando ao exemplo do blog em inglês, espanhol e português, a parte do sitemap para um post do blog ficaria assim:

<url>
<loc>https://https://exemplo.com</loc>
<xhtml:link rel="alternate" hreflang="en-us"
href="https://https://exemplo.com" />
<xhtml:link rel="alternate" hreflang="es-es"
href="https://exemplo.com/es/" />
<xhtml:link rel="alternate" hreflang="pt-br"
href="https://exemplo.com/pt/" />
</url>
<url>
<loc>https://exemplo.com/es/</loc>
<xhtml:link rel="alternate" hreflang="en-us"
href="https://https://exemplo.com" />
<xhtml:link rel="alternate" hreflang="es-es"
href="https://exemplo.com/es/" />
<xhtml:link rel="alternate" hreflang="pt-br"
href="https://exemplo.com/pt/" />
</url>
<url>
<loc>https://exemplo.com/pt/</loc>
<xhtml:link rel="alternate" hreflang="en-us"
href="https://https://exemplo.com" />
<xhtml:link rel="alternate" hreflang="es-es"
href="https://exemplo.com/es/" />
<xhtml:link rel="alternate" hreflang="pt-br"
href="https://exemplo.com/pt/" />
</url>
</urlset>

Você pode usar a The hreflang Tags Generator Tool para criar ou modificar tags Hreflang no seu sitemap XML.

Insira a URL, idioma e país para cada versão.

Em seguida, selecione “Attributes in an XML Sitemap” e clique em “GENERATE THE HREFLANG TAGS FOR THESE URLS”.

tags hreflang no sitemap XML

Em seguida, copie o código e adicione-o ao sitemap XML do seu site.

adicionar tag hreflang no sitemap XML

Como encontrar e corrigir problemas de Hreflang

Você pode encontrar e corrigir problemas do Hreflang auditando seu site regularmente. Para isso, você pode usar a ferramenta Auditoria do site, da Semrush.

Insira seu domínio e crie um projeto.

criando projeto na ferramenta auditoria do site

Depois que a ferramenta rastrear seu site, vá para a aba “Problemas”. Em seguida, procure por “hreflang” na barra de pesquisa.

aba problemas, filtro hreflang

Você verá uma lista de todos os seus erros de Hreflang, incluindo o tipo de problema e como corrigi-lo.

erros de hreflang

Vejamos agora os problemas mais comuns de Hreflang e como corrigi-los:

Problemas com valores Hreflang

Esse tipo de aviso é acionado quando os códigos de país ou idioma não estão no formato correto.

hreflang warning triggers

É importante corrigir esse problema porque os mecanismos de pesquisa podem ignorar tags Hreflang com códigos incorretos.

E se isso acontecer, eles podem mostrar aos usuários a versão errada da sua página – o que não é bom para o seu SEO.

Corrija esse problema revisando as tags Hreflang em cada URL afetada.

Certifique-se de que a sintaxe em cada atributo segue os códigos corretos: ISO 639-1 de duas letras para idiomas e ISO 3166-1 alfa-2 para países e regiões.

Você pode usar uma ferramenta geradora de tags Hreflang sempre que precisar.

Hreflang sem autorreferência 

O atributo Hreflang de cada página deve incluir uma referência a todas as páginas que servem como alternativa, incluindo uma referência a ela mesma.

hreflang references

Se os atributos Hreflang não fizerem autorreferência, os mecanismos de pesquisa podem ignorá-los ou interpretá-los incorretamente.

Corrija esse problema revisando cada URL afetada e adicionando uma tag autorreferenciada ao conjunto de atributos Hreflang.

Esse tipo de aviso é acionado quando há um problema com o link no Hreflang.

Por exemplo: o link pode apontar para uma página quebrada ou redirecionada.

detalhes dos erros de link hreflang

Se isso acontecer, os mecanismos de pesquisa podem ignorar seus atributos.

Corrija esse problema e altere a anotação para garantir que ela aponte para uma página que esteja funcionando normalmente.

Hreflang e URLs Rel=Canonical conflitantes

Esse tipo de aviso aparece quando uma tag Hreflang faz referência a uma URL não canônica.

problemas de incompatibilidade de idioma hreflang

Uma tag canônica é um atributo HTML que indica a versão principal de uma página quando você tem páginas duplicadas . Ele informa aos mecanismos de busca qual versão tem mais autoridade e deve aparecer nos resultados da pesquisa.

Mas e se seus atributos Hreflang fizerem referência a uma versão não canônica de uma página específica?

As duas tags acabam se contradizendo:

  • O Hreflang indica que a página não canônica deve aparecer nos resultados de pesquisa para usuários que falam idiomas específicos.
  • A tag canônica indica que uma versão diferente dessa página deve aparecer nos resultados da pesquisa.

Claramente, isso vai confundir os mecanismos de busca e eles provavelmente irão ignorar o atributo Hreflang ou canonical ou ambos.

Corrija esse problema em cada URL e altere o Hreflang para apontar apenas para URLs canônicas.

Automatize suas auditorias de tags Hreflang

Depois de ver como implementar tags Hreflang e corrigir problemas relacionados, automatize suas auditorias.

Dessa forma, você será notificado sobre quaisquer problemas antes que eles se tornem piores. Para isso, configure um relatório na ferramenta Auditoria de site.

No canto superior direito da página, clique no símbolo de engrenagem para ver as configurações.

Em seguida, role para baixo até encontrar a opção "Agendamento".

opção de agendamento da auditoria

Você verá um pop-up onde poderá escolher com que frequência deseja executar sua auditoria.

Em seguida, marque a opção “Enviar um e-mail sempre que uma auditoria for realizada”.

E clique em “Salvar”.

botão salvar

Novos problemas serão exibidos no painel “SEO International” após cada rastreamento. Portanto, certifique-se de verificá-lo regularmente.

relatório de seo internacional

Agora você está pronto para corrigir quaisquer problemas de implementação do atributo Hreflang que apareçam e para manter seus esforços de SEO funcionando sem problemas.

Compartilhar
Author Photo
Carlos Silva is a content marketer with over 8 years of experience in writing, content strategy, and SEO. At Semrush, he’s involved in research, editing, and writing for the English blog. He also owns Semrush’s Educational Newsletter (4M+ subscribers).