O que é hreflang?

Hreflang é uma tag (ou etiqueta, em português) HTML importante para websites que têm conteúdo em várias línguas. As hreflang tags permitem que os motores de busca apresentem o conteúdo do seu site no idioma preferido do utilizador. Por isso mesmo, a implementação do link hreflang é importante para a experiência do utilizador, mas também para a visibilidade do seu website.

Neste guia para iniciantes, vamos analisar as vantagens destas etiquetas e mostrar-lhe como inseri-las no seu website.

Porque é que as hreflang tags são importantes para SEO?

Estas tags desempenham um papel fundamental na otimização de motores de busca (SEO hreflang) caso queira chegar a utilizadores de vários países. Isto porque a etiqueta garante que os motores de busca apresentem o conteúdo na língua correta e ajuda a evitar a duplicação de conteúdos.

Mostrar conteúdo em várias línguas

Está a pensar criar uma loja virtual multilingue onde vende produtos ou serviços a clientes de vários países? Então é necessário adicionar etiquetas hreflang. Até porque os motores de busca utilizam as SEO hreflang tags para determinar a língua em que o conteúdo deve ser apresentado.

Vamos supor que está a visitar a Netflix a partir de Espanha. Mesmo que introduza Netflix.com no campo de pesquisa, verá provavelmente o conteúdo do site em espanhol. É assim que as etiquetas devem funcionar quando inseridas corretamente.

O mesmo se aplica ao conteúdo do seu website ou da sua loja virtual. Se a sua página não tiver SEO hreflang, arrisca-se a que o seu conteúdo traduzido não seja mostrado aos utilizadores certos.

Evite conteúdo duplicado

O link Hreflang tag também pode ajudá-lo a evitar que os motores de busca registem o conteúdo das suas páginas traduzidas como conteúdo duplicado. Neste caso, conteúdo duplicado é o conteúdo idêntico ao que já existe noutras páginas. Isto aplica-se tanto ao conteúdo que é idêntico ao conteúdo do seu próprio site como ao conteúdo de outros websites. O conteúdo duplicado é um problema porque as páginas com conteúdo que não é único correm o risco de obter uma classificação inferior nos resultados da pesquisa.

O HTML Hreflang é importante para os conteúdos duplicados porque indicam aos motores de busca que as diferentes versões linguísticas dos conteúdos se destinam a utilizadores de vários países ou regiões. Se escreveu, por exemplo, uma descrição de produto para um vaso de cerâmica feito à mão que vende na sua loja online e traduziu a descrição para sueco, norueguês e finlandês, a hreflang tag impede que os seus textos quase idênticos sejam registados como conteúdo duplicado.

Qual é o aspeto das hreflang tags?

Estas são compostas por uma sintaxe simples e uniforme. Uma boa compreensão da estrutura é essencial para implementar as etiquetas corretas no seu site. De seguida, analisamos com mais detalhe três exemplos específicos de hreflang tags que podem ser utilizadas em diferentes contextos.

Hreflang – 3 exemplos

1. Vamos supor que tem um blogue de viagens onde escreve artigos sobre todas as suas viagens em português, inglês e espanhol. Passou muito tempo a escrever e a traduzir. Por isso, quer ter a certeza de que as publicações do seu blog são apresentadas corretamente nos motores de busca. Neste caso, utilize estas hreflang tags para distinguir entre as três publicações:
   
   <link rel=”alternate” href=”https://exemplo.com/pt/page” hreflang=”pt”> 
   <link rel=”alternate” href=”https://exemplo.com/es/page” hreflang=”es”> 
   <link rel=”alternate” href=”https://exemplo.com/en/page” hreflang=”en”> 
   
2. Outro exemplo poderia ser uma clínica dentária em Espanha, que traduziu recentemente o conteúdo do seu site para português. Na esperança de atrair clientes portugueses. Se a clínica dentária também tiver páginas em inglês, para cada idioma deverá apresentar o seguinte:
   
   <link rel=”alternate” href=”https://exemplo.com/pt/page” hreflang=”pt”> 
   <link rel=”alternate” href=”https://exemplo.com/es/page” hreflang=”es”> 
   <link rel=”alternate” href=”https://exemplo.com/en/page” hreflang=”en”> 
   
3. Por último, vejamos um exemplo em que são necessárias etiquetas diferentes para várias variantes da mesma língua. Imagine uma grande plataforma de notícias online que escreve artigos em inglês britânico, inglês americano e inglês indiano. Estas variantes do inglês têm os seguintes códigos linguísticos regionais: EN-GB, EN-US e EN-IN.
   This news platform’s hreflang tags should look like this:  
    
   <link rel=”alternate” href=”https://exemplo.com/en-gb/page” hreflang=”en-gb”> 
   <link rel=”alternate” href=”https://exemplo.com/en-in/page” hreflang=”en-in”> 
   <link rel=”alternate” href=”https://exemplo.com/en-us/page” hreflang=”en-us”> 

Como são construídas as etiquetas hreflang?

Acabámos de ver três exemplos de como podem ser as hreflang tags. Agora vamos dividir uma delas em partes mais pequenas e ver o que significam cada uma delas.

Vejamos uma etiqueta do blogue de viagens do exemplo da secção anterior.

<link rel=”alternate” href=”https://exemplo.com/es/page” hreflang=”es”> 

link rel=”alternate”: A ligação nesta etiqueta é uma versão alternativa desta página.

hreflang=“es”: É alternativa porque o conteúdo está escrito noutra língua. Sendo, neste caso, o espanhol.

href=“https://exemplo.com/es/page”: A página alternativa pode ser encontrada neste URL.

Códigos de linguagem hreflang

Ao compor uma hreflang tag para o seu próprio site ou loja virtual, pode utilizar a mesma sintaxe dos exemplos. A única coisa que tem de alterar é o código da língua. Ou seja, as duas letras que indicam as línguas em que o conteúdo está disponível. Os códigos das línguas seguem a norma ISO 639-1, que é utilizada em todo o mundo.

Eis uma lista de alguns destes códigos:

• Dinamarquês: DA
• Sueco: SE
• Norueguês: NO
• Árabe: AR
• inglês: EN
• Inglês britânico: EN-GB
• Inglês americano: EN-US
• Japonês: JA

Online pode encontrar facilmente os códigos linguísticos para todas as línguas.

Gerador de hreflang tags (hreflang generator)

O processo atual de criação de etiquetas hreflang é bastante simples. No entanto, se precisar de utilizar link hreflang para muitas línguas e páginas, o processo pode ser moroso. Neste caso, pode poupar tempo utilizando um gerador de hreflang tags como este (também denominados como hreflang generator, em inglês). Existe também o hreflang checker que faz auditorias às suas etiquetas.

3 dicas importantes antes de implementar hreflang tags

Antes de nos debruçarmos sobre a forma como inserir uma hreflang tag no seu site, vejamos três regras de ouro que minimizam o risco de erro. Embora as etiquetas sejam bastante simples, podem facilmente ocorrer erros se as inserir incorretamente.

1. São bidirecionais: Isto significa que têm de apontar sempre para os dois lados. Concretamente, isto significa que se a etiqueta na sua página dinamarquesa aponta para a francesa, então, a tag na página francesa deve apontar para a dinamarquesa. Desta forma, indica aos motores de busca que gere ambas as páginas. Mostra igualmente que as duas páginas estão ligadas uma à outra.

2. As etiquetas hreflang de autorreferência são boa ideia: Isto significa, em resumo, que as hreflang tags não devem apontar apenas para outras línguas. Devem, também, apontar para si próprias. Suponha que tem a mesma página de categoria no seu site em português (https://exemplo.com/comida-gato) e em sueco (https://exemplo.com/kattmat).
   
   Cada uma destas páginas deve ter estas etiquetas:
    
   <link rel=”alternate” hreflang=”pt” href=”https://exemple.com/comida-gato”/> 
   
   <link rel=”alternate” hreflang=”se” href=”https://exemplo.com/kattmat”/> 
    

3. Utilize as tags x-default para melhorar a experiência do utilizador: Esta etiqueta é muito útil se tiver um website com conteúdos em dinamarquês, sueco e inglês, mas recebe regularmente visitantes, por exemplo, da Alemanha.
   
   Neste caso, pode utilizar as etiquetas hreflang x-default para garantir que os seus visitantes de língua alemã são direcionados para a página em inglês que, provavelmente, compreenderão melhor do que a página em dinamarquês.
   
   Assim, as etiquetas hreflang x-default proporcionam aos utilizadores uma melhor experiência no seu site. Isto porque não vão parar a uma página com conteúdos que não conseguem perceber.
   
   Esta etiqueta tem o seguinte aspeto:
   
   <link rel=”alternate” hreflang=”x-default” href=”https://example.com/”/> 

Como é que as hreflang tags são implementadas?

Agora que já vimos o aspeto das etiquetas, vamos ver como são implementadas. Isto pode ser feito através de três métodos. Estes dependem do contexto e do tipo de conteúdo.

Utilizar HTML

A forma mais básica de sinalizar aos motores de busca que a sua página existe em várias línguas é inserir a etiqueta hreflang no código HTML de uma página web. Ou seja, criando uma html hreflang. A etiqueta deve ser inserida no topo do código, no elemento <head>.

<head>- é um campo para metadados e é colocado entre a tag <html> e a tag <body>.

Aqui está um exemplo de uma página que está disponível em inglês, espanhol e português.

<!DOCTYPE html>  
< >  
<head>  
  <title>O seu fantástico título de página</title>  

<link rel=”alternate” href=”https://exemplo.com/en/page” hreflang=”en”>  

<link rel=”alternate” href=”https://exemplo.com/es/page” hreflang=”es”>  

<link rel=”alternate” href=”https://exemplo.com/pt/page” hreflang=”pt”>  

  
</head>  
<body>  
  
 O conteúdo mágico da sua página
  
</body>  
</html>  

Sempre que traduzir uma página, deve ser adicionada uma nova etiqueta hreflang a todas as versões da página. Por exemplo, se já tiver a página em dinamarquês, inglês e espanhol, mas decidir traduzi-la para alemão, a hreflang tag em alemão tem de ser inserida no código HTML de todas as páginas. Isto significa que agora tem quatro etiquetas no total em cada página. Porque todas as versões têm de ser bidirecionais e apontar umas para as outras. Ainda assim, têm também de apontar para si próprias.

Este método pode acabar por consumir muito tempo. Especialmente se tiver muitas páginas e muitas línguas no seu site. Neste caso, pode ser vantajoso utilizar o hreflang generator que mencionámos acima.

Utilizar o cabeçalho HTTP

Se tiver páginas com conteúdo que não esteja em formato HTML, pode inserir com vantagem a sua hreflang tag no cabeçalho HTTP (ou HTTP header, em inglês) da página. Um exemplo deste tipo de conteúdo são os ficheiros PDF.

Os códigos de cabeçalho HTTP contêm informações sobre os dados que são enviados de um servidor para um cliente. Como a data e o idioma preferido.

Vamos supor que tem o mesmo PDF em três idiomas diferentes: Inglês, Alemão e Sueco. O cabeçalho HTTP em cada um dos ficheiros deverá ter o seguinte aspeto:

HTTP/1.1 200 OK 

Content-Type: application/pdf 

Link: <https://exemplo.com/en/doc.pdf>; rel=”alternate”; hreflang=”en“   

<https://exemplo.com/de/doc.pdf>; rel=”alternate”; hreflang=”de”   

<https://exemplo.com/se/doc.pdf>; rel=”alternate”; hreflang=”se”  

Através do sitemap XML

O terceiro método que pode utilizar para implementar as suas etiquetas é inseri-las no sitemap XML da sua página. Pode ler mais sobre o sitemap aqui.

Resumindo, um sitemap XML é um ficheiro que fornece aos motores de busca as informações sobre as páginas individuais do seu site.

A principal vantagem deste método é que pode editar todas as suas etiquetas num único local. Ao utilizar o método HTML e o método do cabeçalho HTTP, tem de adicionar uma nova hreflang tag a cada página sempre que traduzir o conteúdo existente para uma nova língua. Isto pode ser bastante demorado.

Se optar por este método, adicione um elemento <loc> para cada URL e insira <xhtml:link> para cada uma das línguas em que a página está disponível.

Pode ler as instruções do Google e ver um exemplo aqui.

HTML-lang vs Hreflang 

HTML-lang é também uma tag que pode ser implementada para otimizar websites com conteúdo em várias línguas. No entanto, existe uma diferença entre as duas etiquetas.

A principal diferença é que HTML-lang é uma etiqueta inserida em HTML para sinalizar aos motores de busca e aos utilizadores o idioma de todo o website.

Hreflang envia sinais mais pormenorizados. Especifica os idiomas em todas as páginas individuais do seu site. Isto facilita a adaptação do conteúdo a vários países e línguas.

O motor de pesquisa do Google não utiliza HTML-lang. Por isso, recomenda que os websites com conteúdos em várias línguas utilizem a hreflang tag. No entanto, o Microsoft Bing e alguns leitores de ecrã utilizam a linguagem HTML. Ainda assim, pode fazer sentido utilizar ambas, caso queira otimizar o seu site para vários motores de pesquisa e leitores de ecrã.

Hreflang tags: vitais para sites multilingues

Se pretende melhorar a experiência do utilizador e aumentar o tráfego do seu website através da publicação de conteúdos em várias línguas, é fundamental saber como criar e implementar hreflang tags. Um site multilingue abre novas oportunidades, novos utilizadores, novos leitores e pode gerar mais conversões. Esperamos que este guia o ajude a começar!