Tudo o que você precisa saber sobre Hreflang e Shopify

Com mais e mais lojas do Shopify se tornando internacionais, nunca foi tão importante cuidar dos rankings do seu mecanismo de pesquisa. Embora a expansão para novas regiões crie novas e empolgantes oportunidades de mercado, também pode introduzir sérios desafios de SEO.

Os principais problemas de SEO que a expansão internacional introduz são:

• Ajudar os mecanismos de pesquisa a entender qual página deve ser classificada para qual região/idioma
• Impedindo que páginas específicas de região ou idioma criem problemas de conteúdo duplicado

Neste artigo, apresentamos a você um recurso chamado Hreflang, usado para resolver esses problemas internacionais de SEO.

Por que precisamos de Hreflang?

Em primeiro lugar, por que precisamos de hreflang?

Quando uma marca tem vários sites destinados a diferentes regiões, como os mecanismos de pesquisa sabem qual site é destinado a qual região?

Deixe-me usar a marca de fitness Gymshark para ilustrar isso. Gymshark usa Shopify e tem sites diferentes para públicos diferentes:

Reino Unido - https://uk.gymshark.com

Alemanha - https://de.gymshark.com

França - https://fr.gymshark.com

Esses sites são traduzidos em seus idiomas nativos, o que dá ao Google uma pista enorme a qual região cada site pertence. Mas o Gymshark também tem um site nos EUA e um site canadense:

EUA - https://www.gymshark.com Canadá - https://ca.gymshark.com/

O conteúdo de ambos os sites está em inglês. Então, como os mecanismos de pesquisa os diferenciam do site em inglês do Reino Unido e garantem que cada site seja classificado na região correta?

É aqui que entra o hreflang.

O que é Hreflang?

Hreflang é um atributo HTML que indica aos mecanismos de pesquisa quando há versões alternativas de uma página destinada a um público-alvo de região/idioma diferente.

Hreflang pode ser implementado de diferentes maneiras, mas o mais comum é uma meta tag simples que vai em qualquer página que tenha versões alternativas. Aqui está um exemplo do Gymshark:

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

Esta tag hreflang é encontrada na página inicial do Gymshark do Reino Unido “https://uk.gymshark.com/”.

Ele informa aos mecanismos de pesquisa que a versão americana desta página pode ser encontrada em “https://www.gymshark.com/”.

A tag hreflang contém dois atributos principais:

1 - Href O href é um link para a página alternativa. Tem que ser o endereço de URL completo e deve ser uma página de trabalho. Ele informa aos mecanismos de pesquisa “esta é uma versão alternativa da página que está sendo visualizada no momento”.

2 - Hreflang O atributo hreflang contém o código do idioma (ISO 639-1) e opcionalmente o código do país (ISO 3166-1) do público-alvo da página alternativa. O código do país é opcional, mas o código do idioma é obrigatório.

Alguns exemplos de atributos hreflang usando diferentes combinações de idioma/país de segmentação:

• pt - Falantes de inglês
• pt-GB - Falantes de inglês no Reino Unido
• fr-FR - falantes de francês na França
• en-US - Falantes de inglês nos EUA
• it - falantes de italiano
• it-CH - falantes de italiano na Suíça.

Juntando o 'href' e o 'hreflang', os mecanismos de pesquisa saberão que esse URL alternativo (o href) é destinado a esse público específico (o hreflang).

Páginas alternativas

É importante lembrar que hreflang funciona no nível da página e não no nível do domínio. As tags Hreflang declaram 'páginas alternativas', não 'sites alternativos'. Muitos sites usam tags hreflang para declarar páginas alternativas de idioma/região no mesmo domínio.

Por exemplo, você pode usar subpastas para hospedar versões de idioma/região alternativas do seu site. É assim que a Apple configurou seus sites internacionais usando pastas:

• Reino Unido: https://www.apple.com/uk/
• ES: https://www.apple.com/es/
• FR: https://www.apple.com/fr/

X-Padrão

Há um valor especial de fallback hreflang chamado 'x-default'. Pense em 'x-default' como os mecanismos de pesquisa da página da Web devem ser classificados quando nenhum outro link hreflang corresponder ao idioma/região do pesquisador.

Usando o Gymshark como exemplo novamente. Eles têm uma loja do resto do mundo localizada em row.gymshark.com. Isso é declarado como o padrão x.

 <link rel="alternate" href="https://row.gymshark.com/" hreflang="x-default" />

Portanto, se alguém pesquisar em um idioma/local que não esteja declarado nas tags hreflang do Gymshark, o Google provavelmente exibirá a loja RoW do Gymshark.

Você precisa adicionar Hreflang?

Você só precisa adicionar tags Hreflang quando tiver duas páginas quase idênticas que atendem a diferentes idiomas/públicos regionais. Se não houver uma versão alternativa de uma página, você não precisará adicionar tags hreflang.

Regras de Hreflang

Para que as tags hreflang sejam validadas, elas devem seguir regras específicas:

1 - Links de retorno - Se uma página hreflang for vinculada a uma página alternativa, a página alternativa deve ter um link hreflang para a primeira página. Por exemplo, se um Gymshark do Reino Unido tiver um link hreflang apontando para uma página do Gymshark alemão, a página alemã deverá ter um link hreflang para a versão do Reino Unido.

2 - Páginas de trabalho - Qualquer página para a qual você link hreflang deve retornar um código de status 200. Em outras palavras, os links hreflang precisam ser páginas funcionais.

3 - Tag Hreflang de auto-referência - Qualquer página que inclua links hreflang, também deve ter um link hreflang para si mesma. Chamamos isso de link hreflang de autorreferência. O link hreflang de autorreferência deve incluir a declaração padrão de idioma/país.

Desafios de Hreflang

Agora que estabelecemos o que é hreflang e como funciona, podemos discutir por que é uma parte tão complexa do SEO. Na verdade, hreflang é provavelmente uma das partes mais difíceis de SEO para acertar.

Aqui está um tweet do analista de tendências para webmasters do Google, John Mueller, explicando como o hreflang pode ser difícil!

Adicionar as tags é bastante simples, mas manter tags hreflang que atendam às 3 regras acima pode ser extremamente desafiador.

Para sempre validar, as tags hreflang entre as diferentes páginas precisam estar sincronizadas. Algo tão simples quanto alterar um URL pode quebrar a conexão hreflang entre duas páginas.

Quando você tem mais de um site, com páginas dinâmicas e gerenciadas por equipes diferentes, você pode começar a imaginar como isso se torna complexo. Se você tiver vários sites, precisará garantir que suas equipes estejam coordenando para garantir que suas tags hreflang não sejam quebradas!

Erros de Hreflang

Lidamos com configurações hreflang quebradas o tempo todo. Estes são os problemas hreflang mais comuns que encontramos:

Sem links de retorno

De longe, o problema Hreflang mais frequente que vemos são as páginas onde não há links Hreflang de retorno. É aqui que você precisa se organizar para garantir que suas tags hreflang sempre funcionem. Se o caminho do URL mudar em uma página, mas não na outra, as tags hreflang ficarão fora de sincronia.

Não-200 páginas

As tags Hreflang precisam apontar para páginas de trabalho que retornam uma resposta de 200 servidores. À medida que seu site evolui, os URLs mudam. Isso quebrará suas tags hreflang, portanto, se você desativar e redirecionar páginas, certifique-se de atualizar também as tags hreflang.

Nenhuma tag Hreflang de auto-referência

Pode parecer estranho, mas se uma página tiver tags hreflang, ela também deve incluir uma tag hreflang auto-referenciada. Este é um erro comum que muitos sites cometem.

Como verificar as tags Hreflang

Verificador de tags Hreflang

A maneira mais fácil de auditar tags hreflang é usar uma extensão do Chrome chamada Hreflang Tag Checker. Depois que a extensão estiver instalada, basta visitar qualquer página e pressionar o ícone da barra de ferramentas. A extensão verificará se há tags hreflang no URL atual.

O melhor recurso dessa ferramenta é que ela realmente rastreará os links hreflang e confirmará que eles passam nas verificações de validação.

Sapo gritando

Se você deseja auditar tags hreflang em escala, o Screaming Frog é sua ferramenta preferida. O Screaming Frog rastreará um site e validará quaisquer tags hreflang descobertas durante o rastreamento.

Console de pesquisa

Há um relatório de segmentação internacional oculto na seção Relatórios legados no Search Console. Para acessar este relatório, no menu à esquerda, vá para 'Legacy Tools & Reports > International Targeting'.

Esse relatório mostrará quantas tags hreflang estão em seu site e detalhará onde há erros hreflang.

Diferentes maneiras de adicionar Hreflang

Há mais de um para implementar o Hreflang. O método de tag HTML descrito acima é de longe a maneira mais fácil de configurar hreflang, mas há duas abordagens alternativas:

Mapa do site XML

Você pode estar familiarizado com os mapas de site XML. Seu sitemap XML pode ser atualizado para incluir declarações hreflang para cada página do sitemap. Para sites grandes com sistemas complicados, essa pode ser a abordagem mais fácil.

Cabeçalhos HTTP

Sempre que um navegador da Web visita uma página, o servidor retorna informações sobre essa página ao seu navegador da Web. Isso é chamado de resposta HTTP. Você pode configurar seu servidor para retornar informações hreflang na resposta do cabeçalho HTTP.

Como adicionar o Hreflang à Shopify

Então, como você realmente adiciona tags hreflang à Shopify? Como a maioria dos sistemas de gerenciamento de conteúdo, Shopify tem nuances que afetam o que você pode e não pode fazer na plataforma. Embora seja possível adicionar hreflang à Shopify por meio dos métodos XML Sitemap ou HTTP Headers, isso requer uma configuração técnica significativa, portanto, não recomendamos.

Para sites da Shopify, nossa abordagem recomendada para implementar o Hreflang é sempre tags HTML. A adição física de tags hreflang ao seu site é bastante fácil, mas você precisa fazer isso de uma maneira que garanta que suas tags hreflang sempre validem. Lembre-se das três regras acima:

• Deve haver um link de retorno hreflang da página alternativa
• A página alternativa deve ser um URL funcional
• Deve haver uma tag hreflang de auto-referência em qualquer página que inclua tags hreflang

Adicionar Hreflang à Shopify por meio de um aplicativo

Existem alguns aplicativos da Shopify que adicionam tags Hreflang às suas páginas para você. Aplicativos de tradução como Weglot e Langify irão gerar automaticamente suas tags Hreflang e adicioná-las às suas páginas.

Embora os aplicativos possam adicionar tags hreflang à sua loja da Shopify, em nossa experiência, esse não é o melhor método. A abordagem do aplicativo só funciona quando você tem uma única loja que oferece vários idiomas. A maioria dos aplicativos não fornece segmentação hreflang por idioma+país nem os aplicativos são considerados em várias lojas em diferentes domínios. Apps da Shopify não são nossa abordagem recomendada para hreflang.

Adicione tags Hreflang ao seu arquivo theme.liquid

Se você tiver duas lojas com páginas e URLs idênticos (onde apenas o domínio é diferente), adicionar tags hreflang válidas pode ser bastante fácil. Como os dois sites são clones completos, você sabe que para cada página do Site A, há um equivalente no Site B.

Portanto, você pode editar o código do seu tema para construir dinamicamente suas tags hreflang usando o caminho da URL da página que está sendo visualizada.

Isso é o que o código líquido abaixo faz:

 <link rel="alternate" hreflang="x-default" href="{{ canonical_url | replace: shop.domain, 'www.mystore.com' }}" /> <link rel="alternate" href="{{ canonical_url | replace: shop.domain, 'www.mystore.com' }}" hreflang="en-GB" /> <link rel="alternate" href="{{ canonical_url | replace: shop.domain, 'www.us.mystore.com' }}" hreflang="en-US" />

Este trecho de código pode ser adicionado ao seção do seu arquivo theme.liquid. Você precisa substituir as instâncias 'mystore.com' por seus nomes de domínio reais. Quando esse snippet estiver em vigor, suas páginas produzirão tags hreflang usando a página canônica para construir o caminho do URL.

Como esse método envolve a edição do código do seu site, se você escolher essa abordagem, recomendamos que você contrate um especialista da Shopify para aplicar a alteração para você.

Use um campo personalizado (abordagem recomendada do Shopify Hreflang)

Como você adiciona tags Hreflang em vários sites da Shopify com milhares de produtos em que os identificadores de URL não correspondem? Você não terá tempo para adicionar tags hreflang página por página e um aplicativo não pode fazer isso por você.

Nesse cenário, recomendamos o uso de outro aplicativo chamado Campos personalizados. Com campos personalizados, você pode criar metacampos completamente novos em seu site. Sempre que lidamos com situações complexas de hreflang na Shopify, recomendamos que nossos clientes usem campos personalizados para criar um metacampo hreflang. O valor do metacampo hreflang é enviado para o seção da página.

Com essa abordagem, você pode criar suas próprias tags hreflang no Excel e adicioná-las diretamente ao campo personalizado página por página.

Melhor ainda, se você tiver o plano Custom Fields Plus, poderá importar suas tags hreflang do produto por meio de um upload de csv. Usamos regularmente essa abordagem para fazer upload de milhares de tags hreflang de produtos para a Shopify em minutos.

Embora essa abordagem não seja a mais simples porque você precisa configurar o metacampo personalizado (que requer um especialista da Shopify) e criar suas próprias tags hreflang, ela é de longe a mais eficaz para o gerenciamento de hreflang da Shopify em grande escala. Se você deseja uma maneira fácil de criar suas próprias tags hreflang, recomendamos o gerador de tags hreflang gratuito da Aleyda Solis.

Domínios Internacionais (Novo)

Shopify anunciou recentemente um novo recurso chamado Domínios Internacionais. Esse desenvolvimento permitirá que os lojistas da Shopify exibam sua loja em um domínio/subdomínio alternativo direcionado a um idioma/país diferente.

Com os Domínios Internacionais, você registra um domínio/subdomínio alternativo usando o código ISO de 2 letras do país de destino (por exemplo, gb.seudomínio.com). A Shopify configurará automaticamente as tags hreflang em cada domínio/subdomínio. Instruções completas sobre como fazer isso podem ser encontradas na Shopify.

Os domínios internacionais têm algumas desvantagens. Você terá que hospedar exatamente as mesmas páginas e produtos em seus domínios, o que não será adequado para todos os comerciantes. Você também não poderá editar seu conteúdo em diferentes domínios (exceto traduções).

Dito isto, este é um grande passo à frente e mostra que Shopify ouviu os comerciantes. Temos certeza de que, com o tempo, os Domínios Internacionais se tornarão nossa solução hreflang recomendada para Shopify.

Precisa de ajuda com o Hreflang?

Gerenciar hreflang é uma das partes mais complexas do SEO. Nossa equipe de SEO gerencia com sucesso o SEO internacional para dezenas de sites. Se você precisar de ajuda para otimizar seu SEO internacional, avise-nos.