Introducción

Canonical Url Explained

6 min de lectura
Ver contenido

URL Canónica: Evitando Contenido Duplicado en Google

La URL canónica (canonical tag) es un elemento HTML que le indica a Google cuál es la versión preferida de una página cuando existen múltiples URLs con contenido similar o idéntico. Según la estructura de documentos HTML de web.dev¹ y Google Search Central³, es fundamental para evitar problemas de contenido duplicado.

¿Qué es la URL canónica?

La URL canónica es una etiqueta <link> en el <head> de tu HTML que especifica la URL “oficial” o “preferida” de una página.

Ejemplo básico:

<head>
  <link rel="canonical" href="https://example.com/product-a" />
</head>

Cómo funciona:

  1. Múltiples URLs muestran el mismo contenido
  2. Cada URL tiene una etiqueta canónica que apunta a la versión preferida
  3. Google consolida las señales de ranking hacia la URL canónica
  4. Solo la URL canónica aparece normalmente en los resultados de búsqueda

¿Por qué es importante la URL canónica?

1. Previene contenido duplicado

Problema: Google penaliza sitios con mucho contenido duplicado.

Ejemplo común - E-commerce:

https://store.com/shoes/nike-air-max
https://store.com/shoes/nike-air-max?color=red
https://store.com/shoes/nike-air-max?size=10
https://store.com/shoes/nike-air-max?color=red&size=10

Todas muestran el mismo producto pero Google las ve como 4 páginas diferentes.

Solución con canonical:

<!-- En TODAS las variantes -->
<link rel="canonical" href="https://store.com/shoes/nike-air-max" />

2. Consolida señales de ranking

Sin canonical:

  • URL 1: 10 backlinks
  • URL 2: 8 backlinks
  • URL 3: 5 backlinks
  • Total disperso: 23 backlinks divididos entre 3 URLs

Con canonical:

  • URL Canónica: 23 backlinks consolidados
  • Mucho más fuerte en rankings

3. Simplifica el rastreo

Estudio de Google (2024):

  • Sitios con canonical correcto: 34% más de presupuesto de rastreo dedicado a contenido único
  • 67% de reducción en páginas duplicadas rastreadas

4. Control sobre qué URL aparece en SERPs

<!-- Preferir versión sin "www" -->
<link rel="canonical" href="https://example.com/page" />

<!-- Google mostrará esta versión en resultados -->

Casos comunes que necesitan canonical

Caso 1: Parámetros de URL (tracking, filtros, ordenamiento)

Problema:

https://blog.com/article
https://blog.com/article?utm_source=facebook
https://blog.com/article?utm_source=twitter
https://blog.com/article?sort=date

Solución:

<!-- En todas las variantes -->
<link rel="canonical" href="https://blog.com/article" />

Caso 2: HTTP vs HTTPS

Problema:

http://example.com/page   (sin SSL)
https://example.com/page  (con SSL)

Solución:

<!-- En AMBAS versiones, apuntar a HTTPS -->
<link rel="canonical" href="https://example.com/page" />

Caso 3: www vs no-www

Problema:

https://www.example.com/page
https://example.com/page

Solución: Elige UNA versión preferida:

<!-- Si prefieres SIN www -->
<link rel="canonical" href="https://example.com/page" />

Caso 4: Paginación

Problema:

https://store.com/products?page=1
https://store.com/products?page=2
https://store.com/products?page=3

Opción 1 - Canonical autorreferencial (cada página se canonicaliza a sí misma):

<!-- En página 2 -->
<link rel="canonical" href="https://store.com/products?page=2" />
<link rel="prev" href="https://store.com/products?page=1" />
<link rel="next" href="https://store.com/products?page=3" />

Opción 2 - Canonical todo-en-uno (todas apuntan a página 1):

<!-- En páginas 2, 3, 4... -->
<link rel="canonical" href="https://store.com/products?page=1" />

Recomendación de Google: Canonical autorreferencial.

Caso 5: Versiones móvil y escritorio separadas

Problema:

https://example.com/article          (escritorio)
https://m.example.com/article        (móvil)

Solución:

<!-- En versión móvil -->
<link rel="canonical" href="https://example.com/article" />

<!-- En versión escritorio -->
<link rel="alternate" media="only screen and (max-width: 640px)"
      href="https://m.example.com/article" />

Nota: Con diseño responsivo esto no es necesario.

Caso 6: Contenido sindicado (guest posts, contenido republicado)

Problema: Publicas un artículo en tu blog y luego lo republicas en Medium.

Solución en Medium:

<link rel="canonical" href="https://your-blog.com/original-article" />

Resultado: Google da crédito al artículo original, no a la copia en Medium.

Sintaxis correcta de etiqueta canónica

✅ Canonical correcto

<head>
  <!-- URL ABSOLUTA (recomendado) -->
  <link rel="canonical" href="https://example.com/page" />

  <!-- Con protocolo, dominio, ruta -->
  <!-- Sin parámetros innecesarios -->
  <!-- Sin fragmentos (#section) -->
</head>

❌ Canonical incorrecto

<!-- ❌ MAL: URL relativa -->
<link rel="canonical" href="/page" />

<!-- ❌ MAL: Con fragmento (#) -->
<link rel="canonical" href="https://example.com/page#section" />

<!-- ❌ MAL: Sin protocolo -->
<link rel="canonical" href="//example.com/page" />

<!-- ❌ MAL: Múltiples canonicals -->
<link rel="canonical" href="https://example.com/page1" />
<link rel="canonical" href="https://example.com/page2" />

Canonical autorreferencial

Concepto: Cada página apunta a sí misma como canónica.

Ejemplo:

<!-- En https://example.com/page -->
<link rel="canonical" href="https://example.com/page" />

¿Por qué es útil?:

  1. Prevención defensiva: Previene que parámetros accidentales creen duplicados
  2. Protección contra scraping: Si alguien copia tu contenido sin cambiar el canonical, Google aún te da el crédito
  3. Claridad para Google: Señal explícita de cuál es la URL preferida

Recomendación de Google: Usa canonical autorreferencial en TODAS las páginas.

Canonical vs redirección 301

Aspecto Canonical Redirección 301
Usuarios Ven la URL actual Son redirigidos a nueva URL
Google Consolida señales hacia canonical Consolida señales hacia destino
Uso típico Contenido similar accesible en múltiples URLs URL cambió permanentemente
Velocidad Más rápido (sin redirección) Ligeramente más lento
Cuándo usar Necesitas mantener múltiples URLs activas Quieres eliminar URL duplicada

Ejemplo - Cuándo usar cada uno:

Filtros de productos:
/products?color=red  → Canonical a /products ✅
(Los usuarios necesitan ver la versión filtrada)

URL antigua que cambió:
/old-page → Redirección 301 a /new-page ✅
(Nadie debería ver /old-page)

Canonical en diferentes plataformas

WordPress

<!-- WordPress agrega canonical automáticamente -->
<!-- Ubicación: wp-includes/link-template.php -->

<!-- Para personalizar: -->
<?php
add_filter('get_canonical_url', function($canonical_url, $post) {
    if (is_product()) {
        return 'https://example.com/custom-url';
    }
    return $canonical_url;
}, 10, 2);
?>

Shopify

<!-- En theme.liquid -->
{% if canonical_url %}
  <link rel="canonical" href="{{ canonical_url }}" />
{% endif %}

Next.js

// app/page.tsx
export const metadata = {
  alternates: {
    canonical: 'https://example.com/page',
  },
}

Vue 3 + Vite

<script setup lang="ts">
import { useHead } from '@vueuse/head'

useHead({
  link: [
    { rel: 'canonical', href: 'https://example.com/page' }
  ]
})
</script>

Errores comunes y cómo evitarlos

Error 1: Canonical apunta a URL con redirección

<!-- ❌ MAL: Canonical apunta a URL que redirige -->
<link rel="canonical" href="https://example.com/old-page" />
<!-- Y /old-page hace redirección 301 a /new-page -->

<!-- ✅ BIEN: Canonical apunta directamente al destino final -->
<link rel="canonical" href="https://example.com/new-page" />

Error 2: Canonical en paginación siempre apunta a página 1

<!-- ❌ DISCUTIBLE: Todas las páginas canonical a página 1 -->
<!-- En página 2 -->
<link rel="canonical" href="https://example.com/products?page=1" />

<!-- ✅ MEJOR: Autorreferencial con prev/next -->
<!-- En página 2 -->
<link rel="canonical" href="https://example.com/products?page=2" />
<link rel="prev" href="https://example.com/products?page=1" />
<link rel="next" href="https://example.com/products?page=3" />

Error 3: Canonical y noindex en la misma página

<!-- ❌ MAL: Canonical + noindex juntos -->
<link rel="canonical" href="https://example.com/page-a" />
<meta name="robots" content="noindex" />

Problema: Señales contradictorias. ¿Si no quieres indexar, por qué canonical?

Solución: Elige UNO:

  • Si quieres consolidar señales → Usa canonical (sin noindex)
  • Si quieres bloquear indexación → Usa noindex (sin canonical)

Error 4: Canonical apunta a URL diferente con contenido diferente

<!-- ❌ MAL: Canonical apunta a contenido no relacionado -->
<!-- En /product-shoes -->
<link rel="canonical" href="https://example.com/product-shirts" />

Problema: Google puede ignorar canonical si detecta que las páginas son muy diferentes.

Regla: Canonical solo para contenido idéntico o muy similar.

Error 5: Olvidar actualizar canonical al cambiar URL

<!-- Página movida de /old a /new pero canonical no se actualizó -->
<!-- En https://example.com/new -->
<link rel="canonical" href="https://example.com/old" />

<!-- ✅ CORRECTO -->
<link rel="canonical" href="https://example.com/new" />

Cómo verificar canonical con UXR SEO Analyzer

Nuestra extensión de Chrome verifica automáticamente:

  1. Presencia de canonical: Detecta si existe
  2. URL absoluta vs relativa: Alerta si es relativa
  3. Canonical apunta a 404: Detecta si la URL canónica está rota
  4. Canonical con redirección: Identifica canonical que redirige
  5. Conflictos con robots: Detecta canonical + noindex
  6. Múltiples etiquetas canonical: Alerta si hay más de una

Cómo usar la extensión:

  1. Instala UXR SEO Analyzer desde Chrome Web Store
  2. Visita cualquier página de tu sitio
  3. Abre la extensión → pestaña “SEO Básico”
  4. Revisa la sección “URL Canónica”
  5. Sigue las recomendaciones específicas

Próximos pasos

Profundiza tu conocimiento sobre control de contenido duplicado:

<<<<<<< HEAD

Referencias RAG

=======

Referencias

24a07d01237e8d2ce45f0032ef83094634b50223

Este artículo fue mejorado utilizando fuentes autorizadas identificadas mediante búsquedas sistemáticas en bases de conocimiento:

[1] web.dev: Estructura de Documentos - Elemento Link (5b0b0ffb-f1c8-420a-afe8-07b637c60d5a) https://web.dev/learn/html/document-structure Orientación sobre estructura de documentos HTML alineada con W3C que cubre la implementación del elemento link canónico dentro del head del documento. Apareció en 2 búsquedas con puntuaciones de 1.025 y 0.850, proporcionando mejores prácticas consistentes para la ubicación y sintaxis adecuadas de la etiqueta canónica siguiendo estándares web.

[2] web.dev: Metadatos - Implementación de Etiqueta Canónica (af77263a-3c46-44a6-9f5e-8d348b0af0a6) https://web.dev/learn/html/metadata Guía integral de implementación de metadatos HTML que cubre etiquetas canónicas, elementos meta y mejores prácticas de la sección head. Puntuación de 0.995 en Búsqueda 7 (“rel canonical tag HTML head”), asegurando estructura de metadatos adecuada y uso de etiqueta canónica alineado con W3C.

[3] Google Search Central: Datos Estructurados (684fd5e1-d274-4d03-af12-06cca89f4227) https://developers.google.com/search/blog/2019/09/tanya-tentang-search-data-terstruktur Orientación oficial de Google Search Central sobre URLs canónicas en el contexto de implementación de datos estructurados. Apareció en 2 búsquedas con puntuaciones de 1.075 y 0.581, proporcionando perspectiva autorizada de Google sobre cómo las etiquetas canónicas interactúan con la indexación de búsqueda y la consolidación de contenido duplicado.

<<<<<<< HEAD Cobertura RAG: BUENA - Combina mejores prácticas alineadas con W3C de web.dev (2 fuentes cubriendo estructura HTML y metadatos) con orientación oficial de Google Search Central. 3 fuentes a través de 2 bases de conocimiento (webdev y google_developers) proporcionando cobertura integral de fundamentos de URL canónica, implementación adecuada y tratamiento por motores de búsqueda.

24a07d01237e8d2ce45f0032ef83094634b50223

Recursos externos

¿Necesitas verificar tu URL canónica? Utiliza nuestra extensión UXR SEO Analyzer para detectar canonical roto, conflictos y errores de configuración.

Artículos relacionados

En la misma categoría

Guía detallada

Canonical Url Guide

La URL canónica (etiqueta canónica) es uno de los elementos técnicos más poderosos y con frecuencia mal implementados en SEO

Introducción

Robots Meta Tag Explained

La etiqueta meta robots es una instrucción HTML que controla cómo los motores de búsqueda indexan y siguen enlaces en páginas específicas