Cómo Arreglé la Etiqueta H1 de la Página de Inicio en Tiendas Shopify: Una Guía Paso a Paso para Vendedores
Como vendedor de Shopify de larga data, pensé que tenía cubiertos mis fundamentos de SEO. Optimizo mis títulos de productos, escribo descripciones únicas y trabajo duro en mis colecciones. Así que imaginen mi shock cuando recientemente descubrí que las cuatro de mis tiendas Shopify carecían del elemento de SEO on-page más importante en sus páginas de inicio: la etiqueta H1.
Pasé dos horas frustrantes navegando por los foros de la Comunidad Shopify, probando varios "arreglos rápidos" que nunca funcionaron del todo. Por eso estoy escribiendo esta guía. Después de mucho ensayo y error, desarrollé un método infalible de dos pasos que resolvió el problema limpiamente en todas mis tiendas, que usan temas gratuitos populares como Ride, Taste y Shapes.
Esta guía te guiará a través de mi proceso exacto. Descubriremos por qué existe este problema, por qué no deberías simplemente copiar lo que hacen otros sitios, y finalmente, implementar una solución perfecta de grado profesional.
Una nota rápida: Esta guía se enfoca específicamente en la página de inicio. La mayoría de los temas de Shopify asignan correctamente etiquetas H1 a tus títulos de productos, títulos de publicaciones de blog y títulos de colecciones. La página de inicio es la que casi siempre se olvida.
Paso 1: El Diagnóstico – ¿Dónde Se Fue Mi Etiqueta H1?
Lo primero que aprendí es que en la mayoría de los temas de Shopify, el problema no es que no tengas ninguna etiqueta H1. El problema es que tu etiqueta H1 se está desperdiciando en el logo de tu tienda.
Esto es malo para el SEO. Tu H1 de página de inicio debería ser una oración descriptiva con tus palabras clave principales, diciéndole a Google de qué se trata toda tu tienda. Tu logo no puede hacer eso. Aquí te muestro cómo puedes verificar tu propio sitio en menos de un minuto.
El Diagnóstico de Un Minuto:
- Ve a la página de inicio de tu tienda.
- Haz clic derecho directamente en el logo de tu tienda en el encabezado.
- Selecciona "Inspeccionar" del menú desplegable.
- Las herramientas de desarrollador de tu navegador se abrirán, con una línea de código resaltada. Mira esa línea y la directamente arriba. ¿La ves envuelta en etiquetas
<h1>?
Diagnóstico de Etiqueta H1 en Herramientas de Desarrollador
Si ves tu logo envuelto en un <h1>, tienes el mismo problema que yo tenía. Nuestra misión es primero "liberar" esta etiqueta H1 del logo, luego ponerla en uso apropiado.
Por supuesto, también puedes instalar una extensión de navegador para verificar si tu etiqueta H1 está presente y funcionando correctamente. Como esto:
Verificación de Extensión SEO
Un Desvío Rápido: Por Qué No Deberías Simplemente Copiar Otros Sitios
Durante mi investigación, encontré otros sitios web que parecían tener esto resuelto. Pero cuando inspeccioné su código, me di cuenta de que estaban cometiendo exactamente el mismo error: ¡su H1 todavía estaba en su logo! Ps: Esta es en realidad una marca DTC conocida. La descubrí a través de recomendaciones oficiales de Google y Shopify Plus, y he estado estudiando su marketing desde entonces. Puedes ver que su logo se usa como la etiqueta H1, lo cual es perezoso y totalmente incorrecto.
Ejemplo de Logo H1 de Marca
Usar el logo como H1 proporciona muy poco valor informativo a los motores de búsqueda y crawlers de IA como Google, ChatGPT o Perplexity. El H1 actúa como el eslogan de tu sitio web—debería ser una oración clara y concisa que inmediatamente les diga a los crawlers de qué se trata tu sitio. A menos que seas Nike, Coca-Cola o Disney—marcas que no necesitan introducción—esta es una oportunidad perdida.
Mejores Prácticas de Etiqueta H1
Como resultado, muchas de sus páginas de productos y colecciones terminaron reutilizando el H1 de la página de inicio, lo que puede seriamente confundir a Google y crawlers de IA como ChatGPT. Esto afecta directamente cómo se evalúa la calidad del sitio. Esto tiene un impacto negativo significativo en la visibilidad de IA de su sitio web. Ver la siguiente captura de pantalla: ¡no tienen etiqueta H1 en una página de colección muy importante!
Página de Colección Sin H1
Esta es una lección críticamente importante: no copies simplemente el código de otro sitio sin entender el principio de SEO detrás de él. Usar la etiqueta H1 para tu logo es una práctica anticuada porque:
- No es rica en palabras clave. Solo contiene el nombre de tu marca, no lo que vendes.
- No es específica de página. El logo H1 aparece en cada página individual, diciéndole a Google que tu página "Acerca de Nosotros" y una página de producto específica tienen el mismo título. Este es un error mayor de SEO.
Necesitamos una solución mejor y más profesional.
La Solución Definitiva: Un Equilibrio Perfecto de SEO y Diseño
Nuestro objetivo es simple:
- Remover el
<h1>del logo. - Agregar un nuevo
<h1>rico en palabras clave a la página de inicio que sea invisible para los usuarios pero perfectamente visible para Google, ChatGPT y otros crawlers de IA.
La Filosofía: Usaremos una clase CSS especial para ocultar visualmente nuestra nueva etiqueta H1. Es importante no usar display: none;, ya que Google puede ignorar eso. En su lugar, usamos una técnica moderna y amigable con la accesibilidad que es perfectamente segura para SEO.
El Plan Maestro de Dos Pasos
Paso 1: El Prerrequisito - Arreglando header.liquid
Primero, necesitamos decirle al tema que deje de usar <h1> para el logo.
- En tu Administrador de Shopify, ve a Tienda Online > Temas. En tu tema actual, haz clic en ... y luego Editar código.
- Abre la carpeta Sections y haz clic en el archivo header.liquid.
- Busca en el archivo (Ctrl+F o Cmd+F)
<h1. Estás buscando el código que envuelve tu logo. - Tu trabajo es cambiar la etiqueta de apertura
<h1>a<div>y la etiqueta de cierre</h1>a</div>. Puede que necesites hacer esto en uno o dos lugares dentro del archivo.
ANTES
Encabezado Antes del Arreglo
DESPUÉS: h1 a div
Encabezado Después del Arreglo
Una nota especial: En mis temas Taste, Ride y Shapes, esta etiqueta <h1> a menudo estaba dentro de una declaración {% if template.name == 'index' %}. Esto está bien. El arreglo es el mismo: cambia h1 a div donde quiera que lo encuentres envolviendo el logo.
- Haz clic en Guardar. La etiqueta H1 ahora está libre.
Paso 2: La Implementación - Modificando theme.liquid
Aquí es donde agregamos nuestro nuevo y poderoso H1. Este paso involucra editar el archivo más importante en tu tema, así que por favor ten cuidado.
- ¡Primero, haz una copia de seguridad! Ve a la página de Temas, haz clic en ... en tu tema y selecciona Duplicar. Esto crea una copia segura que puedes restaurar si algo sale mal.
- En el editor de código, abre la carpeta Layout y haz clic en theme.liquid.
- Encuentra la etiqueta de apertura
<body>cerca de la parte superior del archivo. Podría verse como<body class="gradient">o algo similar. - Pega el siguiente código en una nueva línea directamente debajo de la etiqueta de apertura
<body>.
Implementación de Theme Liquid
El Código a Pegar:
{%- if template.name == 'index' or template == 'index' -%}
<style>
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
white-space: nowrap;
}
</style>
<h1 class="visually-hidden">Tu Título de Página de Inicio Increíble - Palabras Clave Principales Aquí</h1>
{%- endif -%}
- Parte Más Importante: Cambia el texto "Tu Título de Página de Inicio Increíble - Palabras Clave Principales Aquí" a tu H1 real deseado. Por ejemplo: "Bolsos de Cuero Artesanales y Carteras Minimalistas – Tu Nombre de Marca".
- Haz clic en Guardar.
Tu Plan de Acción y Pensamientos Finales
Desde el shock inicial del descubrimiento hasta una solución final y perfecta, este viaje me enseñó una lección valiosa. Optimizar tu tienda se trata de entender los principios, no solo aplicar arreglos rápidos.
Aquí está tu lista de verificación final:
- Diagnostica Primero: Siempre verifica el logo de tu propio sitio con la herramienta "Inspeccionar" para ver si está envuelto en un
<h1>. - El Logo No Es un H1: Tu logo pertenece en un
<div>, no en una etiqueta de encabezado. Arregla esto en header.liquid. - Usa el Método Visualmente Oculto: Este es el estándar profesional para agregar un H1 sin afectar tu diseño.
- Domina el Flujo de Trabajo: El proceso "Arreglar header.liquid -> Implementar en theme.liquid" es la forma más confiable de resolver esto para siempre.
Espero que esta guía detallada te ahorre las dos horas de frustración que me costó a mí. Conseguir que tu etiqueta H1 de página de inicio esté correcta es un gran paso adelante en tu viaje de SEO.
¡Buena suerte, y siéntete libre de compartir tu éxito en los comentarios!