Cargando...
Menu Ver sumario
¿Te gustó lo que viste?
Recomiéndanos

Post aleatorio






Optimizar SEO para Blogger. Evitar META duplicadas.

30/01/2012
Las etiquetas META nos sirven para ofrecer información básica a los buscadores acerca de nuestra web y de cada una de sus páginas. En las plantillas Blogger esas etiquetas prácticamente no existen, así que si las queremos a efectos de posicionamiento, tendremos que añadirlas a mano. El problema se presenta a la hora de no duplicar esa información, ya que actualmente eso no sienta muy bien al Sr. Google.


En una plantilla sin modificar, lo único que encontraremos sobre esto serán estas líneas (la primera está sólo como referencia para encontrar esta parte):

<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<meta expr:content='data:blog.metaDescription' name='description'/>


La etiqueta title es la que muestra tanto a los usuarios como a los buscadores, lo que van a encontrar en la página y aparece también en la pestaña de nuestro navegador. Es importante que sea única para cada página, pero esto es una cosa fácil de hacer siempre que no repitamos título en los posts. data:pageTitle toma el nombre del blog en la página principal y el título del post en las entradas individuales, así que usando esa variable no tendremos problemas.

Hace un tiempo, en lugar de figurar en esa parte data:blog.pageTitle, aparecía data:blog.pageName, que recoge un título en la forma NOMBRE DEL BLOG: TITULO POST.

La opción actual parece la más adecuada (data:blog.pageTitle), pero podéis personalizarla si queréis:

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

Con este código condicional, en las entradas se mostrará un título que mostrará el nombre de la entrada, un guión y el nombre del blog (p.ej.: Ancho de columnas en plantilla - Oloblogger) y en el resto de páginas lo que antes hemos explicado para data:pageTitle.

La parte en negrita es la que añade el nombre del blog tras el título del post. Esto es absolutamente opcional, aunque mucha gente recomienda hacerlo así y situar el nombre del blog tras el nombre de la entrada. Revisa tu plantilla y usa la opción que prefieras.


Volviendo a lo poquito que Blogger aporta, tras title tenemos una etiqueta meta de descripción del contenido. En teoría coincide con lo que hayáis grabado en el escritorio y para posts individuales debería mostrar en Google un resumen del contenido. De esta manera, cuando el buscador nos ofrezca a nosotros como resultado, esta descripción saldría bajo el título, con las palabras coincidentes con la búsqueda resaltadas. Algo bastante interesante.



Sin embargo, como decía antes esto es sólo en teoría, ya que he hecho diversas pruebas con Webmaster Tools para comprobar cómo "veía" Googlebot las páginas marcadas así y lo cierto es que en todos los casos, la etiqueta description me aparecía vacía de contenido, por lo que parece que data:blog.metaDescription no funciona como debiera. Chungo.

La primera opción que se pasa por la cabeza es sustituir esa variable por una descripción hecha a mano. Esto sería así:

<meta content='Aquí iría la descripción de mi blog' name='description'/>

Pero esto tiene un problema y es que TODAS las páginas nos mostrarán esa descripción y Google lo catalogará como duplicado. Lo cierto es que no hay una buena solución, así que la menos mala es una vez más, discriminar según el tipo de página y añadir una variable cuyo contenido sí sea distinto para cada página. Aprovechamos la condición que hemos creado antes para meter dentro una nueva META:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName' name='description'/>
<b:else/>
<title><data:blog.pageTitle/></title>
<meta content='Aquí iría la descripción de mi blog' name='description'/>
</b:if>


Como veis, en las entradas la meta destinada a la descripción mostrará el título de la página (el del post) y en el resto (Home, Index, Archive) saldrá una descripción que hemos escrito a mano, absolutamente personalizada.


No estoy seguro, pero creo que Google no indexa actualmente este peculiar tipo de páginas de navegación (etiquetas y archivo); al menos así me lo indica el Webmaster Tools. Pero por si acaso, todavía podemos dar un pasito más y excluirlas de nuestra descripción para que no nos lo considere duplicado con respecto a estas y darles una descripción propia.

Y digo la menos mala porque no mostraremos una descripción que se pueda entender realmente como tal, pero algo pondremos y sobre todo, no duplicaremos. Por la estructura del condicional, metemos en el mismo saco que las Index a las páginas estáticas:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <title><data:blog.pageName/> - <data:blog.title/></title>
  <meta expr:content='data:blog.pageName' name='description'/>
<b:else/>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <title><data:blog.pageTitle/></title> 
    <meta content='Aquí iría la descripción de mi blog' name='description'/>
  <b:else/>
    <title><data:blog.pageName/> - <data:blog.title/></title>
    <meta expr:content='data:blog.pageName' name='description'/>
  </b:if>
</b:if>


Con este trozo de código todas las páginas de nuestro blog tendrán una descripción distinta y la página Home una descripción más personalizada. Podemos incorporar algunas palabras si lo creemos necesario detrás o delante de aquellas opciones que yo propongo mostrar exclusivamente con variables. Así, reordenando las variables y poniéndole delante la palabra "Blogger", una página Index podría verse como: Blogger: CSS - Oloblogger.


Para finalizar, puede que lo que nos interese es que directamente Google NO indexe todas esas páginas de índices. Para ello una vez más recurrimos a las condiciones y a las meta:

<!-- Robots no index -->
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta content='noindex' name='robots'/>
</b:if>
</b:if>

Ojo con la negación (!=). Si nos equivocamos y ponemos un ==, nuestra página Home tampoco se indexará.


Un lustro ¿Eso es mucho o es poco para un blog?

28/01/2012
Por estos lares no celebramos casi nada, ni los 100 primeros posts, ni los 1000 primeros seguidores, ni el primer millón de visitas... Creo que con lo único que lo hicimos fue con lo de los 20Blogs.

Pero más o menos, hoy es el aniversario de este blog y por eso apartamos un poco los temas habituales para hacer un poco de historia y unas pequeñas reflexiones.


Lo de más o menos tiene su explicación, claro, y es que los primeros artículos que escribí realmente los publiqué en lo que entonces era mi blog personal y el de mis amigos.

Sí, todos hemos tenido un pasado, yo también... pero aunque siga estando tan desfasado en cuanto a estilo como entonces, a mí me sigue gustando aquella plantilla oscura con tantos cacharritos. En serio. Incluso ahora al volverla a ver gracias a esa especie de máquina del tiempo interneteril que existe por ahí, la echo de menos. Soy así de cutre, que le vamos a hacer, aunque también puede ser cosa de la nostalgia.

Ver en WayBack Machine
Como ya he dicho en otras ocasiones, esos apuntes que tomaba para mí mismo se hicieron cada vez más frecuentes y viendo que a algunos torpones como yo también les interesaban esas notas, decidí abrir Oloblogger y traspasar allí este tipo de contenidos. Las dos plantillas eran prácticamente idénticas tal y como podéis comprobar en Wayback Machine.

Y aprovecho para contaros que ya llevo un tiempo cansado de esta, que además tiene infinidad de parches y pruebas y de vez en cuando hace aguas. Así que os anticipo que más pronto que tarde, aunque muchos siguen encantados con ella, cambiaré a una que seguro que no os va a gustar. Y es que la idea que llevo es muy muy distinta.

Pero volviendo al principio, hoy hace de eso un lustro y entre otras cosas me puse a pensar si cinco años eran muchos o eran pocos para un blog.

Cinco años no son nada en la vida de alguien y muchísimo menos en el reloj del tiempo del mundo. Sin embargo, parece que para un blog es sinónimo de senectud o al menos de madurez. Yo estoy en lo último, me siento maduro en esto de los blogs; al menos algo más maduro.


No recuerdo ahora los sitios, pero he leído mucho sobre la decadencia y el inminente fin de los blogs. El argumento principal es la fuga de blogueros a otras redes sociales por su facilidad de uso. Ya sabéis, Facebook, Tumblr, Twitter, Google Plus...

Pero que queréis que os diga ¿qué es lo que se comparte principalmente en esos sitios? Pues ni más ni menos que CONTENIDOS, cosas que otra gente publica en otros sitios, sitios como las bitácoras. Por tanto ¿qué sería de ellos sin nosotros? Pues seguramente lo mismo que de nosotros sin ellos. Poca cosa.

Internet es interactividad, intercambio. Ambos medios -blogs y redes- son en mi opinión perfectamente compatibles y pueden subsistir simultáneamente. De hecho incluso creo que se necesitan. Quizás, lo único que está pasando es que está habiendo un acoplamiento, un ajuste, una rectificación de la oferta y la demanda. Ni todo el mundo puede/debe ser twittero ni todo el mundo bloguero.


Los que nos consideramos fundamentalmente esto último, seguimos en la brecha porque nos gusta. Nos gusta escribir, tenemos alguna inquietud que queremos compartir y sobre todo, nos gusta interactuar con los que tienen la misma afición que nosotros. Dar y recibir. En esencia, compartir cosas.

Cuando no es así y no hablamos realmente sobre lo que nos gusta, lo fácil es sucumbir al desaliento, a la desidia, al aburrimiento o la sensación de que esto es un trabajo ¿Quién aguanta mucho tiempo haciendo algo que no le gusta y a lo que no está obligado?

Así que habrá quién opine que 5 años en un blog es mucho tiempo, pero a mí de verdad que hasta la fecha, me han parecido sólo un suspiro.


Elemento que desaparece tras un tiempo. Portada de presentacion.

27/01/2012
Puede que en ocasiones nos sea útil mostrar algún contenido pero que este sólo permanezca unos segundos visible. Sería el caso de algún aviso, un elemento publicitario o incluso como me propuso alguien, una pantalla de presentación. Al final de esta entrada hay un ejemplo, por si queréis ver el resultado antes de comenzar a leer.

Para ello vamos a echar mano de lo que resulta más sencillo y que es la instrucción JavaScript setTimeout, que hace una tarea que se le indique, pero con una demora de tiempo que podemos programar.


Lo primero que necesitamos es un sistema para hacer que las cosas aparezcan/desaparezcan y vamos a utilizar uno bastante recurrente y que recomendamos tener siempre en plantilla, ya que sirve para bastantes cosas distintas. Si no lo tenéis todavía, aquí está el código para poner antes del </head>:

<style type='text/css'>
.visible {display:block;}
.invisible {display:none;}
</style>
<script type='text/javascript'>
function plegardesplegar(identificacion){
  var menu = document.getElementById(identificacion);
  if(menu.className == &quot;visible&quot;){menu.className = &quot;invisible&quot;; }
  else{ menu.className = &quot;visible&quot;; }
}
</script>

El código es sencillo. Primero creamos las clases visible e invisible que le dan esas mismas características respectivamente a las capas a las que se asignen esas clases. Luego se crea una función (plegardesplegar) que cuando le llega un id de una capa concreta, comprueba su clase actual y la cambia. Por tanto, pasará lo visible a invisible y viceversa.


Una vez hecho esto ya podemos montar nuestro elemento temporal. Sólo tenemos que crear una capa con una id única y justo detrás de ella, para que el contador de tiempo comience a correr tras su carga, este script:

<script type='text/javascript'>
window.load=setTimeout(&quot;plegardesplegar(&#39;id_capa_a_cerrar&#39;)&quot;, 8000);
</script>

En verde lo que hay que ajustar: la id de la capa a cerrar y el tiempo (en milisegundos).


Un ejemplo. Recordamos que para hacer una pantalla de presentación para el blog, propusimos hace tiempo un sistema relativamente sencillo con cookies, de manera que a un mismo usuario sólo le apareciera una vez cada cierto tiempo y no todas las veces que accediera al Home en la misma sesion. Pero este sistema todavía sería más sencillo por permitirnos prescindir de las galletitas... aunque también se podrían combinar las dos cosas.


Para hacer esto y una vez instalado el primer código de esta entrada (el de la función plegardesplegar), sólo habría que buscar el <body> y justo detrás pegar esto. El contenido interior del div es el que deberíais personalizar vosotros para que pareciera una auténtica presentación que, por supuesto, desaparecería tras unos segundos. No os paséis con el tiempo.

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<div class='visible' id='capasuperpuesta' style='z-index:99999; position:fixed; top: 0; left: 0; overflow:visible; width:100%; height:100%; background: #F4F8F9;'>
<div style='width:600px; height:400px; position:absolute; top:50%; left:50%; margin-left:-300px; margin-top:-200px; padding:100px 30px 0px 0px; color:#000000; font-size:20px; line-height:20px; text-align:center;'>
Dentro de esta capa interior es dónde podemos poner una imagen, enlaces, texto, un menú, un vídeo, una lista, un flash... en fin, lo que sea.
</div>
</div>

<script type='text/javascript'>
window.load=setTimeout(&quot;plegardesplegar(&#39;capasuperpuesta&#39;)&quot;, 8000);
</script>

</b:if>

VER EFECTO AHORA MISMO
(Tras 8 segundos desaparecerá automáticamente)



Una solución para la paginación de comentarios antiguos

26/01/2012
No sólo hemos tenido algunos problemas aquellos que nos hemos pasado forzosa o voluntariamente al nuevo sistema de comentarios hilados, agrupados o anidados (nomenclatura a elegir). También los que han conservado el antiguo sistema, igualmente de manera voluntaria o por causa de fuerza mayor, tienen algunos problemillas con ellos.


Los síntomas son distintos, pero el origen de la enfermedad es el mismo. De momento ya tengo conocimiento de dos. Uno es el que ayer comentaba J.Miur respecto a la desaparición del nuevo estilo que hasta ahora estaba insertado en la plantilla. Eso ha provocado que las modificaciones que pudieras haber hecho directamente en esa parte ya no estén y que los comentarios se vean de aquella manera.

La solución es volver a regenerar el estilo, pero si todavía no te lo han borrado de tu plantilla puedes aplicar una pequeña modificación preventiva que se explica en el anterior enlace de Vagabundia.


El segundo problema es el de la paginación de comentarios en posts con más de 200. Aquí lo que ocurre es que no se puede acceder a dichas páginas, siendo imposible ver nada a partir del que hace 201.

Pero también alguien -que no fui yo- ha encontrado una manera de arreglar esto. Se trata de un pequeño JavaScript que aprovechando las variables data oportunas y las direcciones que maneja Blogger para mostrar las distintas páginas, reproduce el sistema de paginación.

Aclaro que no restaura lo que sea que se haya perdido, sino que directamente construye las páginas y los enlaces a ellas con un código alternativo.


Ese alguien es el editor de Simplex Design y a continuación voy a intentar traducir lo mismo que allí podréis encontrar. Cuando no he probado algo lo advierto y esta es una de esas veces porque no tengo el sistema antiguo en ningún post con más de 200 comentarios, aunque siguiendo la lógica del código, debería funcionar y bien.

Y como hace tiempo que no lo digo, recuerdo que los experimentos se hacen con gaseosa y que para hacerlos con tu plantilla real, antes siempre deberías guardar una copia de seguridad por si se te va una tecla de más y borras algo importante accidentalmente.


Recomponer paginación de comentarios


1. Escritorio ► Pantilla ► Editar HTML ► Continuar ► Expandir plantillas de artilugios

2. Añadir estas líneas antes de ]]></b:skin>

#commentpaging {float:right;}
#commentpaging a {margin-right:5px;}

3. Añadir el JavaScript antes de <body> (supongo que también sirve antes de </head>)

<script type='text/javascript'>
//<![CDATA[
function commentpagination(url,comment){
var posturl= url;
var comment = comment;
cmpage = Math.ceil(comment/200);
document.write('<a href="'+posturl+'?commentPage=1">Primeros</a>');
for (var i = 1; i <= cmpage; i++) {
document.write('<a href="'+posturl+'?commentPage='+i+'">'+i+'</a>');
}
document.write('<a href="'+posturl+'?commentPage='+cmpage+'">Últimos</a>');
}
//]]>
</script>

4. Encuentra la línea &lt;b:includable id='comments' var='post'&gt; y justo a continuación insertas la llamada al script

<b:includable id='comments' var='post'>
<span id='commentpaging'>
<script type='text/javascript'>commentpagination(&quot;<data:post.url/>&quot;,&quot;<data:post.numComments/>&quot;);</script>
</span>

5. Graba los cambios.


Cómo funciona


Primero este script toma el número de comentarios del post y lo divide por 200. Redondea el resultado al entero mayor y así se sabe cuantas páginas hay que construir. Por ejemplo, si una entrada tiene 250 comentarios: 250:200=1,25 ► 2 páginas. De esta manera, la primera página tendrá 200 comentarios y la segunda 50.

La dirección a una página de comentarios tiene la estructura:
http://dirección del post.html?commentPage=número de página

Por ejemplo, en la página del autor, la página 2 de comentarios sería así:
http://www.thesimplexdesign.com/2011/02/simplexenews-latest-version-fixed.html?commentPage=2

Una vez conseguidos el número total de páginas de comentarios y la estructura de la dirección de cada página, el siguiente paso es muy simple, sólo escribimos debajo los enlaces a todas las páginas que pudiera haber con un bucle.

Suscribirse a: Entradas (Atom)
Recibe por correo las últimas publicaciones.
Teclea tu dirección.


No rights reserved
NINGUN DERECHO RESERVADO
...aunque se agradece un enlace. Si crees que algo aquí vulnera los derechos de otro, mándanos un correo.

El botón que
no hace nada El botón que no hace nada

Ir Arriba