Optimización de títulos y condicionar METAs

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;
  .......
}

Los enlaces (links) son elementos inline, es decir, miden tanto como su contenido y no generan un salto de línea automático, por eso es que podemos agregarlos en un texto sin que la página sufra colapsos:

blablabla blablabla <a href="unaURL">EL ENLACE</a> blablabla blablabla blablabla

Por lo general, el área donde podemos hacer click está definida por un color diferente y el ancho y el alto se corresponden con el ancho y alto del mismo texto sin embargo, muchas veces, nos vemos en la necesidad (o se nos da la gana) de crear enlaces un poco más "sofisticados", agregarles bordes o fondos pero, si lo hacemos, el resultado puede no parecer lo que esperábamos:

blablabla blablabla EL ENLACE blablabla blablabla blablabla

Mucho peor si se trata de alguna clase de lista con algún estilo:

<a style="background-color: #334455; border: 1px solid #556677;" href="#">ENLACE</a>

Daría como resultado algo así:

ENLACE A ALGUNA PARTE
ENLACE A OTRA PARTE
ENLACE A NINGUNA PARTE

En CSS, la propiedad que define si un elemento es de tipo inline o no es display y podemos modificarla a nuestro antojo así que nada impide que convirtamos los enlaces en el tipo contrario (block):

<a style="display: block; border: 1px solid #556677; background-color: #334455;" href="#">ENLACE</a>

El resultado sería algo así:

ENLACE A ALGUNA PARTEENLACE A OTRA PARTEENLACE A NINGUNA PARTE
Como se ve, el enlace ocupa todo el ancho del contenedor, un poco exagerado pero ahora podemos agregarle más propiedades y controlar su diseño. Claro que para eso, lo mejor es crear un clase y aplicarla. Por ejemplo:

a.enlaceDemo {
  background-color: #334455;
  border: 1px solid #556677;
  color: #AABBCC !important;
  display: block;
  height: 22px;
  line-height: 22px;
  margin: 5px;
  padding: 0 10px;
  width: 200px;
}

Y, en lugar de agregar el estilo en cada uno de ellos, indicamos la clase:

<a class="enlaceDemo" href="#">ENLACE</a>

La lista estará más ordenada:

ENLACE A ALGUNA PARTEENLACE A OTRA PARTEENLACE A NINGUNA PARTE
En general, como el color de los enlaces está predefinido, si queremos cambiarlos en algún modelo, es necesario agregarle la palabra !important para que el cambio surta efecto.

Como es una lista, usamos width y height para darles a todos el mismo tamaño. Con padding establecemos la distancia que habrá entre el contenido (el texto) y los bordes; con margin, la distancia que habrá entre un bloque (los enlaces) y otro. Por último, para que el texto quede centrado verticalmente, le damos a la propiedad line-height el mismo valor que a la propiedad height.

Por supuesto, podemos agregar cualquier otra propiedad, incluyendo imágenes de fondo:

  background: #334455 url(laImagen) no-repeat 10px 50%;
  padding: 0 10px  0 30px;

Colocamos la imagen en el fondo, la posicionamos algo hacia la izquierda (10px) verticalmente centrada (50%) y aumentamos el padding izquierdo para que el texto no se superponga:

ENLACE A ALGUNA PARTEENLACE A OTRA PARTEENLACE A NINGUNA PARTE
Podemos agregarle un efecto mouseover añadiendo una nueva definición donde cambiamos algunas propiedades por otras y usamos text-decoration: none para que no se subrayen los textos:

a.enlaceDemo:hover {
  background: #000000 url(laImagen) no-repeat 10px 50%;
  border: 1px solid #333333;
  color: #FFFFFF !important;
  text-decoration: none;
}

El último ejemplo:

ENLACE A ALGUNA PARTEENLACE A OTRA PARTEENLACE A NINGUNA PARTE
Ahora, simplemente, basta ponerse ...

A JUGAR

YouTube Cinema es otra extensión para Firefox con la que podemos mejorar la visualización de videos ya que, de manera automática o manual, se reproducen oscureciendo la pantalla y desde allí, una serie de botones semitransparentes nos permiten aumentar o disminuir su tamaño, seleccionar la calidad o establecer el color del fondo.

Si lo colocamos en modo automático y con algún video no queremos usar la extensión, basta hacer click manteniendo pulsada la tecla CTRL.

REFERENCIAS:

baluart.net