SEO en las imágenes del blog

En la entrada anterior vimos cómo optimizar las entradas del blog, ahora toca el turno a las imágenes de las entradas, que no son menos importantes, sobre todo porque algunos blogs deben gran parte de su tráfico a los resultados de búsqueda de imágenes. Así que si en tu blog usas muchas imágenes en las entradas no debes descuidar estos elementos.

El alojamiento

El alojamiento ciertamente no influye en el posicionamiento, pero la velocidad de carga sí, por lo tanto aloja tú mismo tus imágenes; al no utilizar las imágenes de otros dispondrás de más ancho de banda, así que lo recomendable para los que usamos Blogger es subir las imágenes a Picasa.
Esto además te asegura tener disponibles siempre las imágenes, ya que si usas la imagen de alguien más, el autor podría eliminar la imagen y te quedarías sin ella.

Tamaño/Peso de las imágenes

Cuando hablamos de SEO en las imágenes el tamaño sí importa. Una imagen muy grande tanto en dimensiones como en peso será más tardada en cargar que una imagen más liviana, y como ya sabemos, el tiempo de carga del blog es básico para el posicionamiento. Por lo tanto procura que tus imágenes de tus entradas no sean ni muy grandes en dimensiones, ni muy grandes en peso. Los formatos más recomendables son JPG y PNG.
Hay muchos programas tanto para el ordenador como online que permiten optimizar las imágenes, es decir, quitarle un poco de calidad para que su peso sea menor.

Palabras clave en el nombre de la imagen

Asegúrate que el nombre de tus imágenes tengan una palabra clave, de manera que evites el uso de palabras sin sentido, números o cualquier nombre que no identifique perfectamente la imagen.

Ejemplos:

DC98100.jpg
 Orquideas.jpg

Nombres sin espacio y caracteres especiales

Si el nombre de tu imagen está compuesta de más de una palabra usa guiones en lugar de espacios, también evita usar acentos u otros caracteres especiales, ya que al subir las imágenes estos caracteres se codifican.

Ejemplos:

 orqu%EDdeas%20moradas.jpg
 orquideas-moradas.jpg

Lo que ha pasado con el primer ejemplo es que el archivo se llamaba orquídeas moradas, es decir, que contenía un acento y un espacio, pero al subirse a la red se le asignó una URL que codificó esos caracteres. Por lo tanto, si el nombre lleva un espacio usa un guión en su lugar y evita los acentos y otros caracteres especiales en los nombres.

Longitud de los nombres

El nombre de tus imágenes debe ser lo más corto y descriptivo posible, así que hay que evitar usar un nombre muy largo en el archivo.

Ejemplos:

las-orquideas-moradas-que-mas-me-gustan-forever-and-ever.jpg
 orquideas-moradas.jpg

El uso de ALT

Si algo nos recomienda Google en cuanto a imágenes se refiere es que estas tengan el atributo ALT dentro de su código.
ALT (o texto alterno) es el texto que se muestra cuando un navegador no puede enseñar las imágenes, y en él debemos poner el nombre de la imagen con alguna palabra clave, pero sin que sean demasiadas palabras.

Ejemplos:

 <img src='orquideas.jpg' alt='orquídeas moradas, flores, plantas, jardin, arreglos florales, flores moradas, flores para regalar' />
 <img src='orquideas.jpg' alt='Orquídeas moradas' />

El uso de TITLE

El atributo TITLE por su parte es el complemento del anterior, en él podemos usar una muy breve descripción, nuevamente sin abusar de la longitud y del número de palabras clave.

Ejemplos:

<img src='orquideas.jpg' title='orquídeas moradas, flores, plantas, jardín, arreglos florales, flores moradas, flores para regalar' />
 <img src='orquideas.jpg' title='Jardín con orquídeas moradas' />

Este atributo es el que hace que aparezca el tooltip cuando ponemos el cursor sobre una imagen.



Combinando el ALT y TITLE se vería así.

Cita

<img src='orquideas.jpg' alt='Orquídeas moradas' title='Jardín con orquídeas moradas' />

Palabras claves cerca de la imagen

Algo que ayuda mucho a posicionar una imagen en la red es el uso de palabras clave cerca de la misma imagen, y claro, que la imagen tenga que ver con dichas palabras.
Ejemplo:



Con lo anterior quiero decir, que no pongas la imagen y nada más, acompáñala siempre con un texto que esté muy relacionado con la imagen, y mejor aun, que haya palabras clave en ese texto.

------------------------------------------------

En resumen, sube tus imágenes a tu propio alojamiento; optimízalas para que no pesen mucho; ponles un nombre corto, descriptivo, sin espacios ni caracteres especiales; usa el atributo ALT y TITLE; y sitúalas cerca de donde haya un texto que contenga palabras clave relacionadas con la imagen.

Con todo lo anterior tendremos mejores oportunidades de aparecer en los resultados de búsqueda de imágenes, lo cual se traduce a mayores posibilidades de ganar visitas.

Quo Template: Plantilla para Blogger

            

Nombre:   Quo
Diseñador:   El Potro
Compatibilidad:   Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer
Características:   Plantilla para Blogger, 2 columnas principales, 3 columnas en el footer, 860px de ancho, Optimizada para SEO, Colores minimalistas, Comentarios numerados, Comentarios destacados
Incluye:   Plantilla XML, Instrucciones de instalación, Licencia

Inicialmente estaba diseñando una plantilla para Ciudad Blogger pero poco a poco me fui alejando de lo que tenía en mente hasta que di con una combinación que me gustó mucho para compartirla con todos ustedes.
Quo es una plantilla gratuita de dos columnas principales y tres columnas más en la parte del footer para poder colocar ahí más gadgets, tiene una cabecera reducida alineada a la izquierda para que el contenido de las entradas inicie desde la parte superior.
El diseño de la plantilla es minimalista, los colores blanco y negro predominan en ella y un elegante color rojo resalta ciertas áreas como la letra inicial de cada título de entrada. Es una plantilla que denota seriedad pero al mismo tiempo simplicidad y modernidad.

Personalización:

La cabecera tiene un ancho máximo de 320px por lo que se recomienda usar un título pequeño o un logotipo que no exceda esa medida; si se desea poner un título largo se recomienda ajustar el tamaño de la letra del título a un tamaño más pequeño, se modifica en esta área:

Cita

#header h1, #header h2 {
margin:5px 5px 0;
padding:15px 0 .25em;
line-height:1.2em;
font-size:120px;
font-family:Georgia;
word-wrap:break-word;
}

Es compatible con todos los navegadores más conocidos (arriba se especifica cuáles) según la última versión actual de cada uno de ellos.

Los títulos se han optimizado para SEO con la finalidad de ser más amigables para los robots de los buscadores y facilitar el posicionamiento en la web.

Espero que les guste y sobre todo que la disfruten.

ACTUALIZACIÓN 1.0

Ya se ha corregido el problema de visualización en Internet Explorer 7. El color del texto de las entradas así como el texto de la cabecera ya es visible.

Diseñador de plantillas en Blogger

Después de haber estado en fase de prueba, Blogger ya ha añadido la función del diseñador de plantillas desde Blogger normal sin tener que entrar a Blogger in Draft, con el cual ha sustituido la pestaña Seleccionar plantilla.
Puedes usarlo entrando en Diseño | Diseñador de plantillas y probar las funciones. Por supuesto se recomienda usarlo primero en un blog de pruebas.

Descargar las plantillas de diseño de Blogger (Mínima, Rounders, Thisaway, etc.)

Desde que la nueva interfaz se lanzó primeramente a modo de prueba me fijé que no incluían lasplantillas de diseño del 2006, ya saben, la plantilla Mínima, Rounders, Thisaway, Son of Moto, etc. Pensé que como la interfaz estaba en desarrollo sería cuestión de tiempo para que las agregaran, sin embargo ahora que la nueva interfaz ya es por defecto (y obligación) para todos los usuarios de Blogger veo que siguen sin incluirse esas plantillas.

En su momento hice un respaldo de todas esas plantilla temiendo que justamente no las fueran a incluir más y nos tuviéramos que privar de ellas. Ignoro si más adelante vayan a agregarlas a esa interfaz, pero entre si eso sucede o no, les dejo la descarga de cada una de estas plantillas por si alguien las necesita.

Estas plantillas las guardé desde octubre del 2011 así que seguro no tienen todos los códigos que Blogger continuamente va añadiendo, pero al instalarlas deberán agregarse esos datos de forma automática.

Para descargar cada una de ellas sólo selecciona el nombre de la plantilla que deseas.

Mínima Mínima Dark Mínima Blue Mínima Ochre	Denim Stretch Denim Washed Denim Stretch Denim Light	Rounders Rounders 2 Rounders 3 Rounders 4
Mínima Lefty Mínima Stretch Mínima Lefty Stretch	Herbert JellyFish	Harbor
Scribe	Dots Dots Dark	No. 897 No. 565
Thisaway Thisaway Blue Thisaway Green Thisaway Rose	Son of Moto Mr. Moto Ms. Moto	Snapshot Snapshot Sable Snapshot Tequila
TicTac TicTac Blue	Tekka	Sand Dollar
Simple II

Recuerda que, para subir una plantilla en la nueva interfaz debes ir a la sección Plantilla, y en la parte superior derecha verás un botón que dice Crear copia de seguridad/Restablecer. Dando click ahí podrás subir tu plantilla en formato XML.

Bloggerest: Plantilla para Blogger

           

Hace ya mucho tiempo que no creaba una plantilla gratuita para Blogger, así que esta vez quise darme un tiempo para poder diseñar una plantilla que pudieran descargar y usar libremente.

Bloggerest es una plantilla gratuita inspirada en Pinterest, aunque no es una réplica (ni pretende serla), ideal para blogs de fotografia, o blogs donde las imágenes juegan un rol importante.
El diseño de la plantilla es un tanto minimalista, predominan los colores rojo y blanco con un toque de gris. El título del blog así como los títulos de los gadgets usan una fuente tipo caligrafía para darle un aire elegante.
La cabecera ocupa el 100% del ancho de la página al mismo tiempo de ser flotante. Las imágenes en la portada tienen opacidad al pasar el cursor y éstas conducen a la entrada al dar click sobre ellas, también muestra la miniatura del video cuando están alojados en YouTube y cuando no hay una imagen que lo antecede.
Este es un ejemplo de una entrada donde se puede apreciar cómo se visualizan los bloques entrecomillados, las listas numeradas, las listas con viñetas, los botones para compartir, los gadgets de la sidebar y los comentarios donde se destacan los realizados por el autor.

Personalización:

La cabecera tiene un alto de 124px por lo que se recomienda usar un logotipo que no exceda esa medida.

El menú de la plantilla es el menú horizontal con subpestañas y buscador integrado, por lo que en esa entrada podrás ver un poco más sobre su personalización. En la plantilla puedes identificar el menú por la etiqueta <div id='menuWrapper'>

La forma de redactar las entradas es igual que como lo harías siempre, sin embargo, en caso de que tu entrada sólo contenga una imagen, o un video, sin nada de texto, tendrás que dar uno o más saltos de línea (ENTER) al final del código de tu imagen o de tu video, ya que si no lo haces la imagen no se formará en miniatura y se distorcionará.

-----------------------------------------------------------------------------------------

Es compatible con todos los navegadores más conocidos (arriba se especifica cuáles) según la última versión actual de cada uno de ellos.

El sistema magazine que utiliza permite mostrar muchas entradas en la portada ya que en la portada las entradas no cargan de forma completa, permitiendo agilizar la carga del blog. Las pocas imágenes que usa la plantilla están alojadas directamente en base 64 por lo que no dependerás de ningún servicio externo para cargarlas.

Espero que sea de su entero agrado, que la disfruten, y que no retiren los créditos:

ACTUALIZACIÓN 4/abr/2013

Si en la pestaña Diseño no ves la sidebar, entra en Plantilla | Edición de HTML y elimina estas partes en color rojo:

Cita

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<b:if cond='data:blog.pageType != &quot;archive&quot;'>
<b:if cond='data:blog.homepageUrl != data:blog.url'> 
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' mobile='yes' title='Categorías' type='Label'/>
<b:widget id='PopularPosts1' locked='false' mobile='yes' title='Entradas populares' type='PopularPosts'/>
<b:widget id='BlogArchive1' locked='false' mobile='yes' title='Archivo del blog' type='BlogArchive'/>
</b:section>
</div>
</b:if>
</b:if>
</b:if>

Eso hará que la sidebar aparezca en la sección Diseño. Si notaras que con ese cambio tarda un poco más en cargar la portada del blog, o si aparecen menos entradas, pon de nuevo ese código después de haber hecho todas las modificaciones deseadas en la sidebar.


ACTUALIZACIÓN 12/abr/2013

Se ha modificado la plantilla para resolver el problema de las entradas que tenían añadido el salto de línea (Leer más) manualmente. También se ha agregado un enlace a la imagen predeterminada para las entradas que no tienen una imagen.

Cómo subir archivos en Google Sites

Cuando nos proponemos personalizar el blog nos damos cuenta que hay archivos que necesitamos subir a la red tales como scripts, imágenes, objetos swf, etc., y nos rompemos la cabeza buscando un hosting decente y gratuito que nos saque del apuro.

Si bien hay excelentes servicios sin costo para alojar archivos a veces nos encontramos con que no aceptan todo tipo de archivos o que su interfaz es tan complicada que parecería diseñada sólo para ingenieros informáticos.

Aunque no me gusta depender de tantos servicios externos (pero tampoco quiero pagar por uno propio) una de las mejores opciones es utilizar el servicio de alojamiento de Google a través deGoogle Sites, total, si nuestros blogs y fotos se alojan en los servicios de Google pues qué más da usar uno más de él.

Lo primero es entrar a Google Sites y crear un sitio.

A continuación aparecerán opciones para elegir el diseño y para ponerle un nombre al sitio. Seleccionamos el diseño, indicamos el nombre y abajo hacemos click en Mas opciones, ahí verificamos que esté marcada la casilla Compartir con todo el mundo.

Una vez hecho esto habremos creado el sitio, ahora vamos a la parte superior derecha y hacemos click en Crear página.

Ahí deberemos seleccionar la plantilla Archivador y ponerle un nombre.

Habiendo hecho esto ya podemos subir archivos a Google Sites, sólo damos click en Añadir archivo.

Una característica que tiene es que podemos agregar una descripción al archivo que estamos subiendo, esto es para que no nos hagamos un lío cuando tengamos muchos archivos ahí.

Ya que el archivo se ha subido veremos que aparece en la lista junto con un link que dice Descargar. Con el botón derecho damos click sobre ese enlace y copiamos la dirección del enlace.

Esa es la URL del archivo que podremos usar en donde lo vayamos a ocupar, sólo deberemos borrar el ?attredirects=0&d=1 que aparece a final de todas las URLs que tomemos de Google Sites.

Si quieres que tu página de archivos sea lo primero que se vea cuando entres a tu sitio de Google Sites entonces estando en la página de archivos que has creado haz click en la parte superior derecha donde dice Más acciones y luego en Administrar sitio.

Ahora en el menú del lado izquierdo click en General y donde dice Página de destino damos click en Cambiar.

Ahí elegimos la página de archivos que creamos y listo.

Las ventajas de usar Google Sites como alojamiento son que acepta múltiples tipos de archivos, el ancho de banda es bastante bueno y la interfaz es muy sencilla.

Las desventajas es que hay limitación de tamaño en los archivos y que los archivos subidos ahí no funcionan si queremos usarlos en un dominio propio.

¿Qué es un feed?

La mayoría ya debe saber qué es un feed y cómo funciona, pero para los que apenas están comenzando con un blog o recién se adentran al mundo de la información electrónica, y no saben qué es el feed y para qué sirve, vamos a explicarlo con esta entrada.

¿Qué es un feed?

Un feed es un medio por el cual los usuarios pueden leer las entradas de un sitio Web o parte de ellas; el feed en sí es un archivo que contiene la información del contenido del blog y que se actualiza de forma automática.
Esto significa que cuando estés interesado en un blog puedes suscribirte a su feed y de esta forma sabrás cuando haya un contenido nuevo el cual podrás leerlo desde tu lector de feeds.
Seguro te preguntarás si existe una ventaja al suscribirse a un feed, y la respuesta es sí; supongamos que te gustan 50 blogs que lees regularmente, ¿te imaginas tener que estar entrando a esos 50 blogs a cada rato para saber si han escrito algo nuevo? Podrías perder mucho pero mucho valioso tiempo. En cambio si te suscribes al feed de esos blogs sabrás cuando haya una nueva entrada en alguno de ellos sin haber tenido que ir hasta cada uno de esos sitios para averiguarlo.

En palabras más cortas, suscribirte a un feed hace que en lugar de que tú vayas a la información sea la información la que vaya hacia a ti.

¿Cómo me suscribo al feed de un blog?

Cuando te interese estar al tanto de las actualizaciones de un blog puedes suscribirte al feed de éste. En la mayoría de los casos verás este icono  y haciendo click en él o en el enlace que esté junto a él podrás conseguir la suscripción a ese blog.
O bien, si ya usas un lector de feeds sólo necesitas agregar en él la URL del blog y el lector de feeds se encargará de buscar el feed por ti.

¿Cómo puedo leer los feeds a los que me suscribo?
Cuando te suscribes a un feed necesitas elegir un lector de feeds que es el lugar donde se almacenarán todos los feeds a los que te suscribas y será éste lector quien visite de forma periódica esos blogs que te gustan para informarte cuando haya contenido nuevo; éste lector puede ser una aplicación para tu computadora, un sitio online como Google Reader, o desde tu correo electrónico.
En cualquiera de los dos primeros casos necesitas entrar cuando lo desees para revisar si hay algún artículo nuevo en cualquiera de todos los sitios donde estás suscrito; en el caso de la suscripción por correo no necesitarás hacerlo pues cuando haya un nuevo artículo en alguno de los blogs a los que estás suscrito te llegará un correo con la información respectiva.

¿Cómo activo el feed de mi blog para que la gente se suscriba?

Si tienes un blog de Blogger entonces ya tienes un feed de forma automática y por defecto está activado para que tus lectores puedan suscribirse a él.
Para verificar que tu feed está activado entra en Configuración | Feed del sitio | Permitir feeds del blog, ahí puedes seleccionar Completo si es que quieres que aparezca todo el contenido de la entrada en los feeds, o Corto si quieres que sólo se vea el título del post.
La URL del feed de tu blog es en todos los casos así:

Cita

http://nombre-de-mi-blog.blogspot.com/feeds/posts/default

¿Qué es un gestor de feeds?

Un gestor de feeds se encarga de administrar los feeds de los blogs que posees. Estos gestores se ocupan de distribuir a los suscriptores las actualizaciones del contenido de tu blog, y en la mayoría de los casos te muestran estadísticas de tus feeds tales como el número de suscriptores. El más popular, reconocido por las distintas herramientas que tiene, es Feedburner, que además es un producto de Google. En la próxima entrada veremos cómo crear un feed ahí.

Y ya que estamos con este tema recuerda que puedes suscribirte a nuestro feed para leernos deste tu lector o también puedes suscribirte por correo electrónico.