Skip to content

24 agosto, 2011

El include all-head-content

A veces, tenemos la costumbre de eliminar cosas de la plantilla porque no sabemos que son, porque nos parece que “sobran” y el resultado final es impredecible. No hay problema, es parte del aprendizaje; puede hacerse siempre que probemos y luego, llegado el caso, sepamos como volver a poner todo en su lugar.

Uno de esos códigos “perturbadores” lo encontramos en el <head>, casi al inicio de la plantilla:

<b:include data='blog' name='all-head-content'/>
Muchas consultas respecto a la imposibilidad de acceder a los feeds de nuestro sitio terminan resolviéndose cuando se agrega esa línea que hemos borrado o que la plantilla que descargamos no tenía ya que lo que hace es incluir una serie de etiquetas extras.

Estas, especifican el tipo de codificación, un viejo atributo de Microsoft que no se utiliza y una “marca” que indica al creador de la página web o sea, ellos:

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
Luego, un favicon por defecto que es el que causa problemas si el nuestro lo colocamos antes de esa instrucción; una serie de etiquetas link que asocian nuestro perfil, el atributo canonical, etc:
<link href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>
<link rel="me" href="http://www.blogger.com/profile/xxxxxxxxxx" />
<link rel="openid.server" href="http://www.blogger.com/openid-server.g" />
<link href='xxxxxxxxxx' rel='canonical'/>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.blogger.com/rsd.g?blogID=xxxxxxxxxx" />
Y por últlimo, las etiquetas de los feeds:
<link rel="alternate" type="application/atom+xml" title="miTitulo - Atom" href="http://miblog.blogspot.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="miTitulo - RSS" href="http://miblog.blogspot.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="miTitulo - Atom" href="http://www.blogger.com/feeds/xxxxxxxxxx/posts/default" />
Todo eso va cambiando con el tiempo, es decir, Blogger va agregando o modificando algunas de esas etiquetas y si bien podemos colocarlas manualmente, lo mejor es dejar que ellos se encarguen de eso. Por ejemplo, recientemente, le han agregado una nueva etiqueta que podemos ver en las páginas individuales si es que en esa entrada hemos agregado alguna imagen:
<link rel="image_src" href="URL_imagen" />
Esta etiqueta es la que permite que, cuando alguien comparte un enlace de nuestro blog en Facebook, este, contenga la imagen en miniatura correpondiente a esa entrada:

 

 

Es que Facebook posee una serie de etiquetas específicas que podríamos utilizar aunque en Blogger es casi imposible. Algunas, tales como las title y description son las estándares pero otras no; por ejemplo, hay una serie de etiquetas que permitirían definir el tipo de medio, algo muy interesante para compartir audio o video:
<meta name="medium" content="tipo_de_dato" />
donde el tipo_de_dato puede ser audio, image,video, news, blog o mult
Por ejemplo, para compartir videos podríamos usar esto:
<link rel="video_src" href="URL_video"/>
<link rel="image_src" href="URL_imagen" />
<meta name="video_type" content="application/x-shockwave-flash" />
<meta name="video_height" content="valor" />
<meta name="video_width" content="valor" />
Si pudiéramos identificar los videos, incluso, sería posible solicitar que Facebok nos permitiera utilizar nuestro propio reproductor e incrustralo directamente tal como lo hacen sitios como YouTube.

Sueños al margen, el hecho que haya una etiqueta link que contiene la URL de la primera imagen de las entradas podría llegar a ser útil aunque no sé muy bien para qué y eso queda librado a la imaginación de quien quiera explorarlo.

Usando JavaScript es bastante sencillo leerla, por ejemplo, esta función devolverá la URL de la imagen o una cadena vacía.

function getImageSRC()
  var laIMG = '';
  var links = document.getElementsByTagName('link');
  for ( var i = 0; i < links.length; i ++ ) {
    if(links[i].rel=='image_src') { laIMG = links[i].href; }
  }
  return laIMG;
}

 

Articulos relacionados:

  1. Código para el diseño de e-mails y newsletters
  2. SEO para una página multilenguaje

Share your thoughts, post a comment.

(required)
(required)

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments