
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.
- El implementación Estoy más familiarizado con la adición de etiquetas HREFLANG en el encabezado de un sitio web, así que eso es lo que discutiré aquí (para encabezados HTTP y Mapa del sitio implementación, Consulte El consejo de Google 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.
- El Href valor, apunta al Enlance en mi sitio web (hipotéticamente en el ejemplo) de dónde se encuentra cada idioma / página local específica.
- El 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, 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 LOS PRODUCTOS 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.
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:
- Tenemos domain1.com en 1 cuenta de Shopify, orientada al inglés
- Tenemos domain2.fr en 1 cuenta de Shopify, dirigida al francés.
- Queremos que nuestra URL predeterminada que se muestre sea la cuenta en inglés.
- 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 sitio 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:
- Instale su traducción preferida applicación en ambas tiendas.
- Habilite cada variación de idioma que desee en cada uno (no se preocupe demasiado por el país específico por ahora).
- 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).
- 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).
- WEGLOT: excluye la anulación de HREFLANG en la configuración.
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 también debes 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 info@matt-jackson.como considerar mis servicios de consultoría aquí.
Enlaces Rápidos
- 1 ¿Qué es HREFLANG y cómo funciona?
- 2 Aplicaciones de Shopify para HREFLANG y traducción
- 3 Cómo crear manualmente etiquetas HREFLANG para Shopify Multi-sitios
- 4 Enfoque híbrido de Shopify: uso de aplicaciones y tiendas múltiples para una traducción rápida y una micro orientación
- 5 Conclusión y ayuda adicional
Hola Matt,
Por interés, si las URL de la página de contenido no coinciden, ¿funcionará la solución manual?
por ejemplo, etiquetas href-lang para contenido en:
http://www.english.co.uk/colour
http://www.usa.com/color
El contenido sería el mismo, las URL diferentes: ¿funcionaría la solución hreflang en Shopify?
Hola Daniel,
No, en este caso no funcionaría correctamente, ya que las URL que generó en las etiquetas serían diferentes.
Hola Matt,
Blog muy interesante! Me gustaría saber qué piensas de My Translate App (de Hextom), porque tengo muchos errores de hreflang y nadie puede resolverlo (ni Shopify)
Gracias
Atentamente
Edith
Hola Marina,
No he usado esa aplicación antes, tal vez puedas compartir tu URL por correo electrónico y echaré un vistazo: info@matt-jackson.com