Problema H1 duplicado

[juliaPN]

Buenas, 

tengo un problema con los H1 de mi Home Page (www.pintarnumeros.com)

Resulta que me sale el H1 duplicado, y es porque me está cogiendo el logo del header como H1, además del H1 que ya tenia establecido en la página. No se por que motivo sucede esto ni como cambiarlo, puesto que el titulo que me interesa como H1 es "Tienda líder en kits para pintar por números", que es el otro H1 que tengo en la página. 

He mirado en el liquid del header del theme y aparentemente no aparece nada de H1... 

Agradezco mucho la ayuda puesto que no encuentro la solución 

[Teo]

Hola, @juliaPN:

Muchas gracias por escribirnos. Entiendo que en el código de la página principal de tu tienda aparece la etiqueta H1 duplicada en el logo y en el título. Con todo, te gustaría proceder con la modificación de dicha etiqueta en el código del logo, ¿no es así? Estaré encantado de poder ayudar.

A modo de contexto, es importante tener en cuenta que Shopify tiene establecido la etiqueta H1 en la sección del logo del encabezado de la tienda por defecto. Con todo, me alegra informarte de que puedes editar el código de tu plantilla en todo momento para modificar esta sección. Antes de nada, ¿podrías confirmarme si estás usando un tema desarrollado por Shopify o por un proveedor externo? Puedes revisar esto en la sección Tienda online > Temas > Personalizar. Si haces clic en los tres puntos en la esquina superior izquierda, accederás al nombre del tema y del desarrollador.

Si se trata de un tema de Shopify, puedes modificar la etiqueta H1 del logo del encabezado y expresarla como un H2, H3, H4, H5, H6 o P. Con cualquiera de estas etiquetas, el diseño se seguirá manteniendo como hasta ahora. Para proceder con la modificación, puedes seguir estos pasos:

1. Dirígete a la sección Tienda online > Temas.
2. Haz clic en los tres puntos y Editar código.
3. Localiza la carpeta Secciones > header.liquid.
4. Busca las líneas que dicen <h1 class="header__heading">.
5. Modifica la etiqueta H1 de apertura y cierre.
6. Guarda la configuración.

Nota: Puesto que estos cambios afectan al diseño de tu tienda, desde aquí te recomendaría hacer una copia de seguridad del tema. El hecho de hacer una copia de seguridad te ayudará a descartar cualquier cambio que hayas realizado y también a comenzar de nuevo si es necesario. Te dejo un enlace en el que encontrarás una guía con más información sobre cómo duplicar un tema.

Una vez hecho esto, habrás modificado con éxito la etiqueta H1 del logo del encabezado de tu tienda. Si tu tema ha sido desarrollado por un proveedor externo y no encuentras la ruta de Secciones > header.liquid en el código de la plantilla; te recomendaría revisar la documentación del desarrollador o contactar con ellos, ya que podrán darte un mayor contexto sobre cómo proceder. Te dejo un enlace con más información sobre dónde encontrar ayudar para tu tema que estás usando en tu tienda.

Mientras tanto, me pregunto cómo está siendo tu experiencia con Shopify hasta el momento. Dime, ¿has podido comenzar a trabajar para mejorar la optimización para motores de búsqueda (SEO)? ¿Has podido hacer uso de la herramienta de informes de Shopify? Si es así, ¿Cómo van las estadísticas de sesiones, conversiones, ventas, etc. con tu negocio?

[JOYANIMAL]

Hola Teo, tengo el mismo problema en JOYANIMAL pero en vez de salirme lo que indicas ( <h1 class="header__heading">) me aparece esto otro:

<h1 class="h2 site-header__logo" itemscope itemtype="http://schema.org/Organization">

Podrías indicarme por favor?

Gracias y un saludo

[Teo]

Hola, @JOYANIMAL:

Gracias por la respuesta y por compartir conmigo cómo aparece la etiqueta HTML con el H1 en tu tienda de Shopify. Entiendo que te gustaría modificarlo a otra categoría diferente de H, ¿cierto?

Con base en cómo aparece la etiqueta en tu tienda, simplemente tendrás que modificar la sección de apertura. Esto es, solo tienes que cambiar el apartado que dice H1. Por lo tanto, para proceder; puedes modificar tu actual etiqueta <h1 class="h2 site-header__logo"...> para que quede como te muestro a continuación. Te pongo de ejemplo un cambio de etiqueta H1 a H2:

 <h2 class="h2 site-header__logo"...>

Nota: Como sabrás, el lenguaje HTML rige etiquetas de apertura (que sería la que estamos modificando) y de cierre. Por ello, para evitar cualquier tipo de error en el código, tendrás que localizar también la actual etiqueta de cierre del H1. Esta se debería de mostrar como </h1>. Según los cambios que estamos realizando, necesitarás cambiar la etiqueta de cierre para que quede como </h2>.

Hecho esto, habrás modificado la sección actual de H1 de tu tienda a H2. Si estás siguiendo los pasos de la guía de mi mensaje anterior; estos se aplicarán en la sección del encabezado de tu tienda. Dicho todo esto, ¿podrías confirmarme si la etiqueta H1 también te aparece actualmente duplicada?

También como comento, puesto que estos cambios requieren modificar el código; siempre recomendamos duplicar tu tema como copia de seguridad o consultar con nuestros especialistas si ellos pueden aplicar este cambio a través de este enlace. Alternativamente, también tienes la opción de contratar a un experto de Shopify. Este es un portal de especialistas y desarrolladores que pueden darte un presupuesto para cualquier tipo de modificación que necesites implementar en tu tienda. Mientas tanto, ¿cómo va el resto de configuraciones con tu tienda de Shopify?

[JOYANIMAL]

Muchas gracias Teo, ya lo tengo bien. Un saludo!!

[ETNIKE]

Hola Teo, tengo el mismo problema en https://etnike.com pero en el header.liquid de mi tema Dawn versión 15.0.1 no aparece ningún h1.

Dónde puede estar?

Gracias y un saludo

[Teo]

Hola, @ETNIKE:

Gracias por la respuesta. Entiendo que estás intentando editar la etiqueta de H1 en tu tienda. Sin embargo, esta no aparece dentro de la sección de Header.liquid, ¿cierto? Será un placer ayudar.

Antes de nada, tras inspeccionar tu tienda con el navegador de Chrome, me he percatado de que la etiqueta H1 solamente aparece en el logo del menú principal de la tienda. El resto de secciones y títulos tienen una etiqueta de H2. Dime, ¿deseas modificar la etiqueta H1 del logo principal de la tienda? Si este es el caso, ¿deseas también establecer algún otro H1? Te comento esto porque las etiquetas de código H1 ayudan a los motores de búsqueda a entender el contenido de una página. Siempre se recomienda tener uno.

Dicho esto, tras verificar el tema Dawn en versión 15.0.1, puedo confirmarme que la etiqueta H1 del logo del menú principal se encuentra configurada en la sección de Header.liquid. En caso de que la etiqueta no aparezca en tu tienda, ¿recientemente has instalado alguna app o has hecho otros cambios de código? En ocasiones, las apps o cambios de código pueden afectar a las secciones predeterminadas de tu tema.

Para verificar esta cuestión, te recomendaría instalar una nueva versión del tema Dawn en tu tienda de Shopify. Al instalar un nuevo tema, este aparecerá en la sección de Tienda online > Temas > Biblioteca de temas. Sobre esta plantilla, haz clic en los Tres puntos > Editar código y dirígete a la sección de Sections > Header.liquid. En este nuevo tema, ¿te aparece la etiqueta H1 correctamente configurada?

Nota: Para agilizar el proceso de búsqueda de la etiqueta H1 en la sección de Header.liquid, te recomendaría filtrar la búsqueda. Pues este archivo contiene bastantes líneas de código. Para ello, una vez que accedas a esta sección, haz clic en el apartado del código y pulsa Ctrl + G (Windows) o Command + G (Mac). Esto abrirá una barra de búsqueda donde puedes ingresar el texto "H1" para filtrar los resultados.

Si la etiqueta aparece correctamente en el nuevo tema, pero sigues sin poder localizarla en tu tema actual, necesitaremos acceso a tu tienda de Shopify para revisar el código de manera más exhaustiva. Para ello, puedes escribirnos a través del Centro de Ayuda, haciendo clic en Contacta con atención al cliente de Shopify. Generalmente, las opciones más comunes de contacto directo son Chat o Dejar un mensaje, según disponibilidad. Mientras revisas esto, ¿cómo va el resto de cuestiones con la configuración de tu tienda?

[ETNIKE]

Muchas gracias por la pronta ayuda, he actualizado a la 15.0.2 y sigue sin aparecerme la etiqueta, contactaré con atención al cliente.

Un saludo

[Bahariuy]

Hola Teo,

Me podrias indicar en mi codigo donde debo modificar el H1.

Como deberia de quedar para que figure como "Billeteras | Portapasaportes | Neceseres"?

<h1 class="header__heading">
{%- endif -%}
<a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset">
{%- if settings.logo != blank -%}
<div class="header__heading-logo-wrapper">
{%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}
{%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
{% capture sizes %}(min-width: 750px) {{ settings.logo_width }}px, 50vw{% endcapture %}
{% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %}
{{ settings.logo | image_url: width: 600 | image_tag:
class: 'header__heading-logo',
widths: widths,
height: logo_height,
width: settings.logo_width,
alt: logo_alt,
sizes: sizes,
preload: true
}}
</div>
{%- else -%}
<span class="h2">{{ shop.name }}</span>
{%- endif -%}
</a>
{%- if request.page_type == 'index' -%}
</h1>