Atualizado em 17/04/2024
11 min de leitura
Hreflang é um atributo HTML para especificar a região e o idioma de uma página, em casos onde há mais de uma versão do conteúdo. A tag informa aos buscadores quais versões exibir, com base na localização de quem está pesquisando.
Imagine que o seu site é brasileiro, mas tem uma versão em inglês.
Por meio da tag hreflang, você pode sugerir que o Google mostre a versão inglesa para quem estiver nos EUA. E quem estiver no Brasil verá a página padrão.
Você pode fazer isso com qualquer idioma ou localidade. Por exemplo, se você tiver um site na Bélgica, pode indicar ao Google para exibir versões em francês, alemão e holandês.
A hreflang é importante em qualquer site que tenha conteúdo em múltiplos idiomas. Por meio dela, o Google entrega a versão mais adequada para cada visitante, o que pode impactar diretamente o engajamento e as conversões.
Além disso, a tag impede o conteúdo duplicado. Sem a marcação HTML adequada, o Google pode entender que as páginas são cópias e não estão relacionadas. Se isso acontecer, a visibilidade na pesquisa orgânica fica prejudicada.
Isso é relevante em diversas situações:
Nos casos acima, o conteúdo terá apenas pequenas variações, como moeda ou ortografia de palavras. Se estiverem marcadas com a tag hreflang, o Google entenderá que são conteúdos para audiências específicas. Ou seja, não há impacto negativo no SEO.
Segundo Gary Illyes, engenheiro do Google, a tag hreflang permite obter tráfego mais segmentado:
“Você NÃO receberá benefícios de classificação na pesquisa orgânica em si, ao menos não no sentido tradicional do termo. O que você receberá é tráfego mais segmentado”.
A explicação é de 2019 e foi publicada em uma thread no Reddit. Na mesma discussão, ele explica como tag hreflang funciona na prática:
“Vamos supor que você tem uma página A em inglês e uma página B em espanhol, com hreflang marcando a relação delas.
Nesse caso, o que aconteceria é que, ao ver a pesquisa, exibiríamos a página A, porque parece mais relevante. Mas então veríamos a página B relacionada, que seria localizada para aquele visitante, então fazemos uma segunda busca no índice e exibiremos B, na mesma posição em que A estaria”.
O “índice” a que Gary se refere é uma base de dados com todos os sites prontos para serem exibidos pelo Google como resultado de pesquisa.
Há três formas de implementar a tag hreflang para indicar aos buscadores quais versões de página exibir:
Recomendamos escolher apenas um dos métodos, para facilitar a implementação e a manutenção.
Um detalhe importante é que, em todos os casos, a tag hreflang deve referenciar a si mesma e às outras versões.
Vamos imaginar que seu site tem as seguintes URLs:
A sua URL principal deve ter a marcação:
<link rel="alternate" hreflang="en-us" href="https://example.com/english" />E, além dela, referenciar a si mesma:
<link rel="alternate" hreflang="x-default" href="https://seusite.com/" />Além disso, você deve adicionar uma tag hreflang na página em inglês, apontando de volta para a página principal.
Caso seu projeto for complexo (com muitas páginas ou variações de idioma) ou você nunca tenha feito implementações deste tipo, sugerimos buscar um parceiro especialista em SEO técnico e SEO internacional para te ajudar.
Se fizer por conta própria, recomendamos a leitura atenta das diretrizes de localização de conteúdo do Google antes de começar.
Para implementar, basta adicionar a tag hreflang no <head> da página.
Head é um contêiner que não é exibido para o visitante, com diversos dados sobre a página. Siga o seguinte padrão:
<link rel="alternate" hreflang="lang_code" href="url_of_page"/>Este é um exemplo de aplicação:
<head>
<title>Widgets, Inc</title>
<link rel="alternate" hreflang="en-gb"
href="https://en-gb.example.com/page.html" />
<link rel="alternate" hreflang="en-us"
href="https://en-us.example.com/page.html" />
<link rel="alternate" hreflang="en"
href="https://en.example.com/page.html" />
<link rel="alternate" hreflang="de"
href="https://de.example.com/page.html" />
<link rel="alternate" hreflang="x-default"
href="https://www.example.com/" />
</head>O header ou cabeçalho HTTP é um campo que passa informações adicionais sobre o conteúdo de uma página. Você pode usá-lo para inserir a marcação hreflang.
Neste caso, o padrão é:
Link: <url1>; rel="alternate"; hreflang="lang_code_1", <url2>; rel="alternate"; hreflang="lang_code_2", ...Veja um exemplo de aplicação:
Link: <https://example.com/file.pdf>; rel="alternate"; hreflang="en",
<https://de-ch.example.com/file.pdf>; rel="alternate"; hreflang="de-ch",
<https://de.example.com/file.pdf>; rel="alternate"; hreflang="de"Este método é útil para fazer a marcação em arquivos que não usam HMTL, como documentos em .pdf de um site.
Você pode inserir as informações sobre diferentes versões de conteúdo diretamente no sitemap, usando os elementos <loc>, <xhtml:link> e <url>.
Vamos ver um exemplo prático de aplicação. Suponha que seu site tem as seguintes URLs:
<?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>https://www.example.com/english/page.html</loc>
<xhtml:link
rel=”alternate”
hreflang=”de”
href=”https://www.example.de/deutsch/page.html”/>
<xhtml:link
rel=”alternate”
hreflang=”de-ch”
href=”https://www.example.de/schweiz-deutsch/page.html”/>
<xhtml:link
rel=”alternate”
hreflang=”en”
href=”https://www.example.com/english/page.html”/>
</url>
<url>
<loc>https://www.example.de/deutsch/page.html</loc>
<xhtml:link
rel=”alternate”
hreflang=”de”
href=”https://www.example.de/deutsch/page.html”/>
<xhtml:link
rel=”alternate”
hreflang=”de-ch”
href=”https://www.example.de/schweiz-deutsch/page.html”/>
<xhtml:link
rel=”alternate”
hreflang=”en”
href=”https://www.example.com/english/page.html”/>
</url>
<url>
<loc>https://www.example.de/schweiz-deutsch/page.html</loc>
<xhtml:link
rel=”alternate”
hreflang=”de”
href=”https://www.example.de/deutsch/page.html”/>
<xhtml:link
rel=”alternate”
hreflang=”de-ch”
href=”https://www.example.de/schweiz-deutsch/page.html”/>
<xhtml:link
rel=”alternate”
hreflang=”en”
href=”https://www.example.com/english/page.html”/>
</url>
</urlset>
Recomendamos a leitura das boas práticas do Google para sitemaps antes de implementar desta forma.
O Google tem uma série de recomendações sobre o bom uso da tag. Veja as principais:
O Google indica algumas ferramentas de terceiros para gerar tags ou verificar se as que você criou estão corretas. São elas:
Os erros mais comuns que impedem o funcionamento correto da tag são:
Elyson Gums é redator na SEO Happy Hour. Trabalha com redação e produção de conteúdo para projetos de SEO e inbound marketing desde 2014, em segmentos B2C e B2B. É bacharel em Jornalismo (Univali/SC) e mestre em Comunicação Social (UFPR).
