Guia de Tags, Aplicativos e Multi Site Shopify HREFLANG

Existem apenas 2 Aplicativos no mercado que oferecem com sucesso a tag HREFLANG implementação para um Shopify.

E se você tiver requisitos mais complicados, pode ser difícil de trabalhar com eles.

Este guia irá ajudá-lo a navegar HREFLANG em Shopifye certifique-se Google escolhe a versão certa para mostrar aos visitantes internacionais.

O que é HREFLANG e como funciona?

• Uma tag HREFLANG, é um código usado para dizer Google sobre diferentes idiomas ou versões de localização do mesmo página da Internet.
• As tags HREFLANG ajudam a definir o exclusivo com base no idioma que falam (en) ou no país em que estão localizadas + idioma (en-us).
• Google trata cada URL em tags HREFLANG como parte do mesmo URL para fins de classificação, eles são simplesmente o idioma ou a versão local apropriada da página para exibir aos visitantes.
• O implementação Estou mais familiarizado com a adição de tags HREFLANG na cabeça de um site do Network Development Group, então é isso que discutirei aqui (para cabeçalhos HTTP e Mapa implementação, Ver Conselho do Google aqui).

Um exemplo de tags HREFLANG (geradas usando A ferramenta de Aleyda aqui):

<ligação rel = "alternativo" href ="https://matt-jackson.com/" hreflang = "en" />
<ligação rel = "alternativo" href ="https://matt-jackson.com/es/" hreflang = "es-es" />
<ligação rel = "alternativo" href ="https://matt-jackson.com/fr-ca/" hreflang = "fr-ca" />
<ligação rel = "alternativo" href ="https://matt-jackson.com/pt-br/" hreflang = "fr-fr" />
<ligação rel = "alternativo" href ="https://matt-jackson.com/" hreflang = "x-default" />

As partes em negrito do código são os bits nos quais devemos nos concentrar.

• O Href valor, aponta para o URL no meu site do Network Development Group (hipoteticamente no exemplo) de onde cada idioma / página local específico está localizado.
• O HREFLANG valor descreve o idioma, ou idioma + local, que este URL é a segmentação.

Como escolher seu país / idioma de destino?

Em um mundo perfeito, você teria páginas locais para cada variação de idioma + local possível.

No entanto, você precisa comparar a recompensa de ter conteúdo hiperlocalizado com o investimento de traduções de várias páginas.

Por exemplo, O francês é falado em muitos países, incluindo França e Canadá. Você deveria ter uma página exclusiva para a França e uma única para o Canadá (francês), ou deveria simplesmente ter uma página em francês?

Em um site de comércio eletrônico, a moeda, as estimativas de entrega, talvez até mesmo a disponibilidade de estoque e PRODUTOS os intervalos podem ser diferentes na França e no Canadá; nesse caso, ter uma versão exclusiva para cada um faria muito sentido.

No entanto, se você está vendendo produtos digitais ou vendendo a mesma variedade de um local de distribuição central, então você pode se safar tendo um trocador de moeda e várias estimativas de entrega dependendo do local.

Aplicativos Shopify para HREFLANG e tradução

Eu só encontrei 2 Aplicativos na loja Shopify que traduz (usando autotranslate) e implementa tags HREFLANG.

Nenhum deles é perfeito (você provavelmente precisará de traduções manuais para ajustá-lo), e em muitos cenários você precisará personalizar seu implementação para complementar o SEO que o Aplicativos produzir.

Aqui estão os prós e os contras de cada um:

WEGLOT

https://apps.shopify.com/weglot

Prós:

• Desenvolvedores úteis
• Desenvolvido em múltiplos CMS
• Pode excluir URLS da tradução.
• Tags HREFLANG criadas corretamente.

Contras:

• Sem Internacional Mapa
• Os URLs traduzidos são complicados: domínio.com/ a / l / fr /url
• Versões de países diferentes do mesmo idioma devem estar em um novo domínio / subdomínio.
• Nenhuma tag x-default.
• A função multi-domínio não gera tags HREFLANG entre domínios.

LangShop

https://apps.shopify.com/langshop

Prós:

• A nova versão permite limpar a subpasta implementação: dominio.com/fr/
• Desenvolvedores úteis
• Padrões Mapa
• Opções de seleção de moeda

Contras

• Não é possível integrar várias lojas para diferentes idiomas (todas as traduções e tags apontam para um único domínio).
• Versões de países diferentes do mesmo idioma devem estar em um novo domínio / subdomínio.
• Não pode excluir certos urls.

Como criar manualmente tags HREFLANG para Shopify Multi-sites

Se você tem algumas lojas diferentes que segmentam idiomas diferentes, que usam o mesmo URL estrutura e você simplesmente deseja adicionar tags HREFLANG para conectá-los todos, então aqui está o que você precisa fazer:

Vou usar um exemplo para ilustrar:

1. Temos domain1.com em 1 conta do shopify, direcionado ao inglês
2. Temos domain2.fr em 1 conta do shopify, visando o francês.
3. Queremos que nosso url padrão seja a conta em inglês.
4. Cada URL string é a mesma em cada site (por exemplo, coleção de sapatos em ambos é / coleções / sapatos)

Precisamos adicionar o código HREFLANG no theme.liquid filete para o site domain1.com e o site domain2.fr.

Aqui está o código para adicionar no seção de theme.liquid filete tanto sites:

<ligação rel = "alternate" hreflang = "x-default" href ="{{canonical_url | replace: shop.domain, 'domain1.com'}}" />

<ligação rel = "alternativo" href ="{{canonical_url | replace: shop.domain, 'domain1.com'}}" hreflang = "en" />
<ligação rel = "alternativo" href ="{{canônico_url | substitua: shop.domain, 'domain2.fr'}} "hreflang =" fr "/>

Aqui está um guia de vídeo para o implementação:

Prós e Contras da Implementação Manual Multi-Site

Prós:

• Rápido e simples de configurar
• Sem custos contínuos de Aplicativos.
• Permite separar sites para diferentes locais.
• Permite múltiplos sites segmentando o mesmo idioma, mas um país diferente (en-us, en-gb etc.).

Contras:

• Requer tradução manual de todos os elementos de conteúdo e tema.
• Requer um novo site do Network Development Group para cada versão de idioma.

Abordagem híbrida da Shopify - usando aplicativos e lojas múltiplas para tradução rápida e segmentação micro

Se você tiver um cenário em que deseja segmentar 3 idiomas no site1 e 3 idiomas no site2, o que fazer?

E se você quiser ter como alvo pessoas que falam inglês no UK no site1, e pessoas que falam inglês nos EUA também no site2?

Então, uma abordagem híbrida pode ajudá-lo.

As etapas são as seguintes:

1. Instale sua tradução preferida app em ambas as lojas.
2. Ative cada variação de idioma que você deseja em cada um (não se preocupe muito com as especificações do país por enquanto).
3. Personalize o código para refletir a escolha específica do seu país em cada um (consulte a próxima seção para este código).
4. Crie tags HREFLANG manuais de store1 para colar em theme.liquid de store2 (e vice-versa) para que todas as lojas tenham todas as versões das tags HREFLANG (podem ser adicionadas ao arquivo de fragmento hreflang WEGLOT).
5. WEGLOT - exclui a substituição HREFLANG nas configurações.

Como personalizar WEGLOT para tags HREFLANG específicas de cada país

NOTA: todas as personalizações são zeradas quando você altera as configurações de idioma no WEGLOT, então salve uma cópia de suas edições e quando precisar alterar as configurações, certifique-se de colá-las posteriormente.

Agora, isso é diferente dependendo se você está editando o idioma padrão ou um idioma secundário.

Para o idioma padrão:

• Acesse Shopify Admin> Loja online> Ações> Editar código> Snippets> weglot_hreftags.liquid
• Encontrar:ligação rel = "alternativo" hreflang = "{{original_language}}" href ="{{canônico_url }} ">
• E substitua por: {% for language in original_language%}ligação rel = "alternate" hreflang = "{{idioma | substituir:" en "," en-gb "}}" href ="{{canonical_url}}"> {% endfor%}
• Salvar

Onde o código diz “en” e “en-gb”, eles devem ser substituídos pelo seu idioma padrão e seu novo idioma específico do local, respectivamente.

Para idiomas secundários:

• Acesse Shopify Admin> Loja online> Ações> Editar código> Snippets> weglot_hreftags.liquid
• Encontre: {% for language in destination_languages%} href ="https: // {{request.host}} / a / l / {{language}} {{canonical_path}}"> {% endfor%}
• E adicione suas regras de substituição de idioma adicionais a ele nesta seção: hreflang = "{{idioma | substituir:" zh "," zh-CN "| substituir:" tw "," zh-TW "}}"
• Substituição de exemplo para alterar fr para fr-fr:
• hreflang = "{{idioma | substituir:" zh "," zh-CN "| substituir:" tw "," zh-TW " | substitua: "fr", "fr-fr" }} "
• Você pode adicionar quantos quiser usando o mesmo método.
• Salvar

Onde o código disser “fr” e “fr-fr”, eles devem ser substituídos pelo idioma padrão e pelo novo idioma específico do local, respectivamente.

Como adicionar tags HREFLANG do Site1 ao Site2

Então, aqui está como adicionar as tags ausentes a cada site. Portanto, as tags HREFLANG do Site 2 precisam ser adicionadas ao Local 1 e vice-versa (e se você tiver 3 sites, o Site 1 precisa ter as tags HREFLANG de Local 2 e Local 3 adicionado manualmente, etc).

O exemplo do vídeo tem um domínio (ukdomain.com) voltado para o Reino Unido e um domínio (domain.com) voltado para inglês (padrão, EUA e CA), francês (CA) e espanhol (EUA).

O código que deve ser adicionado a ukdomain.com para adicionar as tags HREFLANG domain.com a ele são:

---

O código a ser adicionado ao site domain.com, para adicionar as tags HREFLANG do site ukdomain.com é:

E se o x-default não sido adicionado ainda, então isso também deve ser adicionado:

<link rel="alternate" hreflang="x-defalha "href =" {{canonical_url | substituir: shop.domain, 'domain.com'}} "/>

Isso resultará em todas as tags HREFLANG iguais em ambos os versos de sua loja.

Etapa final do WEGLOT - Parar sobreposição automática

Por padrão, nas versões traduzidas da página, o WEGLOT assumirá a configuração original.

Portanto, precisamos impedir que isso aconteça, para garantir que nossas tags personalizadas apareçam em todas as páginas de forma consistente, incluindo as versões traduzidas das páginas.

Para fazer isso, vá até a seção “Editar Traduções” no aplicativo WEGLOT, clique em Configurações do Projeto e na seção BLOCOS EXCLUÍDOS, adicione “wg-hreflang ”sem aspas:

Isso garantirá que suas edições estejam ativas em todas as versões traduzidas, que você pode verificar no Chrome visitando um dos / a / l / urls usando um agente de usuário do Googlebot e verificando as tags HREFLANG no código-fonte.

Como personalizar LANGCOMPRE para tags HREFLANG específicas do país:

(Em breve)

Conclusão e mais ajuda

Existem várias maneiras de implementar tags HREFLANG, mas geralmente é complicado e difícil de acertar em cada site (especialmente com várias lojas).

Se você quiser mais ajuda com isso, envie-me um e-mail info@matt-jackson.com, ou considere meus serviços de consultoria aqui.