Etiquetas HTML reales vs enlaces solo JavaScript: por qué Google necesita

El propietario de una tienda Shopify instaló una aplicación de mega menú premium el año pasado. La aplicación tenía excelentes valoraciones, animaciones hermosas e interfaz limpia. Las ventas se mantuvieron estancadas. Tres meses después, Google Search Console mostró una caída del 40% en páginas rastreadas. El problema no era el diseño del menú — era que los enlaces del menú solo existían en JavaScript. El rastreador de Google vio una página de inicio sin enlaces a páginas de categorías. Las categorías estaban huérfanas.

Este es el error de SEO de navegación más común que veo: un menú que se ve perfecto para los usuarios pero es invisible para los motores de búsqueda. La solución no es compleja, pero requiere entender la diferencia entre enlaces HTML reales y patrones de navegación solo JavaScript — y saber cómo auditar tu propio sitio para detectar el problema antes de que te cueste tráfico.

Lo que el rastreador de Google realmente ve

Cuando Google rastrea una página, realiza una solicitud HTTP a tu servidor y recibe HTML como respuesta. El rastreador analiza ese HTML buscando enlaces — específicamente, etiquetas <a> con atributos href. Cada URL que encuentra se añade a la cola de rastreo.

Este es el primer paso. El rastreador de Google puede ejecutar JavaScript (usa una versión de Chrome), pero la renderización JavaScript ocurre después, en un segundo paso, y no está garantizada para cada página. Google prioriza el primer rastreo HTML porque es rápido y confiable. Las páginas que dependen completamente de JavaScript para la navegación están en desventaja.

Esto es lo que Google busca:

<a href="/collections/summer-shoes">Summer Shoes</a>

Este es un enlace real. El atributo href contiene una URL. El rastreador de Google extrae /collections/summer-shoes y lo añade a la cola de rastreo. Esta página será rastreada e indexada.

Esto es lo que Google ignora o se pierde durante el primer paso:

<div onclick="window.location='/collections/summer-shoes'">Summer Shoes</div>
<a href="javascript:void(0)" onclick="navigate('/collections/summer-shoes')">Summer Shoes</a>
<button data-url="/collections/summer-shoes">Summer Shoes</button>

Ninguno de estos son etiquetas anchor con atributos href reales. Las URLs existen en el código (en controladores onclick o atributos data), pero el rastreador de primer paso de Google no ejecuta JavaScript ni analiza atributos data al descubrir enlaces. Estos enlaces son invisibles durante el rastreo inicial.

Google podría eventualmente descubrir estas páginas a través de otros medios (sitemaps, backlinks externos, renderización JavaScript), pero no obtendrán la prioridad de rastreo o la equidad de enlaces que proviene de ser enlazadas en el HTML de navegación principal.

Vista de código: la prueba definitiva

No necesitas herramientas especiales para verificar si tu navegación es rastreable. Cada navegador tiene una función “Ver código fuente” que muestra el HTML bruto enviado por el servidor antes de que se ejecute JavaScript. Esto es exactamente lo que ve el rastreador de primer paso de Google.

Cómo verificar

1. Abre la página de inicio de tu tienda en Chrome, Firefox o Safari.
2. Haz clic derecho en cualquier lugar de la página y selecciona “Ver código fuente de la página” (o presiona Ctrl+U en Windows, Cmd+Option+U en Mac).
3. Se abre una nueva pestaña mostrando el HTML bruto.
4. Presiona Ctrl+F (Cmd+F en Mac) y busca la URL de una de tus páginas de categoría principal — por ejemplo, /collections/women.

Si encuentras la URL dentro de una etiqueta anchor como esta:

<a href="/collections/women">Women's Clothing</a>

Tu navegación es rastreable. Google puede seguir ese enlace.

Si la URL no aparece en Vista de código en absoluto, o si solo aparece en una etiqueta <script> o atributo data como este:

<div class="menu-item" data-url="/collections/women">Women's Clothing</div>

Tu navegación no es rastreable en el primer paso. El rastreo HTML inicial de Google la omitirá.

Móvil vs escritorio

Muchas tiendas usan diferentes implementaciones de navegación para móvil y escritorio. La versión de escritorio podría usar etiquetas anchor HTML semánticas mientras que la versión móvil usa menús hamburguesa solo JavaScript. Como Google usa indexación mobile-first (la versión móvil es la versión principal que Google rastrea), necesitas verificar el HTML móvil por separado.

En Chrome:

1. Abre DevTools (F12 o haz clic derecho → Inspeccionar).
2. Haz clic en el icono de barra de herramientas de dispositivos (o presiona Ctrl+Shift+M / Cmd+Shift+M).
3. Selecciona un dispositivo móvil del menú desplegable (iPhone SE, por ejemplo).
4. Recarga la página.
5. Haz clic derecho y Ve Código de nuevo.

Busca tus URLs de categoría en el HTML móvil. Si no aparecen, el rastreador móvil de Google no está viendo tus enlaces de navegación.

Patrones comunes que fallan la prueba de Vista de código

Patrón 1: Mega menús generados por JavaScript

Muchas aplicaciones de menú modernas funcionan así:

1. El servidor envía HTML mínimo — solo un botón de activación de menú.
2. Cuando el usuario pasa el ratón o hace clic, JavaScript obtiene datos de menú de una API o analiza un objeto JSON.
3. JavaScript construye el DOM completo (incluyendo todas las etiquetas <a>) e lo inyecta en la página.

HTML de ejemplo enviado por el servidor:

<button id="mega-menu-trigger">Shop</button>
<div id="mega-menu-container"></div>
<script>
  const menuData = {
    "women": {"label": "Women", "url": "/collections/women"},
    "men": {"label": "Men", "url": "/collections/men"}
  };
  // JavaScript construye e inyecta enlaces cuando el usuario interactúa
</script>

Vista de código muestra el botón y el contenedor vacío. Los enlaces aún no existen. El rastreo de primer paso de Google no ve enlaces a páginas de categorías.

Patrón 2: Enrutamiento de aplicación de una sola página

Las tiendas construidas con React, Vue u otros frameworks SPA a menudo usan enrutamiento del lado del cliente. El menú podría verse así en el código del framework:

<Link to="/collections/summer-shoes">Summer Shoes</Link>

Si esto es rastreable depende de cómo el framework lo renderiza y si la aplicación usa renderización del lado del servidor. Si la aplicación es un SPA puro del lado del cliente (el servidor envía un shell index.html único y JavaScript renderiza todo), Vista de código muestra un shell vacío sin enlaces de navegación:

<!DOCTYPE html>
<html>
<head><title>Store</title></head>
<body>
  <div id="root"></div>
  <script src="/bundle.js"></script>
</body>
</html>

Todo el contenido, incluyendo la navegación, es renderizado por JavaScript. El rastreo de primer paso de Google no ve nada.

Patrón 3: Controladores onclick sin href

Algunos menús usan etiquetas anchor pero ponen la lógica de navegación en controladores onclick y usan javascript:void(0) como href:

<a href="javascript:void(0)" onclick="goToCategory('women')">Women</a>

Esto se ve como un enlace para los usuarios e incluso se comporta como un enlace cuando se hace clic, pero javascript:void(0) no es una URL real. El rastreador de Google extrae javascript:void(0) del atributo href y lo descarta porque no es una URL rastreable. El destino real (/collections/women) está enterrado en la función JavaScript goToCategory(), que el rastreador no ejecuta durante el análisis HTML de primer paso.

Patrón 4: Divs y botones con atributos data

Los desarrolladores a veces construyen navegación usando elementos no semánticos:

<div class="nav-item" data-url="/collections/women" onclick="navigate(this.dataset.url)">
  Women
</div>

Esto funciona para los usuarios (JavaScript lee el atributo data y navega cuando se hace clic), pero no hay etiqueta <a> ni atributo href. El rastreador de Google no busca URLs en atributos data. El enlace es invisible.

Cómo reparar enlaces solo JavaScript

Solución 1: Renderiza enlaces en HTML, mejora con JavaScript

El mejor enfoque: tu servidor (o generador de sitios estáticos) emite HTML completo con etiquetas anchor reales. JavaScript añade interactividad encima.

HTML renderizado en el servidor:

<nav>
  <a href="/collections/women">Women</a>
  <a href="/collections/men">Men</a>
  <a href="/collections/kids">Kids</a>
</nav>

Este HTML es rastreable. Google ve los enlaces inmediatamente.

Entonces JavaScript lo mejora:

document.querySelectorAll('nav a').forEach(link => {
  link.addEventListener('click', (e) => {
    // Añade transiciones suaves, análisis, etc.
    // Deja que el navegador navegue normalmente (no uses preventDefault)
  });
});

La navegación funciona sin JavaScript (degradación elegante), funciona perfectamente con JavaScript (mejora progresiva), y es rastreable en ambos casos.

Solución 2: Usa renderización del lado del servidor para SPAs

Si tu tienda es una aplicación de una sola página construida con React, Vue o similar, implementa renderización del lado del servidor (SSR) o generación de sitios estáticos (SSG).

Frameworks que lo hacen fácil:

• Next.js para React
• Nuxt para Vue
• SvelteKit para Svelte
• Gatsby para sitios estáticos

Estos frameworks renderan el HTML completo (incluyendo navegación) en el servidor. La carga de página inicial entrega HTML completo y rastreable. Entonces JavaScript hidrata la página y toma el control para navegación posterior, dándote la experiencia SPA para usuarios y HTML rastreable para motores de búsqueda.

Solución 3: Verifica la configuración de tu aplicación de menú

Si estás usando una aplicación de menú de Shopify, verifica la configuración de la aplicación para una opción “Modo SEO” o “renderización del lado del servidor”. Muchas aplicaciones ofrecen esto como un interruptor. Cuando está habilitado, la aplicación renderiza enlaces de navegación en Liquid (lenguaje de plantillas del lado del servidor de Shopify) en lugar de JavaScript.

Si tu aplicación no ofrece esta opción y has confirmado (a través de Vista de código) que tu navegación no es rastreable, considera cambiar a una aplicación que lo haga. Navi+ AI Menu Builder renderiza todos los enlaces en HTML de forma predeterminada — los enlaces están en la carga útil HTML inicial, y JavaScript solo maneja la interacción y animación.

Solución 4: Mejora progresiva para menús hamburguesa

Los menús hamburguesa móviles a menudo ocultan la navegación hasta que el usuario toca el icono. El menú aún puede ser rastreable siempre que los enlaces existan en el HTML:

<nav class="mobile-menu" aria-hidden="true">
  <a href="/collections/women">Women</a>
  <a href="/collections/men">Men</a>
</nav>

CSS oculta el menú por defecto:

.mobile-menu {
  display: none;
}
.mobile-menu.is-open {
  display: block;
}

JavaScript alterna la clase cuando se toca el hamburguesa:

hamburgerButton.addEventListener('click', () => {
  mobileMenu.classList.toggle('is-open');
});

Los enlaces existen en el HTML (Vista de código los muestra), así que Google puede rastrearlos aunque estén ocultos por CSS. Esto está bien — Google no penaliza contenido oculto mientras no sea engañoso (no estás ocultando spam relleno de palabras clave).

Lo que no funciona: construir el DOM del menú móvil con JavaScript solo cuando se toca el hamburguesa:

hamburgerButton.addEventListener('click', () => {
  const menu = document.createElement('nav');
  menu.innerHTML = '<a href="/es/collections/women">Women</a>...';
  document.body.appendChild(menu);
});

Este menú no existe en el HTML hasta que el usuario interactúa. El rastreador de Google no toca iconos de hamburguesa. Los enlaces son invisibles.

Probando tu reparación

Después de que hayas actualizado tu navegación, verifica que ahora sea rastreable:

1. Prueba de Vista de código: Recarga tu página de inicio y Ve Código. Busca URLs de categoría. Confirma que aparecen en etiquetas anchor.
2. Prueba de JavaScript deshabilitado: En Chrome DevTools, deshabilita JavaScript (Configuración → Depurador → Deshabilitar JavaScript). Recarga tu página de inicio. Confirma que los enlaces de navegación son visibles y clickeables. Hacer clic en un enlace debe navegar a la página de categoría (la página se verá rota sin JavaScript, pero la navegación debe funcionar).
3. Google Search Console: Espera algunos días, luego verifica el informe de Cobertura (Páginas → Indexadas). Si las páginas de categoría previamente huérfanas comienzan a aparecer como indexadas, tu reparación funcionó.

Verifica escritorio y móvilEjecuta la prueba de Vista de código en ambas versiones escritorio y móvil de tu sitio. Si tu navegación móvil usa una implementación diferente (menú hamburguesa, aplicación diferente, estructura simplificada), pruébala por separado. La indexación mobile-first de Google significa que la versión móvil es lo que importa para los rankings.

Por qué esto importa más de lo que crees

La navegación no es solo uno de muchos enlaces internos en tu sitio — es el conjunto más prominente y consistente de enlaces que Google ve. La navegación principal aparece en cada página. Está en el encabezado, cerca de la parte superior del documento HTML, donde Google espera encontrar enlaces importantes. Cuando Google rastrea tu página de inicio, la navegación es el primer conjunto de enlaces que encuentra.

Si esos enlaces no son rastreables, Google no solo se pierde algunas páginas. Pierde la señal principal para entender tu arquitectura de sitio. Las páginas de categoría se convierten en huérfanas. Los productos enlazados solo desde esas páginas de categoría se convierten en huérfanas un nivel más profundo. Toda la estructura del sitio colapsa desde la perspectiva de Google.

Y como la navegación es tan consistente (mismo menú en cada página), el impacto se compone. Si tu navegación de página de inicio es solo JavaScript, cada página de tu sitio tiene el mismo problema. Google rastrea 100 páginas y encuentra cero enlaces de navegación en las 100 páginas. Ese no es un problema de SEO menor — es una falla fundamental de rastreabilidad.

La prueba de Vista de código lleva 30 segundos. Si tus URLs de categoría no aparecen en el HTML bruto, has encontrado la reparación de SEO más importante que puedes hacer. Todo lo demás — optimización de palabras clave, backlinks, mejoras técnicas — se construye sobre la suposición de que Google puede rastrear tus páginas. Sin navegación rastreable, esa suposición es falsa.