REFERENCIAS:blogvecindad.com
Wallpapers (luces) |
Optimizar títulos y otros detalles de Blogger |
En uno de los artículos de chicablogger nos cuentan algunas técnicas que nos ayudarán a optimizar nuestro blog para que se posicione mejor en los buscadores. SEO para usuarios de Blogger.com es una guia para ello y muchas de esas sugerencias son sencillas de implementar.
Es cierto que muchos blogs no tienen fines comerciales y por lo tanto, no se preocupan de estos detalles pero, también es cierto que aún así, no nos hará daño tratar de mejorar u ordenar algunas cosas.
Obviamente, lo primero es generar un sitemap correcto usando las Herramientas para desarrolladores de Google y no dejar de lado otros buscadores como Yahoo o Bing.
Es cierto que muchos blogs no tienen fines comerciales y por lo tanto, no se preocupan de estos detalles pero, también es cierto que aún así, no nos hará daño tratar de mejorar u ordenar algunas cosas.
Obviamente, lo primero es generar un sitemap correcto usando las Herramientas para desarrolladores de Google y no dejar de lado otros buscadores como Yahoo o Bing.
1. La etiqueta TITLE que vemos en el HEAD de nuestra plantilla es fundamental y en Blogger es sencillo optimizarla, ya sea con un simple cambio o con cambios más complejos:
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> : nombreBlog</title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>En el mismo sentido, el uso de la etiqueta Canonical sigue siendo recomendada por todos los buscadores al igual que el uso adecuado de las etiquetas META.
Hasta ahí lo que tal vez ya sabíamos pero el artículo habla de algunas cosas más.
Hasta ahí lo que tal vez ya sabíamos pero el artículo habla de algunas cosas más.
2. Las etiquetas META description y META keywords son un problema. La primera es una descripción del sitio y la segunda, una serie de palabras que ayudan a que los buscadores identifiquen el contenido y lo indexen mejor. En ambos casos, Google recomienda que se diferencien las descripciones de cada página ya que utilizar descripciones idénticas para todas las páginas de un sitio es inútil:
"Si es posible, cree descripciones exactas de la página concreta. Utilice descripciones del sitio en la página principal o en otras páginas generales y descripciones concretas de página en todas las demás. Si no tiene tiempo de crear una descripción para cada página, priorice el contenido: cree por lo menos una descripción de las URL más importantes como, por ejemplo, la página principal y las páginas más visitadas."
¿Qué significa esto? Que cada página debería tener una etiqueta META diferente y eso, en Blogger, es prácticamente imposible. Por eso es que si usamos un sitemap y miramos el apartado Diagnóstico | Estadísticas de rastreo, nos encontraremos con advertencias como: Metadescripciones duplicadas y Etiquetas de título duplicadas para tantas páginas como hayan sido indexadas.
No es que esto signifique un "error" que impida que el sitio sea indexado, significa que podría estar mejor y para esto, la sugerencia es que sólo se añadan esas etiquetas META en la página de inicio y que no se incluyan en el resto. Para ello, deberíamos usamos códigos condicionales:
"Si es posible, cree descripciones exactas de la página concreta. Utilice descripciones del sitio en la página principal o en otras páginas generales y descripciones concretas de página en todas las demás. Si no tiene tiempo de crear una descripción para cada página, priorice el contenido: cree por lo menos una descripción de las URL más importantes como, por ejemplo, la página principal y las páginas más visitadas."
¿Qué significa esto? Que cada página debería tener una etiqueta META diferente y eso, en Blogger, es prácticamente imposible. Por eso es que si usamos un sitemap y miramos el apartado Diagnóstico | Estadísticas de rastreo, nos encontraremos con advertencias como: Metadescripciones duplicadas y Etiquetas de título duplicadas para tantas páginas como hayan sido indexadas.
No es que esto signifique un "error" que impida que el sitio sea indexado, significa que podría estar mejor y para esto, la sugerencia es que sólo se añadan esas etiquetas META en la página de inicio y que no se incluyan en el resto. Para ello, deberíamos usamos códigos condicionales:
<b:if cond='data:blog.homepageUrl == data:blog.url'> <meta name='description" content='el texto con la descripción del sitio ... ' /> <meta name='keywords' content='palabra1, palabra2, palabra3, ..., palabraN' /> </b:if>
Pero, ¡eso significa que en las páginas individuales no habrá etiquetas! ¿qué pasa entonces? Lo que dice Google es que, de no existir, lo que se utiliza es parte del texto del contenido de la página y se muestra ese texto como descripción.
3. Un punto clave de las plantillas es el uso de las etiquetas de títulos. La existencia de H1 H2 H3 H4 H5 y H6 como etiquetas HTML diferentes no es un problema de tamaños de letras sino de jerarquías. Los buscadores leen y buscan esa jerarquía y dicen: Si el administrador colocó H1 a un título es porque ese título es IMPORTANTE y si usó H3 es menos importante y acá no importa el tamaño de la fuente que es sólo un efecto visual, es el tipo de etiqueta a usar la que manda.
Así que H1 debería ser la etiqueta a utilizar en los títulos de las entradas de las páginas individuales; es decir, en el home del sitio, el título relevante es el nombre del blog pero en las páginas individuales, el título relevante es el del post en si mismo. Por eso, deberíamos condicionarlo ya que, por defecto, el título de las entradas es H2 o H3.
Lo normal es que el título se muestre así:
Así que H1 debería ser la etiqueta a utilizar en los títulos de las entradas de las páginas individuales; es decir, en el home del sitio, el título relevante es el nombre del blog pero en las páginas individuales, el título relevante es el del post en si mismo. Por eso, deberíamos condicionarlo ya que, por defecto, el título de las entradas es H2 o H3.
Lo normal es que el título se muestre así:
<b:if cond='data:post.title'> <h1 class='post-title'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </b:if> </h3> </b:if>
Y deberíamos condicionarlo de este modo:
<b:if cond='data:post.title'> <b:if cond='data:blog.pageType == "item"'> <h1 class='post-title'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </b:if> </h1> <b:else/> <h3 class='post-title'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </b:if> </h3> </b:if> </b:if>
Por supuesto, estos cambios deberán hacerse con prudencia, mirando bien qué códigos tenemos ahora porque pueden variar con las distintas plantillas. Lo importante es entender que lo que hacemos es poner una condición y duplicar el código actual, uno con H1 y el otro con H2 o H3. También deberemos agregar las propiedades de estilo adecuadas pero no hace falta duplicarlas. Buscamos todas las referencias que suelen estar en a .post h3 y le agregamos la nueva etiqueta:
.post h1, .post h3 { ....... }
.post h1 a, .post h1 a:visited, .post h3 a, .post h3 a:visited { ....... }
.post h1 a:hover, .post h3 a:hover { ....... }4. Un detalle que me comentaba SpamLoco 
y que también es importante es que en las plantillas de Blogger, la fecha de las entradas utiliza H2 lo cual les da una relevancia que no deberían tener:
y que también es importante es que en las plantillas de Blogger, la fecha de las entradas utiliza H2 lo cual les da una relevancia que no deberían tener:<h2 class='date-header'><data:post.dateHeader/></h2>
En este caso, podemos cambiar esa etiqueta por otra cualquiera, un título menor como H4 o un párrafo P o un bloque DIV o SPAN:
<h4 class='date-header'><data:post.dateHeader/></h4>
Y también buscamos las propiedades CSS y cambiamos las referencia:
h2.date-header { ....... }por la nueva:
h4.date-header { ....... }Por último, también es Alejandro el que sugiere usar las llamadas etiquetas semánticas para resaltar los texto que contienen las entradas cuando estos textos son relevantes: <strong> <strong> y <em> <em> son las más comunes pero hay otras como <code> </code>, <kbd> </kbd>, <dfn> </dfn>, <acronym> </acronym> y <address> </address>.
The PEN Story |
Las miniaturas que no son miniaturas |
La pregunta era: "Aunque estoy usando miniaturas para mostrar imágenes que luego se abren en otra ventana, mi página tarda mucho en cargarse ¿Qué pasa?"
Buena pregunta, ¿qué pasa? ¿Acaso no se supone que de esa manera agilizamos la carga del sitio?
La respuesta es SI pero ... hay un error conceptual; el código es este:
Buena pregunta, ¿qué pasa? ¿Acaso no se supone que de esa manera agilizamos la carga del sitio?
La respuesta es SI pero ... hay un error conceptual; el código es este:
<a href="mi_imagen" target="_blank">
<img src="mi_imagen" width="128" height="128" />
</a>
¿Estamos cargando miniaturas? NO. Estamos cargando la imagen tal como es, en este caso, de 700x700 y le colocamos en la etiqueta los atributos width y height para que el navegdor la muestre más pequeña y ese es el problema. La muestra pequeña pero carga la grande.
Es un problema de sentido común. Hay un archivo que tiene una imagen, un único archivo. El navegador lo carga y una vez cargado, le decimos que lo muestre de alguna forma y los atributos width y height o las propiedades CSS equivalentes, sólo hacen eso. Podríamos decirle que lo recorte, que lo coloque acá o allá pero siempre sería ese archivo único de 700x700.
Claro, una imagen de ese tamaño demorará un poco pero, si hablamos de muchas imágenes, las cosas se complican. Sólo diez imágenes de ese tamaño significarán uno tres millones de bytes. Es un número sin significado aparente pero, imaginen que una plantilla tiene unos cien mil bytes, una librería como Prototype otro tanto ¡y nos preocupamos por su tamaño!
Para usar miniaturas debemos tener miniaturas, es decir, dos archivos, uno con la imagen original y otro con la imagen reducida y entonces sí, el código será parecido pero diferente:
Es un problema de sentido común. Hay un archivo que tiene una imagen, un único archivo. El navegador lo carga y una vez cargado, le decimos que lo muestre de alguna forma y los atributos width y height o las propiedades CSS equivalentes, sólo hacen eso. Podríamos decirle que lo recorte, que lo coloque acá o allá pero siempre sería ese archivo único de 700x700.
Claro, una imagen de ese tamaño demorará un poco pero, si hablamos de muchas imágenes, las cosas se complican. Sólo diez imágenes de ese tamaño significarán uno tres millones de bytes. Es un número sin significado aparente pero, imaginen que una plantilla tiene unos cien mil bytes, una librería como Prototype otro tanto ¡y nos preocupamos por su tamaño!
Para usar miniaturas debemos tener miniaturas, es decir, dos archivos, uno con la imagen original y otro con la imagen reducida y entonces sí, el código será parecido pero diferente:
<a href="mi_imagen" target="_blank">
<img src="la_miniatura" width="128" height="128" />
</a>
Donde los atributos width y hight sólo son un apoyo que permite que el navegador reserve el espacio necesario para cargar la imagen miniatura que tiene 128x128.
Muchos servicios de alojamiento de imágenes como ImageShack, Photobucket o Picasa nos dan la dirección URL de la imagen original pero a la vez, crean miniaturas automáticas que podemos usar. Blogger hace lo mismo, al subir una imagen se generan miniaturas de distintos tamaños que podemos usar y que reducirán sustancialmente el tiempo de carga.
Muchos servicios de alojamiento de imágenes como ImageShack, Photobucket o Picasa nos dan la dirección URL de la imagen original pero a la vez, crean miniaturas automáticas que podemos usar. Blogger hace lo mismo, al subir una imagen se generan miniaturas de distintos tamaños que podemos usar y que reducirán sustancialmente el tiempo de carga.
Esto, no significa que siempre debemos usar miniaturas, significa que debemos entender qué estamos haciendo y cómo funcionan las cosas. Cargar una imagen grande y mostrarla pequeña es una técnica aceptable, puede servir, por ejemplo, para usar un zoom sencillo:
En estos casos, cargamos la imagen más grande y luego la manipulamos. Si usáramos una miniatura, el efecto se perdería ya que debería cargarse la segunda imagen.
En resumen, ambas técnicas son aceptables y no tienen nada de malo. Sólo hay que entender qué hacen y usar las herramientas adecuadas.
En resumen, ambas técnicas son aceptables y no tienen nada de malo. Sólo hay que entender qué hacen y usar las herramientas adecuadas.
Zoomy |
Otra más ... ya son muchas las ventanas modales y sumamos a Zoomy que es un pequeño script que permite mostrar imágenes y posee algunas caracteristicas singulares.
- crea un thumbnail de manera automática así que sólo necesitamos la imagen original
- permite el agregado de captions opcionales, textos a ser mostrados dentro de la ventana modal
- es posible crear ventanas que pueden ser arrastradas
A decir verdad, no me convence mucho (por no decir nada) pero, cumplo con el pedido de explicarlo.
Para utilizarlo se requiere el framework Prototype y Scriptaculous (effect.js y dragdrop.js) todo eso, si no lo tenemos en la plantilla, lo podemos agregar mediante las APIs de Google. A mi entender, esta es la forma más sencilla de añadir estos scripts en Blogger, colocamos lo siguiente antes de </head>:
Para utilizarlo se requiere el framework Prototype y Scriptaculous (effect.js y dragdrop.js) todo eso, si no lo tenemos en la plantilla, lo podemos agregar mediante las APIs de Google. A mi entender, esta es la forma más sencilla de añadir estos scripts en Blogger, colocamos lo siguiente antes de </head>:
<script src='http://www.google.com/jsapi'/> <script> google.load("prototype", "1.6.0.3"); google.load("scriptaculous", "1.8.2"); </script>
Luego, agregamos el script que podemos descargar desde la misma página en formato ZIP 
. Allí encontraremos un demo y también las imágenes necesarias (close.gif y zoomy.jpg).
. Allí encontraremos un demo y también las imágenes necesarias (close.gif y zoomy.jpg).<script src='URL_zoomy.js'></script>Por ultimo, el CSS que podemos agregar directamente en la plantilla.
<style>
.zoomy, .zoomy2 {
float: left;
width: 100%;
}
.zoomy li, .zoomy2 li {
display: inline;
float: left;
list-style: none;
height: 100px;
margin-bottom: 5px;
margin-right: 5px;
width: 150px;
}
.zoomy a, .zoomy2 a {
display: block;
background-position: center center;
height:100px;
text-decoration: none;
text-indent: -9999px;
width: 150px;
}
#zoomy {
background: #000;
border:1px solid #B3BEAD;
color: #fff;
line-height: 100%;
padding: 5px;
position: absolute;
}
#zoomy p {
margin: 0;
padding: 5px 5px 10px 5px;
position: relative;
}
#close {
background: url(URL_closes.gif) no-repeat;
cursor:pointer;
height: 12px;
position: absolute;
right: 5px;
width: 12px;
}
</style>El script es limitado ya que debemos llamar a una función cada vez que lo utilizamos:
<script>
new Zoomy(element,{[opciones]});
<script>donde las opciones son:
- appearDuration el tiempo del efecto fade (por defecto es 0.5 segundos)
- closeButton por defecto es false, poner en true para mostra el botón cerrar
- draggable por defecto es false, poner en true para permitir que se arrastren
- hideCaption por defecto es false, poner en true para mostrar textos
Lo usamos de esta manera::
<ul class="zoomy"> <li> <a href="URL_cualquiera" style="background-image: url(URL_imagen1)" title="Demo 1">Ejemplo 1</a> </li> <li> <a href="URL_cualquiera" style="background-image: url(URL_imagen2)" title="Demo 2">Ejemplo 2</a> </li> </ul>
El problema es que debemos definir esa función y el CSS cada vez que lo vamos a aplicar. En estos demos hay dos posibilidades, dos listas, una llamada zoomy y la otra zoomy2. Si quisiéramos otras, habría que agregarlas. Eso es lo que lo hace poco flexible y no muy recomendable aunque la idea en si misma es buena
En resumen, no me parece nada sencilla de utilizar.
Clock Clock |
The Clock Clock es un proyecto de unos diseñadores suecos llamados Humans since 1982 y son una serie de relojes controlados electrónicamente que juntos conforman un enorme reloj.
REFERENCIAS:tecnoculto.com
