Canonicación en JavaScript para SEO es un tema sensible: si te pasas de listo con el <link rel="canonical"> en JS, puedes mandar señales contradictorias y perder visibilidad. Aquí te cuento, en primera persona, qué recomienda Google hoy y cómo lo traduzco a procesos prácticos para que Yoast y, sobre todo, Google, te den el “verde”.

Qué es la canonicación (y por qué importa en webs con JavaScript)

Cuando varias URLs muestran el mismo (o muy similar) contenido, canonicación es el proceso por el que Google elige una URL canónica. Declararla bien consolida señales, evita duplicados y mejora la consistencia de rastreo e indexación. Google recuerda que puedes sugerir la canónica con redirects 3xx, rel="canonical" en HTML o cabecera HTTP, y sitemap; combinarlas refuerza tu preferencia. Google for Developers

En sitios con CSR/SPA el riesgo crece porque el HTML inicial y el HTML renderizado pueden no coincidir. Si tu canónica en JavaScript contradice la del HTML, Google recibe mensajes mixtos y puede ignorarte. Google for Developers

Lo nuevo de Google: canónicas y JavaScript (mejor HTML; si usas JS, que no contradiga)

La guía oficial de Google acaba de aclararlo:

  • Mejor práctica: fija la canónica en el HTML y asegúrate de que JavaScript no la cambia.
  • Si no puedes poner canónica en HTML (limitaciones de CMS/CSR), déjala fuera del HTML y ponla solo con JavaScript para evitar conflictos entre pre-render y post-render.
  • En todos los casos, una sola canónica por página. Google for Developers+1

Traducción operativa: Canonicación en JavaScript para SEO es un plan B válido, no el plan A. Si toca usar JS, no cambies lo ya declarado en HTML y evita duplicidades. Google for Developers

Canónica en HTML vs canónica inyectada con JS

  • HTML (preferido): señal fuerte, estable y temprana (antes del render).
  • JS (solo si hace falta): Google puede verla al renderizar, pero no debe contradecir al HTML. Si JS debe establecer una diferente, no pongas ninguna en el HTML para que no haya choque. Google for Developers+1

Regla de oro: no cambies la canónica del HTML con JS

Google lo dice tal cual: no uses JS para cambiar la canónica especificada en el HTML original. Si no hay canónica en el HTML, entonces sí, puedes establecerla con JS. Punto. Google for Developers

Única canónica en la página

Duplicidades (por ejemplo, una en HTML y otra diferente tras el render) son terreno abonado para que Google elija otra URL. Una sola canónica, consistente. Google for Developers

SPA, CSR, SSR e ISR: patrones seguros para canónicas

Aquí es donde “Canonicación en JavaScript para SEO” se pone práctica:

  • CSR/SPA: prioriza self-canonical en HTML. Si el router client-side cambia rutas, no reescribas la canónica con cada navegación interna indexable; usa History API para estados pero mantén la canónica estable. (Mi experiencia: “En nuestra operativa, JavaScript ya es protocolo de trabajo; revisamos render y etiquetas críticas en el HTML inicial para que no haya sorpresas después.”)
  • SSR/ISR (Next/Nuxt): genera la canónica en el HTML del servidor para cada ruta. Evita scripts que la modifiquen en useEffect/mounted.
  • Paginaciones/variantes: coherencia entre canónica, sitemap y enlaces internos a la URL preferida. Google for Developers

Frameworks y casos prácticos (con palabras clave integradas)

Next.js / React: canonicación en JavaScript para SEO sin contradicciones

  • Usa next/head (o el nuevo metadata) para canónica en HTML.
  • Evita añadir otra con JS cuando el componente monte.
  • Si por arquitectura debes inyectarla con JS, no declares canónica en el HTML. (Yo: “Cuando un proyecto depende de JS, no renunciamos a la canónica; si no es viable en HTML, la inyectamos con JS, siempre como única etiqueta y sin contradicciones.”) Google for Developers

Nuxt / Vue: canónica en SSR y control de rutas

  • Configura la canónica SSR por ruta.
  • Comprueba que los enlaces internos apunten a la URL canónica.
  • En CSR, no cambies la canónica después del primer render. (Mi pauta: “En SPA evitamos cambiar la canónica tras el primer render y usamos rutas limpias, nunca #fragment. Funciona.”) Google for Developers

Angular: canónica declarativa en HTML

  • Pre-render o SSR con canónica estable en el <head>.
  • Evita servicios que escriban otra canónica en runtime.
  • Revisa que no existan dos etiquetas al terminar el build. Google for Developers

Checklist rápido de auditoría (GSC + renderizado + crawler JS)

  1. Fuente de verdad: ¿la canónica está en HTML y JS no la altera? Si JS debe ponerla, quita la de HTML. Google for Developers+1
  2. Única etiqueta: valida que solo hay una canónica final (raw y renderizado). Herramientas: Screaming Frog (comparar Raw vs Rendered y detectar Canonical Mismatch). Screaming Frog
  3. URL absolutas y en <head> válido; enlazado interno hacia la canónica. Google for Developers
  4. GSC → Inspección de URL: comprueba qué canónica elige Google y resuelve si “ha elegido una diferente”. Google for Developers
  5. Sitemap/Redirects alineados con tu preferida; nada de canónicas hacia URLs no indexables. Google for Developers

Errores comunes que rompen la canonicación en JavaScript

  • Dos canónicas (HTML + otra distinta tras render JS).
  • Cambiar la canónica original desde JS.
  • Relativas en entornos multi-host o staging.
  • noindex + canonical al mismo destino.
  • Canónica hacia URL con filtros o parámetros inconsistentes. (Yo: “Lo que más veo: plantillas que inyectan canónica con JS por defecto, duplicando la del HTML. Resultado: señal confusa.”) Google for Developers

¿Afecta de verdad al SEO usar JS para la canónica? Conclusiones y prioridades

  • Sí afecta, pero no por “ser JS” sino por la consistencia de señales. HTML gana por claridad; JS es válido cuando no puedes usar HTML, siempre que sea la única canónica y no contradiga nada. Google for Developers+1
  • Prioriza: HTML → enlaces internos → sitemap → redirects alineados. Si tienes que usar canonicación en JavaScript para SEO, úsala con guantes. (Mi cierre: “En nuestro protocolo, JavaScript es rutina, pero la canónica va primero en HTML; solo la movemos a JS cuando no hay alternativa, y nunca duplicada.”)

SEO con JavaScript (guía completa)

FAQ rápidas (palabras clave en preguntas)

¿Google usa una canónica inyectada con JavaScript?
Puede procesarla durante el render; prefiere HTML y prohíbe cambiarla con JS respecto al HTML original. Si no hay canónica en HTML, ponla con JS (y solo esa). Google for Developers

¿Es obligatorio rel="canonical" si ya redirijo 301?
No, pero apila señales (301 + canonical + sitemap) mejora la probabilidad de respetar tu preferencia. Google for Developers

¿Cómo compruebo la canónica final?
Con Screaming Frog (Raw vs Rendered) y GSC → Inspección de URL para ver la canónica que eligió Google. Screaming Frog+1