Canonical URL: Lo nuevo, las dudas y Blogger

Evitar el contenido duplicado suele ser una de las tareas más complicadas de cualquier blog. No se trata sólo de lidiar con scrapers o copias manuales sino del contenido duplicado que generamos nosotros mismos o, mejor dicho, que genera el servicio que utilizamos.

¿Por qué es importante? Porque el resultado en los buscadores depende de la forma en que estos evaluan los sitios y las repeticiones hacen que la "importancia" de ciertas páginas se diluya, dividiéndose en múltiples páginas. Un ejemplo sencillo de entender es lo que ocurre con un blog ¿Cuál es el contenido relevante? Evidentemente, los posts pero, de manera automática, se crean otra serie de páginas que también incluyen esos posts: páginas de archivos por fecha, páginas de categorias, páginas de etiquetas, páginas de autores, etc, etc (más información).

Por supuesto, esa duplicación no es maliciosa y por lo tanto, no será penalizada pero podría afectar la indexación al resultarle difícil a los buscadores determinar cuál es la importante y cuál es la irrelevante.

En los últimos días, los tres buscadores más importante, Google, Yahoo y Live anunciaron que incorporarán una nueva etiqueta llamada Canonical URL que está pensada para ayudarnos a eliminar ese contenido duplicado de nuestros sitios (más información).

En realidad, no será una etiqueta HTML nueva sino un atributo de la etiqueta LINK que tendrá esta sintaxis:

<link rel="canonical" href="URL_principal" />

y debería ser colocada en el head de nuestras páginas, debajo de TITLE.

¿Qué haría esa etiqueta? Informarle a los buscadores que la página que están evaluando es irrelevante y que el contenido principal está en esa a la que hace referencia el atributo HREF (más información).

¿Cómo debería usarse? Aunque aún no hay muchos detalles, una forma razonable de aplicar este criterio sería colocar esa instrucción en todas las páginas de etiquetas y archivos, estableciendo como URL_principal la página principal de nuestro blog.

Para hacerlo en Blogger, deberíamos recurrir a los condicionales, tal como lo hemos hecho con los títulos y las etiquetas META. Podríamos incorporarlo al mismo código o bien, crear uno distinto; cualquiera de los dos modos agregará esa etiqueta LINK en todas las páginas excepto la principal y las entradas individuales:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
  <b:if cond='data:blog.pageType == "index"'>
    <link href='http://nombreBlog.blogspot.com/' rel='canonical'/>
  </b:if>
  <b:if cond='data:blog.pageType == "archive"'>
    <link href='http://nombreBlog.blogspot.com/' rel='canonical'/>
  </b:if>
</b:if>

Google agrega algunos detalles y trata de responder dudas:

• rel="canonical" no es obligatorio pero es algo que tomarán muy en cuenta a la hora de indexar sitios.
• está permitido el uso de paths relativos
• se recomienda que una vez incluido, no se modifique esa URL para optimizar los resultados
• la URL debe estar en el mismo dominio o subdominio

Yahoo agrega lo suyo:

• las URLs pueden ser absolutas o relativas pero recomiendan que sean absolutas
• el efecto es similar a una redirección 301, los enlaces o referencias detectados se "transfieren" a la URL principal
• tiene carácter transitivo, si en la URL A se indica B como canonical y en B se indica C, esta última, la C, recibirá las referencias de las otras dos

Por útlimo, Live/MSN dice:

• este código no será utilizado de manera obligatoria y será evaluado junto con el resto de la información que provean los sitios para evitar errores o abusos

Moraleja: ¿debemos usarlo o no? La discusión recién comenzó y hay opiniones para todos los gustos.

Eso es lo que pregunta un navegante en Yahoo Answers:

Evidentemente, recibe algunas respuestas (menos de la que yo suponía) pero sólo una de ellas es la correcta.

Aunque ZonaFirefox hace rato que dejó Blogger para instalarse en un servidor propio que corre con WordPress, Nico no deja de experimentar ... ya sabemos que Blogger puede transformarse en una enfermedad incurable.

En este caso, lo que se le ha ocurrido es avanzar un poco más en la optimización de los títulos, algo que es fundamental a la hora de tener una buena indexación de nuestro sitio.

Hace un tiempo, se había incorporado a los datos que podíamos acceder en el HEAD de nuestra plantilla, uno que nos permitía hacer esto de manera sencilla: <data:blog.pageName/> contiene el título del post y al poder leerlo en el encabezado de nuestro sitio, nos da la posibilidad de utilizarlo para crear una etiqueta TITLE diferenciada cuando accedemos a una página individual:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> : nombreBlog</title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

De esta maner, en lugar de ver siempre esta estructura por defecto:

Nombre del blog : Título del post - Navegador

en las páginas individuales, podríamos tener esta otra:

Título del post : Nombre del blog - Navegador

o cualquier otro modelo que ponga primero el título para que los resultados en los buscadores sean más claros.

Lo que estamos haciendo es utilizar un condicional con dos posibilidades, si estamos en una pagina individual hacemos tal cosa y si no, hacemos tal otra. Sin embargo, esta no es la única condición que soporta Blogger, hay varias más que nos permiten identificar si estamos en la página de inicio, si estamos en una página de archivos, si estamos en una página de etiquetas o navegando a través de la barra inferior (Anteriores / Siguientes).

<b:if cond='data:blog.homepageUrl == data:blog.url'> es verdadero si estamos en la página inicial
<b:if cond='data:blog.pageType == &quot;item&quot;'> es verdadero si estamos en una página de posts
<b:if cond='data:blog.pageType == &quot;archive&quot;'> es verdadero si estamos en una página de archivos
<b:if cond='data:blog.pageType == &quot;index&quot;'> es verdadero si estamos en una página de etiquetas o navegación

Utilizando esto, podríamos generar títulos diferenciados para cada alternativa. Un ejemplo:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- la página principal -->
<title><data:blog.title/></title>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- las páginas individuales -->
<title><data:blog.pageName/> : <data:blog.title/></title>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<!-- las páginas de etiquetas y navegación -->
<title><data:blog.pageTitle/> : Un texto indicativo </title>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- las páginas de archivos por fecha -->
<title><data:blog.pageTitle/> : Un texto indicativo</title>
</b:if>
</b:if>
</b:if>
</b:if>

¿Qué cosas pueden ponerse? Dependerá de cada uno; estos son algunos de los datos disponibles:

data:blog.title
nombre del blog - Navegador
data:blog.pageTitle
nombre del blog - Navegador en la pagina principal
nombre del blog: Titulo post - Navegador en las páginas individuales
nombre del blog - Navegador en las páginas de navegación
nombre del blog: Fecha - Navegador en las páginas de archivos
nombre del blog: Etiqueta - Navegador en las páginas de etiquetas
data:blog.pageName
es el título del post en las páginas individuales
es la fecha las páginas de archivos
es la etiqueta en las páginas de etiquetas

Con este mismo criterio, tal vez podríamos resolver ese error que nos muestran las Herramientas para desarrolladores de Google cuando accedemos al panel de Diagnósticos | Análisis del contenido y nos dice que hay Metadescripciones duplicadas:

"Mientras rastreábamos su sitio, hemos detectado algunos problemas con el contenido de las páginas. Estos problemas no impedirán que su sitio aparezca en los resultados de búsqueda de Google pero, si intenta evitarlos, aportará más información a Google y permitirá dirigir más tráfico a su sitio. Por ejemplo, el texto del título y la metadescripción pueden aparecer en los resultados y es conveniente que sean útiles y descriptivos para atraer a los usuarios."

Usemos entonces los condicionales para crear etiquetas META diferentes. Un ejemplo:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<title><data:blog.title/></title>
<meta name='description' content='descripcion para la página principal' />
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> : <data:blog.title/></title>
<meta name='description' content='descripcion para las páginas individuales' />
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/> : CUALQUIER TEXTO</title>
<meta name='description' content='descripcion para las páginas de etiquetas' />
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<title><data:blog.pageTitle/> : CUALQUIER TEXTO</title>
<meta name='description' content='descripcion para las páginas de archivos' />
</b:if>
</b:if>
</b:if>
</b:if>

¿Servirá de algo que la descripción incluya el nombre del post en las páginas individuales? Es posible agregarlo así:

<meta expr:content='data:blog.pageName + &quot;, descripción páginas individuales&quot;' name='description'/>

Incluso, sería bueno seleccionar algunas de la etiquetas principales de nuestro sitio y crear etiquetas META específicas para cada una de ellas.

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<title><data:blog.title/></title>
<meta content='descripción para la página principal' name='description'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> : <data:blog.title/></title>
<meta expr:content='data:blog.pageName + &quot;, descripción páginas individuales&quot;' name='description'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<title><data:blog.pageTitle/></title>
<meta content='descripción genérica' name='description'/>
<b:else/>
<title><data:blog.title/> : Entradas Categoría <data:blog.pageName/></title>
<b:if cond='data:blog.pageName == &quot;UNA_ETIQUETA&quot;'>
<meta content='descripción para entradas una_etiqueta' name='description'/>
<b:else/>
<b:if cond='data:blog.pageName == &quot;OTRA_ETIQUETA&quot;'>
<meta content='descripción para entradas otra_etiqueta' name='description'/>
<b:else/>
<b:if cond='data:blog.pageName == &quot;ULTIMA_ETIQUETA&quot;'>
<meta content='descripción para entradas ultima_etiqueta' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot;, descripción para cualquier otra&quot;' name='description'/>
</b:if>
</b:if>
</b:if>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<title><data:blog.title/> : Entradas Fecha <data:blog.pageName/></title>
<meta content='descripción página archivos' name='description'/>
<b:else/>
<title><data:blog.pageTitle/></title>
<meta content='descripción genérica' name='description'/>
</b:if>
</b:if>
</b:if>
</b:if>

Devolve Me ... nosotros mismos hace 3.7 millones de años (cuando no teníamos tantos problemas).

Subimos la imagen, ubicamos los puntos de referencia sobre ella y listo: ya somos un Australopithecus Afarensis.

O un Homo Habilis o un Homo Erectus o un modernísimo Homo Heidelbergensis de ayer nomás, apenas hace quinientos mil años.

REFERENCIAS:Digital Inspiration

En cualquier esquina.

En cualquier lugar.

A cualquier edad.

... aunque a veces ...

Yo no quiero un amor civilizado, con recibos y escena del sofá;
yo no quiero que viajes al pasado y vuelvas del mercado con ganas de llorar.
Yo no quiero vecinas con pucheros;
yo no quiero sembrar ni compartir;
yo no quiero catorce de febrero ni cumpleaños feliz.

Yo no quiero cargar con tus maletas; yo no quiero que elijas mi champú;
yo no quiero mudarme de planeta, cortarme la coleta, brindar a tu salud.
Yo no quiero domingos por la tarde;
yo no quiero columpio en el jardin;
lo que yo quiero, corazón cobarde, es que mueras por mí.

Y morirme contigo si te matas
y matarme contigo si te mueres
porque el amor cuando no muere mata
porque amores que matan nunca mueren.

Yo no quiero juntar para mañana, no me pidas llegar a fin de mes;
yo no quiero comerme una manzana dos veces por semana sin ganas de comer.
Yo no quiero calor de invernadero;
yo no quiero besar tu cicatriz;
yo no quiero París con aguacero ni Venecia sin tí.

No me esperes a las doce en el juzgado; no me digas volvamos a empezar;
yo no quiero ni libre ni ocupado, ni carne ni pecado, ni orgullo ni piedad.
Yo no quiero saber por qué lo hiciste;
yo no quiero contigo ni sin ti;
lo que yo quiero, muchacha de ojos tristes, es que mueras por mí.

Y morirme contigo si te matas
y matarme contigo si te mueres
porque el amor cuando no muere mata
porque amores que matan nunca mueren.

La realidad siempre supera a la ficción ...

Me preguntaron si era posible agregar un subtítulo a las entradas y la respuesta es ... depende. No hay manera de hacerlo de manera automática ya que para eso, Blogger debería tener ese dato interno y no lo tiene. Sin emabrgo, podemos hacerlo de manera manual, creando una clase CSS que agregamos a la plantilla y que luego, usamos en los posts, adicionándola al párrafo con el texto.

Por ejemplo, lo más sencillo sería agregar antes de </b:skin> algo así:

.post-subtitulo {
  [propiedades de la fuente a utilizar]
}

Y la primera línea de un post sería:

<div class="post-subtitulo">Este es el subtítulo de la entrada.</div>

o bien:

<p class="post-subtitulo">Este es el subtítulo de la entrada.</p>

No es mucho pero con un poco de CSS puede experimentarse y conseguir algun efecto más  si empleamos las propiedades que nos permiten ubicar un elemento con precisión (más información). Estas propiedades son: position, left, top, right y bottom.

Normalmente, los títulos de las entradas tienen una etiqueta de encabezado (h1, h2, h3) y debajo de este hay un DIV cuya clase se llama post-body que contiene la entrada en si misma.

El titulo de la entrada

Este es el subtítulo de la entrada ...

Sed ipsum tellus, feugiat vel, porttitor eget, pretium consectetur; nisl! Duis nulla turpis; congue in; lobortis at, facilisis vel, magna. Duis mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras dui. Nullam iaculis, nibh non fermentum ultrices, nisi nisl laoreet quam, sit amet malesuada odio elit in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque eleifend velit non dolor! Aliquam in purus? Nullam ullamcorper urna ac dolor. Pellentesque ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras bibendum justo et dui. Nam turpis duis.

Ver cada uno de los sectores: la pagina | el título | el subtítulo | las entradas

Lo que nos permite la propiedad position es ubicar un elemento dentro de otro de manera exacta. Para esto, el elemento contenedor (el externo) debe tener establecida la propiedad como relative y el elemento a mover (el interno) debe tenerla estabecida como absolute. Con esto, lo que hacemos es decirle al navegador que ubique el segundo, no donde normalmente iría sino en alguna coordenada cuyo inicio (0,0) es el contenedor.

Por ejemplo, si tenemos dos DIVs, uno dentro del otro con este código:

<div style="position:relative;background-color:white;width:300px;margin:0 auto;height:150px;">
  <div style="position:absolute;background-color:red;width:150px;margin:0 auto;height:100px;">
  </div>
</div>

El rectángulo rojo se mostraría a partir del ángulo superior izquierdo del blanco que es el que lo contiene pero, como establecimos las posiciones, podemos "mover" el cuadrado rojo a cualquier lado dentro del contenedor usando las propiedades left y top:

<div style="position:relative;background-color:white;width:300px;margin:0 auto;height:150px;">
  <div style="position:absolute;background-color:red;width:150px;margin:0 auto;height:100px;left:50px;top:50px">
  </div>
</div>

left y top son las coordenadas relativas al origen del contenedor (el blanco) y aceptan valores negativos así que es sencillo "sacar" el contenido del contenedor:

<div style="position:relative;background-color:white;width:300px;margin:0 auto;height:150px;">
  <div style="position:absolute;background-color:red;width:150px;margin:0 auto;height:100px;left:-100px;top:-10px">
  </div>
</div>

Con este criterio, podríamos hacer que el subtítulo "subiera" y ubicarlo más arriba, junto al título o debajo de este. Para eso, debemos hacer dos cosas, agregar la propiedad position: relative al DIV de los posts y la propiedad position: absolute a los subtítulos de tal manera de poder moverlos con left y top:

.post-body {
  position: relative;
}
.post-subtitulo {
  position: absolute;
  left: valorpx;
  top: valorpx;
  [propiedades de la fuente a utilizar]
}

El titulo de la entrada

Este es el subtítulo de la entrada ...

Sed ipsum tellus, feugiat vel, porttitor eget, pretium consectetur; nisl! Duis nulla turpis; congue in; lobortis at, facilisis vel, magna. Duis mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras dui. Nullam iaculis, nibh non fermentum ultrices, nisi nisl laoreet quam, sit amet malesuada odio elit in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque eleifend velit non dolor! Aliquam in purus? Nullam ullamcorper urna ac dolor. Pellentesque ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras bibendum justo et dui. Nam turpis duis.

Ver cada uno de los sectores: la pagina | el título | el subtítulo | las entradas

click para ver el resultado en esta entrada.

Algo similar a eso podría hacerse con los títulos en si mismos, modificando la plantilla, duplicándolos y luego, desplazando uno de ellos unos pocos pixeles para, por ejemplo, crear un efecto de sombras. Un ejemplo:

<b:if cond='data:post.title'>
  <h3 class='post-title entry-title'>
    <b:if cond='data:post.link'>
      <span class='sombraTitulo'><data:post.title/></span>
      <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
      <b:if cond='data:post.url'>
        <span class='sombraTitulo'><data:post.title/></span>
        <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
        <span class='sombraTitulo'><data:post.title/></span>
        <data:post.title/>
      </b:if>
    </b:if>
  </h3>
</b:if>

Para eso, hay que agregarle al título la propiedad position: absolute y agregar las definiciones de la nueva:

.post h3 {
  position: absolute;
  .......
}
.sombraTitulo {
  left: 1px;
  position: absolute;
  top: 1px;
  .......
}