Shopify HREFLANG Tags, aplicaciones y guía de sitios múltiples

Solo quedan 2 aplicaciones en el mercado que ofrecen con éxito la etiqueta HREFLANG implementación para buscar Shopify.

Y si tiene requisitos más complicados, puede resultar complicado trabajar con ellos.

Esta guía le ayudará a navegar por HREFLANG en Shopifyy asegúrate Google elige la versión correcta para mostrar a sus visitantes internacionales.

¿Qué es HREFLANG y cómo funciona?

• Una etiqueta HREFLANG, es un código que se utiliza para indicar Google sobre diferentes versiones de idioma o ubicación del mismo página web.
• Las etiquetas HREFLANG ayudan a definir el idioma único en función del idioma que hablan (en) o del país en el que se encuentran + idioma (en-us).
• Google trata a cada uno Enlance en etiquetas HREFLANG como parte del mismo Enlance para fines de clasificación, son simplemente el idioma o la versión local apropiada de la página para mostrar a los visitantes.
• La implementación Estoy más familiarizado con la adición de etiquetas HREFLANG en el encabezado de un página web, así que eso es lo que discutiré aquí (para encabezados HTTP y Mapa del sitio implementación, Consulte El consejo de Google aquí).

Un ejemplo de etiquetas HREFLANG (generadas usando La herramienta de Aleyda aquí):

<link rel = "alternativo" href ="https://matt-jackson.com/" hreflang = "en" />
<link rel = "alternativo" href ="https://matt-jackson.com/es/" hreflang = "es-es" />
<link rel = "alternativo" href ="https://matt-jackson.com/fr-ca/" hreflang = "fr-ca" />
<link rel = "alternativo" href ="https://matt-jackson.com/en-gb/" hreflang = "fr-fr" />
<link rel = "alternativo" href ="https://matt-jackson.com/" hreflang = "x-predeterminado" />

Las partes en negrita del código son los bits en los que centrarse.

• La Href valor, apunta al Enlance en mi página web (hipotéticamente en el ejemplo) de dónde se encuentra cada idioma / página local específica.
• La HREFLANG El valor describe el idioma, o el idioma + ubicación, que este Enlance está apuntando.

¿Cómo elegir la orientación por país / idioma?

En un mundo perfecto, tendría páginas locales para cada idioma + variación de ubicación posible.

Sin embargo, debe comparar la recompensa de tener contenido hiperlocalizado con la inversión de traducciones de varias páginas.

Por ejemplo, los El francés se habla en muchos países, incluidos Francia y Canadá. ¿Debería tener una página única para Francia y una única para Canadá (francés), o simplemente debería tener una página en francés?

En un sitio web de comercio electrónico, la moneda, las estimaciones de entrega, incluso quizás la disponibilidad de existencias y producto los rangos pueden ser diferentes en Francia que en Canadá, en cuyo caso tendría mucho sentido tener una versión única para cada uno.

Sin embargo, si vende productos digitales o vende el mismo rango desde una ubicación de distribución central, entonces puede salirse con la suya con un conmutador de moneda y múltiples estimaciones de entrega según la ubicación.

Aplicaciones de Shopify para HREFLANG y traducción

Solo he encontrado 2 aplicaciones en la tienda Shopify que traducen (usando autotranslate) e implementan etiquetas HREFLANG.

Ninguno de ellos es perfecto (probablemente necesitará traducciones manuales para ajustarlo), y en muchos escenarios necesitará personalizar su implementación para complementar el SEO que el aplicaciones Produce.

Estos son los pros y los contras de cada uno:

WEGLOT

https://apps.shopify.com/weglot

Pros:

• Desarrolladores útiles
• Desarrollado en múltiples CMS
• Puede excluir URLS de la traducción.
• Etiquetas HREFLANG creadas correctamente.

Contras:

• No Internacional Mapa del sitio
• Las URL traducidas son desordenadas: dominio.com/ a / l / fr /url
• Las versiones de diferentes países del mismo idioma deben estar en un nuevo dominio / subdominio.
• Sin etiqueta x-default.
• La función multidominio no genera etiquetas HREFLANG en todos los dominios.

LangShop

https://apps.shopify.com/langshop

Pros:

• La nueva versión permite una subcarpeta limpia implementación: dominio.com/fr/
• Desarrolladores útiles
• Internacional Mapa del sitio
• Opciones de selector de moneda

Desventajas

• No se pueden integrar varias tiendas para diferentes idiomas (todas las traducciones y etiquetas apuntan a un solo dominio).
• Las versiones de diferentes países del mismo idioma deben estar en un nuevo dominio / subdominio.
• No se pueden excluir ciertos urls.

Cómo crear manualmente etiquetas HREFLANG para Shopify Multi-sitios

Si ya tiene algunas tiendas diferentes orientadas a diferentes idiomas, que usan el mismo Enlance estructura, y simplemente desea agregar etiquetas HREFLANG para conectarlas todas, entonces esto es lo que debe hacer:

Usaré un ejemplo para ilustrar:

1. Tenemos domain1.com en 1 cuenta de Shopify, orientada al inglés
2. Tenemos domain2.fr en 1 cuenta de Shopify, dirigida al francés.
3. Queremos que nuestra URL predeterminada que se muestre sea la cuenta en inglés.
4. Cada Enlance la cadena es la misma en cada sitio web (por ejemplo, la colección de zapatos en ambos es / colecciones / zapatos)

Necesitamos agregar código HREFLANG en theme.liquid filete tanto para el sitio domain1.com como para el sitio domain2.fr.

Aquí está el código para agregar en el sección de theme.liquid filete por tanto sitios web:

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

<link rel = "alternativo" href ="{{canonical_url | replace: shop.domain, 'domain1.com'}}" hreflang = "en" />
<link rel = "alternativo" href ="{{canonical_url | reemplazar: shop.domain, 'domain2.fr'}} "hreflang =" fr "/>

Aquí hay una guía en video para implementación:

Pros y contras de la implementación manual en varios sitios

Pros:

• Configuración rápida y sencilla
• Sin costos continuos de aplicaciones.
• Permite separar sitios web para diferentes lugareños.
• Permite múltiples sitios web orientado al mismo idioma pero a un país diferente (en-us, en-gb, etc.).

Contras:

• Requiere traducción manual de todo el contenido y los elementos del tema.
• Requiere un nuevo página web para cada versión de idioma.

Enfoque híbrido de Shopify: uso de aplicaciones y tiendas múltiples para una traducción rápida y una micro orientación

Si tiene un escenario en el que desea orientar sus anuncios a 3 idiomas en el sitio1 y a 3 idiomas en el sitio2, ¿qué debe hacer?

¿Qué sucede si desea dirigirse a personas de habla inglesa en el UK en site1, y personas de habla inglesa en los EE. UU. en site2 también?

Entonces, un enfoque híbrido puede ayudarlo.

Los pasos son los siguientes:

1. Instale su traducción preferida applicación en ambas tiendas.
2. Habilite cada variación de idioma que desee en cada uno (no se preocupe demasiado por el país específico por ahora).
3. Personalice el código para reflejar la elección específica de su país en cada uno (consulte la siguiente sección para este código).
4. Cree etiquetas HREFLANG manuales desde store1 para pegarlas en theme.liquid de store2 (y viceversa) para que todas las tiendas tengan todas las versiones de las etiquetas HREFLANG (en su lugar, se pueden agregar al archivo de fragmentos de código hreflang de WEGLOT).
5. WEGLOT: excluye la anulación de HREFLANG en la configuración.

Cómo personalizar WEGLOT para etiquetas HREFLANG específicas de un país

NOTA: todas las personalizaciones se restablecen cuando cambia la configuración de idioma en WEGLOT, así que guarde una copia de sus ediciones y cuando necesite cambiar la configuración, asegúrese de pegarlas después.

Ahora bien, esto es diferente dependiendo de si está editando el idioma predeterminado o un idioma secundario.

Para el idioma predeterminado:

• Dirígete a Shopify Admin> Tienda en línea> Acciones> Editar código> Fragmentos> weglot_hreftags.liquid
• Encontrar:link rel = "alternate" hreflang = "{{original_language}}" href ="{{canonical_url }} ">
• Y reemplácelo con: {% para idioma en original_language%}link rel = "alternate" hreflang = "{{idioma | reemplazar:" en "," en-es "}}" href ="{{canonical_url}}"> {% endfor%}
• Ahorra

Donde ese código dice "en" y "en-gb", estos deben reemplazarse con su idioma predeterminado y su nuevo idioma específico de ubicación, respectivamente.

Para idiomas secundarios:

• Dirígete a Shopify Admin> Tienda en línea> Acciones> Editar código> Fragmentos> weglot_hreftags.liquid
• Buscar: {% para idioma en destination_languages%} href ="https: // {{request.host}} / a / l / {{language}} {{canonical_path}}"> {% endfor%}
• Y agregue sus reglas de reemplazo de idioma adicionales en esta sección: hreflang = "{{idioma | reemplazar:" zh "," zh-CN "| reemplazar:" tw "," zh-TW "}}"
• Ejemplo de reemplazo para cambiar fr a fr-fr:
• hreflang = "{{idioma | reemplazar:" zh "," zh-CN "| reemplazar:" tw "," zh-TW " | reemplazar: "fr", "fr-fr" }} "
• Puede agregar tantos como desee utilizando el mismo método.
• Ahorra

Donde ese código dice "fr" y "fr-fr", estos deben reemplazarse con su idioma predeterminado y su nuevo idioma específico de ubicación, respectivamente.

Cómo agregar etiquetas HREFLANG desde Site1 en Site2

Así que aquí se explica cómo agregar las etiquetas faltantes a cada sitio. Por lo tanto, las etiquetas HREFLANG del Sitio 2 deben agregarse a Página web 1 y viceversa (y si tiene 3 sitios, el sitio 1 debe tener las etiquetas HREFLANG de Página web 2 y Página web 3 agregados manualmente, etc.).

El ejemplo del video tiene un dominio (ukdomain.com) orientado al Reino Unido y un dominio (dominio.com) orientado a inglés (predeterminado, EE. UU. Y CA), francés (CA) y español (EE. UU.).

El código que se debe agregar a ukdomain.com para agregarle las etiquetas HREFLANG de domain.com es:

---

El código para agregar al sitio domain.com, para agregar las etiquetas HREFLANG del sitio ukdomain.com es:

Y si el x-default no esto añadido todavía, entonces eso también debería agregarse:

<link rel="alternate" hreflang="x-deerror "href =" {{canonical_url | reemplazar: tienda.dominio, 'dominio.com'}} "/>

Esto dará como resultado que todas las etiquetas HREFLANG sean iguales en ambos versinos de su tienda.

Paso final de WEGLOT: detener la anulación automática

De forma predeterminada, en las versiones traducidas de la página, WEGLOT tendrá la configuración original por defecto.

Por lo tanto, debemos evitar que lo haga, para asegurarnos de que nuestras etiquetas personalizadas aparezcan en todas las páginas de manera consistente, incluidas las versiones traducidas de las páginas.

Para hacer esto, vaya a la sección "Editar traducciones" en la aplicación WEGLOT, haga clic en Configuración del proyecto, y en la sección BLOQUES EXCLUIDOS, agregue "wg-hreflang ”sin comillas:

Esto asegurará que sus ediciones estén activas en todas las versiones traducidas, que puede verificar en Chrome visitando una de las / a / l / urls usando un agente de usuario de Googlebot y verificando las etiquetas HREFLANG en el código fuente.

Cómo personalizar LANGCOMPRAR etiquetas HREFLANG específicas de cada país:

(Próximamente)

Conclusión y ayuda adicional

Hay muchas formas de implementar etiquetas HREFLANG, pero a menudo es complicado y difícil hacerlo bien en cada sitio (particularmente con múltiples tiendas).

Si desea obtener más ayuda con esto, envíeme un correo electrónico [correo electrónico protegido]o considerar mis servicios de consultoría aquí.