Desde que apareció en escena el rel-canonical me he encontrado en una decena de situaciones distintas de las que, a base de palos, he ido aprendiendo. Hoy me gustaría compartir algunas de estas casuísticas en las que me he visto.
Por norma general
Lo ideal del rel-canonical es ponerlo en todas las páginas de un sitio web. Al menos en las páginas públicas (las que los robot son capaces de encontrar). Si tu robots.txt tiene un Disallow de alguna sección, no está de más que estas páginas también lo incluyan. Repito, en general, siempre utilizar el rel-canonical.
El rel-canonical se puede usar de dos formas: vía HTML o vía Header. En el caso del HTML simplemente hemos de colocar la meta-etiqueta en la cabecera de la página:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javier Casares</title>
<link rel="canonical" href="http://example.com/">
</head>La otra posibilidad es la de la cabecera, en cuyo caso hemos de indicar algo tal que así (por ejemplo en PHP):
header("Link: <http://example.com/> rel="canonical"");Páginas noindex-ables
Cuando tenemos un meta-noindex y un rel-canonical comienzan algunos problemas. Las opciones son dos posibles; la primera de ellas es simplemente indicar el meta-noindex y no indicar el rel-canonical.
URL actual: http://example.com/?prueba=si
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javier Casares</title>
<meta name="robots" value="noindex">
</head>Con esto simplemente esa dirección no se indexaría… porque aunque existe no queremos que se muestre… el problema de esto es que, aunque la dirección exista y no queremos que se indexe porque es exactamente igual que la página principal, se puede generar un ataque. Bing y Google aunque se les indica el “noindex” rastrean y almacenan la página, aunque no la muestran en los resultados de búsqueda, pero se tiene en cuenta, y si es mala, no mola nada.
La otra solución es la de simplemente indicar el rel-canonical…
URL actual: http://example.com/?prueba=si
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javier Casares</title>
<link rel="canonical" href="http://example.com/">
</head>En este caso, esta página también se indexa pero cualquier enlace, fuerza o como se le quiera llamar pasa automáticamente a integrarse con la página principal. En principio la URL “maligna” no debería aparecer en los resultados de búsqueda.
Y os podéis preguntar: Javi, ¿y no sería mejor poner las dos cosas? ¡Miiic!, ¡error!. Si hacemos esto se produce un agujero negro en el espacio infinito que desindexa muchas cosas. Vosotros pensáis en algo tal que así:
URL actual: http://example.com/?prueba=si
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javier Casares</title>
<link rel="canonical" href="http://example.com/">
<meta name="robots" value="noindex">
</head>Si hacemos esto, se produce una paradoja extraña. Lo que ocurre es que el rel-canonical se prioriza sobre el meta-noindex. Esto significa que:
- El buscador toma la URL
http://example.com/?prueba=siy la almacena comohttp://example.com/ - El buscador toma la URL
http://example.com/y le aplica el noindex.
¡Bien! Acabamos de desindexar de Google y Bing nuestra página principal. Sí, esto pasa… así que, niños, no pongáis nunca un rel-canonical con un meta-noindex… pero… ¿qué corre si el rel-canonical apunta a la URL correcta que ya tenía un meta-noindex anteriormente? Os explico la situación.
Imaginad que tenéis una página que, antes de pensar en ponerles el rel-canonical ya tenía puesto el meta-noindex. Es una URL correcta (o sea, la URL del navegador y la del rel-canonical coinciden) por lo que… ¿por qué no podemos aplicar el rel-canonical si Javi ha dicho al principio que recomienda ponerlo siempre? Pues, en este caso sí que tendría sentido ponerse.
URL actual: http://example.com/?pagina=5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javier Casares</title>
<meta name="robots" value="noindex">
</head>Imaginemos que la paginación de mi sitio funciona por parámetros, y que yo ya tenía el código anterior… esta página, tal y como está no se indexa, lo que es correcto porque yo lo he decidido así… ¿por qué no poner algo como esto?
URL actual: http://example.com/?pagina=5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javier Casares</title>
<link rel="canonical" href="http://example.com/?pagina=5">
<meta name="robots" value="noindex">
</head>Pues, en este caso en principio el código sí que sería correcto.
Versiones móviles
Versiones, hoy en día, para dispositivos hay 3: escritorio (versión normal), móviles (los zapatófonos) y smartphones (los que soportan HTML5). También hay varias formas de afrontar este tipo de páginas… lo que se recomienda (aunque a mi hay detalles que no me convencen, aunque se pueden llegar a corregir con un poco de ingeniería) es que se utilice responsive web design. Esto significa que dependiendo de ciertas especificaciones se carga un CSS u otro. Pero hay otras opciones como que se carguen CSS distintos según el tipo de “navegador” o directamente que haya URLs separadas según el tipo de web.
El caso que voy a tratar es concretamente el tercero, o sea, el caso en el que las versiones de los distintos dispositivos tienen URL distintas. Por ejemplo, podemos tener estas 3 versiones:
URL versión escritorio: http://www.example.com/page-one/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-one/">
<link rel="alternate" media="handheld" href="http://phone.example.com/page-one/">
<link rel="canonical" href="http://www.example.com/page-one/">
</head>En este caso indicamos una URL alternativa para dispositivos móviles http://m.example.com/page-one/ y otra URL para dispositivos inteligentes http://phone.example.com/page-one/. ¿Qué habría que indicar en cada una de estas versiones?
URL versión móvil: http://m.example.com/page-one/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<link rel="canonical" href="http://www.example.com/page-one/">
</head>URL versión smartphone: http://phone.example.com/page-one/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<link rel="canonical" href="http://www.example.com/page-one/">
</head>Y en principio hasta aquí todo lo que hay que saber sobre los rel-canonical… pero antes de acabar, un detalle sobre esto último que tiene que ver con los Sitemaps… y es que en los Sitemaps XML también se le puede indicar las direcciones URL alternativas para las versiones móviles…
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>http://www.example.com/page-one/</loc>
<xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-one/" />
<xhtml:link rel="alternate" media="handheld" href="http://phone.example.com/page-one/" />
</url>
</urlset>¡Ala, ahí queda eso!
Deja una respuesta