Desde que trabajo con Shopify y SEO, mi intención siempre es mejorar al máximo el SEO en este CMS, pero siento que el nivel de personalización es limitado en opciones gratuitas y muchas requieren conocimiento de programación.

Hoy vengo a ayudarte con un código propio que implementa hreflang de forma sencilla, sin plugins y sin complicaciones, pero debe saber en qué casos te servirá esto.

Cuándo puedes implementar este código de hreflang a través de meta campos de Shopify

Shopify ya tiene una documentación para implementar Hreflang el en Theme Liquid, te dejo la documentación aquí. Pero este código es distinto, en Shopify generalmente se agregan etiquetas hreflang de forma automática, ya sea en subcarpetas o subdominios, pero cuando se trata de agregar hreflang en dominios independientes, todo es un caos.

Mi código te puede servir si:

• Necesitas personalizar las etiquetas hreflang según el producto o colección con dominios externos
• Has encontrado dificultades para implementar las etiquetas porque las urls no son idénticas y las opciones por defecto de Shopify no te sirve
• No tienes dinero para contratar a un experto o módulo pago
• Quieres experimentar nuevas soluciones.

Código para implementar los metacampos para hreflang en shopify

Esta idea surgió cuando intentamos agregar las etiquetas a un cliente con 2 tiendas en cuentas separadas, aunque ambas es Shopify. Si conoces el cms, cuando tienes un dominio activo en otra cuenta, la única forma de agregar ese dominio a otra tienda es desvinculando, pero no teníamos esa opción.

Crea los meta campos, accediendo a datos personalizados en Shopify, en la configuración para ser más exactos.

Ahora en la lista, selecciona en qué tipo de páginas deseas agregar los metacampos, para este ejemplo utilizaré colecciones

Completando la información del meta campo

Según los idiomas, puedes personalizar los datos y el código, en este caso necesitamos Hreflang para un sitio en inglés y español, por lo tanto se completará de la siguiente manera.

Para español: 

• Name: Custom Spanish
• Namespace and key: custom.custom_spanish_url
• Descripción: Hreflang
• Tipo: URL

 Y guardas, aquí te dejo la imágen

Para inglés: 

• Name: Custom English
• Namespace and key: custom.custom_english_url
• Descripción: Hreflang
• Tipo: URL

Nota importante

Son 2 meta campos, es decir, primero creas el de español, y luego creas el de inglés, debe lucir así cuando ya estén creados.

Revisa en colecciones 

Verifica en colecciones si ya se crearon los metacampos, su funcionamiento es sencillo, agrega las urls correspondientes para hreflang. Si estás en el sitio es español, en el Custom Spanish agregas la url actual de la colección, y en las Custom English añades la url de la variante de idioma, no importa el tipo de dominio y nombre de la url.

Haciendo que funcione el código en Shopify

Por el momento solo son meta campos, no hacen nada para mejorar el SEO de Shopify, pero agregaremos el código de Dysart Team para solucionar esto.

Te dejo el código más abajo para que lo copies y pegues:

{% if template == ‘collection’ %}

  {% assign custom_spanish_url = collection.metafields.custom.custom_spanish_url %}

  {% if custom_spanish_url != blank %}

    <link rel=»alternate» hreflang=»es-ES» href=»{{ custom_spanish_url }}» />

  {% endif %}

{% endif %}

  {% if template == ‘collection’ %}

  {% assign custom_english_url = collection.metafields.custom.custom_english_url %}

  {% if custom_english_url != blank %}

    <link rel=»alternate» hreflang=»en-US» href=»{{ custom_english_url }}» />

  {% endif %}

{% endif %}

Dónde debes agregar el código

Este código debes añadirlo al theme.liquid en la configuración de Shopify:

Si aún no encuentras, está imagen te ayudará a encontrarlo:

En los 3 puntos al lado del botón “Customize” te saldrá editar código.

Cuál es el resultado de esto

Al revisar el código, podemos apreciar que ya se ha agregado el código Hreflang, y dado solución a este tema. Solo quedaría agregar en el otro sitio, las etiquetas referenciales para que tu hreflang funcione bien.

¿Te ha servido? 

Déjame tus comentarios si has tenido algún problema, y con gusto te ayudaremos. Si te ha servido, me ayudarías mucho en este nuevo emprendimiento, si me enlazas recomendando este contenido, o como consultor SEO en Almería.

Espero verte por aquí de nuevo para ayudarte, nuestros canales están abierto a colaboraciones, no dudes en contactarnos.