Tags Hreflang: O guia definitivo

O que são tags Hreflang?

Hreflang é um código — especificamente, um atributo HTML — que especifica todas as URLs em um site que utilizam o mesmo conteúdo. O atributo hreflang foi introduzido pelo Google há mais de uma década e permite que os usuários mostrem aos mecanismos de pesquisa a relação entre várias páginas da web em vários idiomas. Isso se mostra útil quando o conteúdo é criado para um público específico. Para empresas com várias versões da mesma página da Web em diferentes idiomas, a tag hreflang comunica essas variações aos mecanismos de pesquisa e ajuda a fornecer a versão correta aos usuários.

Por exemplo, se alguém pesquisar "Ikea" no Google nos EUA, verá este resultado:

Enquanto a mesma consulta de um pesquisador no Canadá retornaria este resultado:

Por que todo o alarido? A tag hreflang permite que os mecanismos de pesquisa forneçam resultados aos usuários com base em seu país e preferência de idioma, tornando o significado da tag hreflang inestimável: otimiza a experiência do usuário e leva a classificações de pesquisa aprimoradas. Como é isso para um ganha-ganha?

Por que o Hreflang é importante para SEO?

Tudo se resume a resultados personalizados. Todo o trabalho árduo de traduzir uma página da web em vários idiomas é perdido se um usuário não for direcionado aos resultados sob medida para ele. Em suma, o hreflang SEO permite que os mecanismos de pesquisa forneçam a versão mais apropriada da página da Web de uma empresa aos usuários com base em seu idioma e localização. Tem uma página otimizada para as preferências específicas de um usuário? Você não apenas deseja que eles cheguem lá, mas também deseja que eles permaneçam - por várias razões - e SEO de tags hreflang é como fazê-lo.

A implementação dessa prática melhora a experiência do usuário, minimiza o retorno aos resultados da pesquisa e gera classificações mais altas. (Se no início você não conseguir, tente, tente novamente não é necessariamente um provérbio útil ao navegar em pesquisas baseadas na web). O objetivo aqui não é aumentar o tráfego, mas servir o conteúdo certo para os usuários certos, que desejam retornos rápidos e confiáveis. As tags Hreflang são a chave para alcançar esses resultados diferenciados.

Precisa de outro motivo? O uso de um hreflang erradica o problema de conteúdo duplicado. Imagine que sua empresa oferece o mesmo conteúdo em inglês em diferentes URLs destinados aos EUA e Canadá; as diferenças são provavelmente mínimas e refletidas nos detalhes da moeda (USD versus CAD) e linguagem (sistema imperial versus sistema métrico).

Uma tag hreflang ajuda os mecanismos de pesquisa a reconhecer e entender a relação entre essas páginas e o público distinto para o qual cada uma foi criada. Sem hreflang, o Google pode estar inclinado a ver essas páginas como conteúdo duplicado e retornar apenas um dos resultados; com hreflang, é comunicado muito claramente ao mecanismo de pesquisa que, embora o conteúdo seja (em grande parte) o mesmo, é otimizado para diferentes populações. Que tal uma pena no seu boné (ou touque, para nossos amigos canadenses)?

Esses detalhes são importantes, então continue lendo para saber mais.

Como são as tags Hreflang?

As tags Hreflang são simples, consistentes e usam a seguinte sintaxe:

 <link rel=“alternate” hreflang=“x” href=“https://www.example.com/new-page” />

Este formato comunica que a página vinculada é uma versão alternativa da página atual, aparecendo no idioma “x”. As tags Hreflang servem como sinais para os mecanismos de pesquisa, não como diretivas. Em outras palavras, o atributo hreflang sinaliza ao mecanismo de pesquisa que um usuário que consulta usando o idioma “x” preferirá esse resultado a uma página com conteúdo muito semelhante no idioma “y”. Outra diferença entre sinais e diretivas? O Google pode não reconhecer os atributos hreflang se considerados imprecisos, resultando em outros fatores de SEO substituindo o atributo hreflang, fazendo com que uma versão alternativa da página da sua empresa tenha uma classificação mais alta do que a melhor versão.

Usando HTML Hreflang

Para sites que foram traduzidos para vários idiomas, a construção de uma tag hreflang é tão simples quanto 1-2-3. Cada uma dessas etapas usa a sintaxe mencionada acima (<link rel=“alternate” hreflang=“x” href=“https://www.example.com/new-page” />) como base.

1. O atributo hreflang deve conter um valor válido que consiste no idioma; essas informações são comunicadas em um código de duas letras chamado formato ISO 639-1. Se você quisesse traduzir a página de exemplo para o português, por exemplo, ficaria assim:

    <link rel=“alternate” hreflang=“pt” href=“https://example.com/portugese-version” />

   A região é opcional e, se usada, deve estar no formato ISO 3166-1 Alpha 2. Aqui estão duas tags diferentes que você pode utilizar para segmentar falantes de português em Portugal e no Brasil, respectivamente:

    PT-PT: <link rel=“alternate” hreflang=“pt-pt” href=“https://example.com/pt/our-page” />
   PT-BR: <link rel=“alternate” hreflang=“pt-br” href=“https://example.com/br/our-page” />

   Os códigos regionais não são necessariamente intuitivos (o código para o Reino Unido é “gb” e não “uk”), então verifique! Use esta lista para verificar os códigos precisos de idioma e região antes de incorporar as informações erradas em seu site.

2. Cada URL precisa de links de retorno para todos os outros URLs, todos os quais devem apontar para a versão canônica ou preferida de um determinado site. Quanto mais idiomas você tiver, mais links hreflang você precisará; embora possa ser tentador limitá-los, é impossível evitar essa etapa. Além disso, rel=”alternate” hreflang=”x”markup e rel=”canonical” podem e devem ser usados ​​juntos. Todo idioma deve ter um link rel=”canonical” apontando para si mesmo. A partir da página inicial example.com, ficaria assim:

    <link rel="canonical" href="http://example.com/">
   <link rel="alternate" href="http://example.com/" hreflang="pt" />
   <link rel="alternate" href="http://example.com/pt-pt/" hreflang="pt-pt" />
   <link rel="alternate" href="http://example.com/pt-br/" hreflang="pt-br" />

   Para saber mais sobre canônicos, leia Canonical Tags & URLs: A Simple Guide For Beginners.

3. O passo final para a construção bem-sucedida de hreflang está enraizado em auto-links. Um atributo hreflang em cada página requer uma referência a si mesmo e a quaisquer páginas que sirvam como uma alternativa para ele. O Google recomenda definir uma página "x-default" que estabeleça um único URL como a versão padrão que não segmente um idioma ou região específica para visitantes que não estejam especificados. mudaria:

    <link rel="canonical" href="http://example.com/pt-pt/">
   <link rel="alternate" href="http://example.com/"hreflang="pt" />
   <link rel="alternate" href="http://example.com/pt-pt/"hreflang="pt-pt" />
   <link rel="alternate" href="http://example.com/pt-br/"hreflang="pt-br" />

É muito para digerir! Mas você chegou até aqui, o que significa que está pronto para a próxima etapa: aprender a implementar tags hreflang.

Implementando tags Hreflang

Existem três maneiras de implementar tags hreflang e tudo se resume ao posicionamento:

1 – Implementando tags Hreflang usando HTML:

Para os iniciantes no hreflang, utilizar tags HTML básicas é a maneira mais fácil e rápida de começar. Basta adicionar quaisquer tags hreflang apropriadas (veja acima) na tag <head> de sua página da web.

Exemplo: O webmaster de example.com deseja tornar sua página inicial acessível a usuários que falam inglês e espanhol nos Estados Unidos; usando as seguintes anotações no <head> do HTML do site faz isso:

 <link rel="alternate" href="https://www.example.com" hreflang="en-us" />
<link rel="alternate" href="https://www.example.com/es" hreflang="es-us" />

Se eles quisessem mostrar a página inicial para usuários que falam espanhol na Venezuela e no México, a anotação hreflang ficaria assim:

 <link rel="alternate" href="https://www.example.com/ve" hreflang="es-ve" />
<link rel="alternate" href="https://www.example.com/mx" hreflang="es-mx" />

A maior desvantagem deste método? HTML Hreflang pode se tornar confuso e demorado rapidamente. Além disso, lembre-se de que há uma diferença entre os elementos <head> e <header>; o <head> contém elementos que não aparecerão na página, neste caso, o atributo hreflang.

2 – Implementando cabeçalhos HTTP Hreflang:

Para PDFs e conteúdo não HTML em seu site, use cabeçalhos HTTP para implementar hreflang. O nome é um pouco enganador: a implementação não é feita na página via <head> ou <header>. Em vez disso, tudo é feito no back-end de um site. O uso de cabeçalhos HTTP não apenas especifica o idioma relativo das variantes do documento, mas também otimiza esse conteúdo.

Exemplo: para identificar um documento PDF em seu site nas versões em inglês e francês, o link que aparece no cabeçalho HTTP terá a seguinte aparência:

 Link: <http://en.example.com/document.pdf>; rel="alternar"; hreflang="pt", 
<http://fr.example.com/document.pdf>; rel="alternar"; hreflang="fr"

A maior desvantagem para este método de implementação? O uso de cabeçalhos HTTP adiciona sobrecarga a cada solicitação feita em seu site, o que pode tornar a experiência de navegação do usuário mais lenta.

3 – Implementando o Hreflang em seu Sitemap XML

A opção final para implementar o hreflang é usar a marcação de mapa de site XML; isso usa o atributo xhtml:link em XML para adicionar a anotação a cada URL.

Embora haja mais de uma maneira de implementar hreflang em seu sitemap XML, recomendamos algo assim:

Alternativamente, você pode usar alguns dos exemplos abaixo.

Uma palavra de cautela: a marcação necessária para um único URL com um par de variáveis ​​de idioma/localização parecerá longa! Dito isto, continue a ler para os benefícios. (Existem muitos!)

Exemplo:

 <url>
<loc>http://www.example.com/uk/</loc> 
<xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/" /> 
<xhtml:link rel="alternate" hreflang="en-au" href="http://www.example.com/au/" /> 
<xhtml:link rel="alternate" hreflang="en-gb" href="http://www.example.com/uk/" />
</url>

Observe que o terceiro URL é auto-referenciado; isso especifica a URL específica destinada a en-gb e especifica duas outras combinações de idioma/local. Agora, implementar esses dois URLs no mapa do site ficaria assim:

 <url>
<loc>http://www.example.com/</loc> 
<xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/" /> 
<xhtml:link rel="alternate" hreflang="en-au" href="http://www.example.com/au/" /> 
<xhtml:link rel="alternate" hreflang="en-gb" href="http://www.example.com/uk/" />
</url>
<url>
<loc>http://www.example.com/au/</loc> 
<xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/" /> 
<xhtml:link rel="alternate" hreflang="en-au" href="http://www.example.com/au/" /> 
<xhtml:link rel="alternate" hreflang="en-gb" href="http://www.example.com/uk/" />
</url>

Supondo que você seja capaz de olhar além do mar de texto, você notará que apenas as URLs dentro do elemento <loc> estão sendo alteradas - todo o resto permanece o mesmo! Ufa. Esse método depende de cada URL ter um atributo hreflang de autorreferência e retornar links para outros URLs.

Parece muito trabalho, certo? Por um lado, sim, esse método é demorado e requer um pouco de saída ao fazer isso para muitos URLs. Dito isso, o benefício é simples: usuários normais não serão incomodados por essa marcação; não há peso de página extra adicionado e gerar esse tipo de marcação não requer muitas chamadas de banco de dados no carregamento da página.

Por fim, a implementação do hreflang por meio do mapa do site XML traz um grande benefício — tudo é definido em um único arquivo. Isso elimina a necessidade de editar vários documentos HTML sempre que uma página é alterada ou excluída. Além disso, zero lentidão do site. Em outras palavras, há muito o que gostar!

Ainda não tem certeza de qual modo de implementação escolher? Para obter mais dicas sobre arquitetura e estrutura do site, visite as melhores práticas técnicas de SEO.

Encontrando e corrigindo problemas de Hreflang

Agora que você implementou com sucesso o hreflang em seu site (insira os cinco cumprimentos virtuais aqui!), a manutenção é obrigatória. A execução de uma auditoria regular da implementação escolhida garantirá que ela seja configurada corretamente. A comunicação com os indivíduos da sua empresa que lidam com o conteúdo do site ajudará bastante — você quer que eles saibam sobre o hreflang, para que eles não interrompam sua implementação sem querer!

Dois pontos críticos merecem ser mencionados aqui: Se uma página for excluída, verifique se suas contrapartes foram atualizadas; quando uma página é redirecionada, altere os URLs hreflang em suas contrapartes. Supondo que você e sua equipe façam essas coisas de forma consistente e auditem regularmente, deve ser tranquilo.

Enquanto isso, aqui está um rápido resumo dos erros mais comuns do hreflang e como corrigi-los:

1 – Falta a anotação hreflang de auto-referência

Qual é o problema? É importante usar uma tag hreflang de autorreferência sempre que você adicionar uma tag hreflang a uma página da web. Lembre-se de que o Google afirma: “cada versão de idioma deve listar a si mesma, assim como todas as outras versões de idioma”.

Como corrigir: revise todas as páginas afetadas e adicione uma tag hreflang de autorreferência a cada uma usando o método de implementação escolhido.

2 – Anotação Hreflang inválida

Qual é o problema? Os mecanismos de pesquisa ignoram tags hreflang inválidas, o que faz com que versões alternativas de sua página da web sejam ignoradas.

Como corrigir: revise as páginas afetadas e remova tags hreflang inválidas e substitua por aquelas que usam formatos de código de idioma/local válidos.

3 – Página referenciada para mais de um idioma em hreflang

Qual é o problema? Cada parte do conteúdo é projetada para atender a um único idioma/local de idioma. Duas ou mais referências conflitantes confundirão os mecanismos de pesquisa e farão com que os atributos hreflang sejam ignorados.

Como corrigir: revise as páginas afetadas e inspecione os URLs que fazem referência a uma página específica em seus atributos hreflang em busca de erros. Remova qualquer atributo hreflang incorreto e deixe apenas um atributo correto por idioma.

4 – Falta o hreflang recíproco (sem tag de retorno)

Qual é o problema? As tags Hreflang são bidirecionais (se a página A for vinculada à página B em anotações hreflang, a página B deverá vincular à página A em retorno).

Como corrigir: revise as páginas afetadas e adicione tags hreflang bidirecionais quando necessário. Observação: o relatório de segmentação internacional no Google Search Console (encontrado na guia "idioma") sinalizará todas as instâncias de tags de retorno ausentes.

Por exemplo:

5 – Hreflang para não canônico

Qual é o problema? Rel=“alternate” hreflang=“x” instrui os mecanismos de pesquisa a exibir a versão traduzida (localizada) de uma página; O atributo rel=canonical sinalizará que esta não é a versão autoritativa (canônica). Esses atributos contraditórios confundirão os mecanismos de pesquisa.

Como corrigir: revise as páginas afetadas e modifique as anotações hreflang para que apontem apenas para URLs canônicos. Se você encontrar uma página com uma tag canônica inválida, remova-a. Isso garante que o atributo hreflang seja entendido corretamente e seguido pelo mecanismo de pesquisa.

6 – Incompatibilidade de linguagem Hreflang e HTML

Qual é o problema? Os mecanismos de pesquisa (além do Google) ficam confusos quando há uma inconsistência entre o atributo de idioma hreflang e HTML declarado para um ou mais URLs; é importante manter esses dois atributos consistentes entre si.

Como corrigir: revise as páginas afetadas e altere o atributo de idioma HTML para garantir que ele permaneça consistente com o atributo hreflang declarado.

7 -Hreflang para uma página quebrada

Qual é o problema? Um mecanismo de pesquisa não pode retornar conteúdo que não existe! Portanto, atributos hreflang que apontam para páginas mortas serão ignorados.

Como corrigir: revise as páginas afetadas e altere as anotações hreflang para garantir que elas sejam vinculadas às páginas de trabalho.

8 – Mais de uma página para o mesmo idioma em hreflang

Qual é o problema? Quando um ou mais URLs fazem referência a duas ou mais páginas para o mesmo idioma (ou local de idioma) em anotações hreflang, o mecanismo de pesquisa fica confuso.

Como corrigir: revise as páginas afetadas e remova uma das anotações hreflang, para que uma única página seja referenciada para cada idioma.

9 – Falta a anotação hreflang X-default

Qual é o problema? Embora os atributos hreflang x-default sejam opcionais, eles são recomendados como uma prática recomendada de SEO para todas as anotações hreflang.

Como corrigir: revise as páginas afetadas e certifique-se de que cada uma tenha um conjunto de atributos hreflang “x-default” que aponte para uma página NÃO específica para um determinado idioma ou local.

Ainda tem dúvidas? Confira a atualização do algoritmo Core Web Vitals, que descreve práticas adicionais de SEO de tecnologia que você deseja atualizar este ano.

Problemas que o Google pode ignorar

Você fez sua parte seguindo as práticas recomendadas - ainda assim, haverá momentos em que os mecanismos de pesquisa ignorarão determinados problemas. Isso acontece principalmente quando um mecanismo de pesquisa vê o mesmo problema repetidamente e acredita que ele pode ser contabilizado. Não se preocupe! Isso é realmente super útil. Aqui estão alguns problemas de tags hreflang que o Google realmente “corrige” para você:

1. Sublinhado em vez de um traço: esse é um erro comum e o Google é responsável por isso. Cada. Solteiro. Tempo.
2. Usando en-UK em vez de en-GB: Já falamos sobre isso antes... o fato de que os códigos regionais não são necessariamente intuitivos. Fique tranquilo, o Google cuida de você: o Reino Unido é um código reservado, o que significa que o Google corrige esse problema comum.
3. Hreflang sem auto-referência: o Google declarou recentemente que o hreflang de auto-referência é opcional; Dito isto, continua a ser uma boa prática.
4. URLs relativos versus absolutos: enquanto canônicos e hreflang podem usar caminhos relativos, absolutos são mais absolutos! Daí a recomendação de usá-lo sempre que possível.

Redirecionando usuários: uma palavra de cautela

Em muitos casos, os sites redirecionarão os usuários com base em uma combinação de cookies, endereço IP e/ou idioma do navegador; cuidado com o redirecionamento! Para os usuários, isso pode se traduzir em uma experiência frustrante (leia abaixo da média); para os motores de busca, tentar indexar o seu conteúdo torna-se problemático. Além disso, redirecionar usuários pode quebrar as conexões estabelecidas necessárias para suas tags hreflang.

Veja o que o Google tem a dizer sobre a prática:

Não use análise de IP para adaptar seu conteúdo. A análise de localização de IP é difícil e geralmente não é confiável. Além disso, o Google pode não conseguir rastrear corretamente as variações do seu site. A maioria, mas não todos, os rastreamentos do Google são originários dos EUA, e não tentamos variar o local para detectar variações do site. Use um dos métodos explícitos mostrados aqui (hreflang, URLs alternativos e links explícitos).

Trate os rastreadores de mecanismos de pesquisa como faria com um usuário de qualquer local. Tratar o bot do mecanismo de pesquisa de maneira diferente de um usuário é considerado camuflagem — a prática de apresentar conteúdo ou URLs diferentes para usuários humanos e mecanismos de pesquisa — é uma violação das Diretrizes para webmasters do Google.

Quer uma correção aprovada que forneça aos usuários os resultados esperados? Use a mesma lógica de detecção para sugerir uma versão melhor da página para o usuário em um pequeno banner. A única ressalva é que, se for muito grande, pode ser visto como um intersticial (fazendo com que o conteúdo seja totalmente ou parcialmente obscurecido para o usuário).

Dica do Hreflang Pro

Há uma extensão do Google Chrome que automatiza o processo de verificação da implantação do hreflang de um site. Obtenha informações privilegiadas sobre este e outros complementos de SEO para Chrome que podem ajudá-lo a gerenciar a manutenção diária de SEO.

Conclusão

Compreender, utilizar e solucionar problemas do hreflang é um requisito para o SEO de hoje. Quer ter certeza de que está fazendo todo o possível para aumentar a visibilidade do seu site em todos os cantos do mundo? Victorious se aprofunda para descobrir tendências culturais locais e padrões de compra que influenciam a pesquisa para determinar a melhor estratégia para sua campanha internacional de SEO.

Pronto para começar com uma agência de SEO? Inscreva-se para sua consulta gratuita de SEO hoje - e deixe a Victorious guiá-lo pelo processo.