Posicionar las imágenes en Google
Recibir visitas a través de Google images, puede suponer un aumento considerable de visitas en el blog, algo que no tenemos a veces demasiado en cuenta y que podríamos conseguir facilmente.
[1] Nombrar las imágenes de forma correcta.
Muchas veces cuando utilizamos una imagen que hemos optenido en un sitio de Internet, ni siquiera nos molestamos en renombrarla y eso sería una de las primeras cosas a tener en cuenta.
Antes de subir una imagen al blog deberíamos asegurarnos antes que la imagen tiene un nombre que la define. Si por ejemplo vamos a subir una fotogafía del salón de nuestra casa, deberiamos llamarla algo como "salon-de-casa", separando las palabras por guiones si usamos más de una. De tal modo que la url de esa imagen quedase así:
http://4.bp.blogspot.com/_sbaQpFxeL1Q/S7IOyJERasI/AAAAAAAAAjw/sGJ7iAFl_8U/s1600/salon-de-casa.png
[2] Los atributos Title y Alt
Dos atributos muy importantes estos que podemos añadir a las imágenes directamente en el código resultante en Blogger una vez subidas a la entrada.
Alt Es el atributo que define la imagen, es decir, el que "dice" a Google por ejemplo lo que estamos mostrando en esa imagen. El atributo alt debería ser suficiente explicativo sobre el contenido de la imagen en el caso de que la imagen no llegara a mostrarse.
Title Es el texto que aparece al pasar el cursor sobre una imagen siempre que tenga este atributo añadido. (Podéis comprobarlo en cualquier imagen de una de mis entradas o en la imagen del final de la entrada).
Lo cierto es que Google a la hora de extraer información de una imagen se centra en el contenido del atributo alt. En cualquier caso no existe ningún problema por incluir en la misma imagen un atributo title incluyendo su propio texto o una copia exacta del contenido del alt.
Como usar los atributos de imagen en Blogger
Para añadir estos dos atributos a nuestra imagen una vez subida al la entrada tenemos que situanos en la pestaña HTML del editor, localizar el código de la imagen y añadir los atributos de forma manual (ejemplo destacado en negrita):
<a href="http://4.bp.blogspot.com/_8PJ-pgoBhWQ/TAKW2gjwbAI/AAAAAAAAH-w/XDcUnTulVeE/s1600/salon-de-casa.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="182" title="Salón" alt="Salón de mi casa"src="http://4.bp.blogspot.com/_8PJ-pgoBhWQ/TAKW2gjwbAI/AAAAAAAAH-w/XDcUnTulVeE/s320/salon-Ikea.JPG" width="320"/></a>
 |
| Fotografía de: http://www.ikeando.com/ |
a las
Etiquetas:
Posicionamiento,
Trucos imagenes
Vitua Radio
Foro SpamLoco
Seguir el Escaparate
45 comentarios:
Buen aporte Rosita.
En mi caso, con Google Analytics (ahora también asíncrono) me he dado cuenta que una parte importante de mis visitas provienen de las imágenes, pues tengo muy en cuenta estos consejos.
También me he dado cuenta que además del atributo alt, si queremos posicionar una imagen, lo ideal sería que el "texto que la rodea" también sea descriptivo o relevante al contenido de la imagen.
Adicionalmente a eso, yo le añadiría algo más a lo del nombre de la imagen:
1. No utilizar eñes (ñ) ni acentos en el nombre de la imagen, pues te "daña" la url.
2. En vez de
→ salon-de-casa.png
podrías poner en tu caso
→ salon-de-casa-el-escaparate-de-rosa.png ... es decir también añadirle el nombre de nuestro blog para también posicionarlo :)
Saludos desde Colombia!
Felipe Así es, y de hecho esa información que aportas la tenemos en el enlace a la entrada original.
¡Gracias! Tus comentarios siempre aportan algo a todos. :D
Gracias Rosa, siempre con buenos consejos para mejor un poco mas nuestro blog, yo pienso que Blogger podria ser un excelente servicio ya que no te hostiga a tener un servidor o pagar un dominio pero en aspectos como estos es donde se queda corto y donde tus palabras se vuelven sabias... Saludos!!
hola wapa, aunque no comente paso por aquí y veo tu cambios :)
lo que no sé es cuando los darás por terminados, jajaja
por cierto... no me contestas ningún email, es de suponer que te llegan por lo de la imagen del header. Me alegro! ;)
Besossssss
Muy buen aporte Rosa. En mi caso en particular, estoy subiendo las imágenes a un servidor externo en lugar de hacer al propio blogger. Hago esto para conseguir el tamaño que quiero sin que blogger tenga que ajustarmelo automaticamente. El problema es que cuando intento añadir title y alt en dicho código no me deja. Los codigos son asi:
img src="http://i288.photobucket.com/albums/ll198/borrikitor/DenizOzuygur.jpg" border="0" alt="Photobucket" />
(Al principio también lleva < pero no me dejaba postearlo si estaba completo.
ahhhhhh, k tonto soy, no me tengas en cuenta estos dos comentarios!!!!!
Hola Miguel, solo quería decirte que las imagenes de blogger también puedes cambiarles el tamaño al original, siempre que no exceda de 800px de ancho.
Personalmente te desaconsejo photobucket (gratuito) porque cuando superes ciertas visitas deja de mostrar las imagenes por superar su limite de ancho de banda.
Picassa funciona perfecto, sin limitaciones para imagenes que no excedan ese ancho.
Saludos
Malina, blogger no me deja subir fotos mayores de 400px de ancho con el editor de textos antiguos. Puedo modificar las dimensiones una vez subido, pero me pixela la imagen y la verdad es que no me gusta nada el editor nuevo que tiene blogger.
Si hay alguna otra forma de verdad que me gustaría saberla
Por cierto, ayer publiqué un comentario preguntando una cuestión. Sé que Rosa tiene muchas preguntas, e igual ni siquiera vio el comentario.
Lo que necesitaba era como saber la forma de cambiar el color del texto del link "leer más".
Recogí de otra página un código que me funcionaba perfectamente para modificar el boton de dicho texto, pero el texto en sí no lo consigo modificar...
el código era este
.jump-link {
background: #FF0084;
padding: 1px 5px;
border: 1px solid #FF0000;
width: 70px;
}
He conseguido subir las imagenes al tamaño que quería utilizando Picassa en lugar del asistente de blogger. Pero aun necesito ayuda con el tema del link leer mas.....
Ayudad a este pobre muchacho!!!
Hola Rosa! aunque fuera de tópico quisieramos hacerte la siguiente consulta. Hemos creado en nuestro blog (www.masalladeldesierto.blogspot.com) páginas estáticas de acuerdo al procedimiento que aprendimos de tu blog. Lo que queremos hacer es en la misma barra de pestañas, colocar link de otros sitios.
¿Se puede hacer?
Gracias, que Dios te bendiga!
Claudio, administrador
Gracias a todos, gracias Rosa, gracias Malina.... al final no soy tan torpe como creia y he conseguido solucionarlo. :)
Os quiero!!!
Rosa, queria preguntarte una cosa. Creo que es sencilla, pero no consigo dar con el código, probablemente porque busco mal.
La cuestión es: que codigo necesito para que al pulsar el leer mas de mis post, no me refresque la pagina solamente con dicho post, sino que me "abra" completamente el post, sin necesidad de refrescar la pagina.
que guapa quedaste Rosa que aunque no te diga nada sabes que estoy chata
Gracias Rosita. :)
Ey Miguel, si puedes subir imágenes de cualquier tamaño via Picassa, y aunque al principio las redimensiona, haciendo click en la "lupita" se amplia al tamaño original y ya allí puedes obtenerle la Url.
Por cierto, quedo bien buena la imagen de tu header, muy chevere. ;)
¡Hola, Rosa!
He leído tus primeras líneas al respecto de aumentar las visitas al blog gracias a las imágenes y no puedo dejar de comentar algo:
De un tiempo a esta parte veo que recibo prácticamente el 90% de mis visitas a causa de las fotos, y precisamente estuve a punto de hacer lo contrario a lo que dices: cambiar sus nombres. Quizás te preguntes por qué; te digo: no tengo constancia de que ninguna de esas personas que entren a coger las fotos se queden, y yo misma hago lo propio cuando busco fotos: pincho en el enlace donde pone "ver imagen a tamaño completo", la guardo y adiós muy buenas.
Cierto es que tenga mucho que ver la calidad del blog (o la falta de ella), a la hora de captar la atención, pero no quería dejar de aportar mi experiencia, porque no es Jauja, precisamente, y es más, a veces me resulta bastante frustrante.
Mi experiencia y mi opinión, claro :)
Besazos
MajoSe queden o no, esa visita cuenta para Google... a mas visitas, mejor posicionamiento en los resultados del buscador y más facilidad para quien si busca algo en tu blog y no solo una imagen, se quede...
Por otro lado, no todos hacemos lo que dices... yo cuando busco una imagen para utilizar lo hago siempre entre las que son de libre uso y no suelo tomarlas de ningún blog si puedo evitarlo...
Ten en cuenta que quien hace como dices tampoco será nunca una visita fija, así que lo mismo te da...
Miguel Ángel a mi me pasaba lo mismo aunque le había dado un color este seguía con el color de los link visitados... por ejemplo cuando marcas un link de tu blog este se queda de un color X y por defecto ese color X quedaba también en el color texto del link "leer Mas". yo lo tenia posicionado antes de Body { luego lo moví y situé dejándolo debajo de .post o sea así:
.post {
background:#ffffff
width: 590px;
border:2px solid #f5f5f5;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
padding-left: 5px;
margin: 5px;
}
.jump-link {
float: right;
}
.jump-link {
background: #bc8f8f; /* Color de fondo */
padding: 2px 5px;
margin-right-top: 15px
border: 1px solid #bc8f8f;
width: 70px;
}
.jump-link a {
color: #FFF; /* Color del texto */
text-decoration: none;
font-weight: bold;
}
.jump-link:hover {
background: #bc8f8f8f; /* Color de fondo al pasar el cursor */
border: 1px solid #f5f5f5;
}
.jump-link a:hover{
}
Y así logre que el texto quedara del color que yo quería y no de los link visitados, solo que me quedo en una esquina del borde de .post-footer { pero bueno algo es algo. Y quizá le sirva a alguien.
Saludos.
Tengo que dar un millón de gracias a Rosa y otro millón a todos los que hacen comentarios, pues entre los consejos de Rosa y los comentarios de los demás, aprendemos muchísimo. :D
Gracias por éste importante detalle. Saludos
Hola! he llegado aquí gracias a un amigo. Me parece buenísimo, de gran ayuda tu blog.
besos
Gaby
Pedro Zúñiga... Es grato saber que alguno se molesta en leer los comentarios anteriores. ¡Gracias!
Gabriela¡Muchas gracias!
yo siempre pongo en mis imagenes el nombre de mi blog y en el alt tmb si funciona bien :)
Leyendo en otro blog me he fijado en lo que describes aquí, pero tener que repasar todos los post para cambiar el nombre se me antoja un poco cansado. La cuestión es que en wordpress tengo entendido que existe una manera de renombrar las fotos del blog. ¿Existe una posibilidad de hacer eso en blogger?
Locomosxca No, que yo sepa.
Hola Rosa,
Tengo una pregunta que no creo que sea ningún problema pero bueno.
Hace unos meses el 95% de las visitas de mi blog venía de google images y ahora ni siquiera llegan al 2% y teniendo en cuenta que tengo un blog de fotografia en el que la mayoría del contenido son fotos pues...
¿Sabes a qué puede deberse?
Javierlota La verdad que ni idea... y es una bajada significativa si... :O
Hola Rosa ;)
Queria plantearte una duda, quizas puedas ayudarme:
Tengo un blog personal y queria evitar que las imagenes del mismo salgan en las busquedas de google "buscar imagenes".
No se si tendras alguna entrada hablando sobre el asunto o sepas de algun lugar donde pueda leer sobre el tema.
Gracias de antemano ;)
Kawa No tengo idea de como hacer eso... es más, o se si será posible...
Jo... No esperaba una respuesta tan rotunda :(
Continuare la busqueda y gracias por tu tiempo Rosa ;)
Hola Rosa,
Me leido tu entrada para ver si en ella podria encontrar alguna idea que me aclarara respecto a lo que quiero lograr.
Por favor, necesito una ayuda en:
Quiero lograr mostrar/ocultar una imagen al marcar/desmarmar una casilla de verificacion. Llevo varios dias en esto y no he podido solucionarlo. He intentado muchas cosas, pero hasta ahora solo he logrado presentar la imagen oculta pero al marcar la casilla no se habilita la imagen.
En terminos de programacion escrita, te diria, que necesito:
evento 1: mostrar casilla verificacion + texto + imagen (hidden, sin href);(esto lo he logrado).
evento 2: si la casilla de verificacion es "true" mostrar evento 3 y si es "false" mostrar evento 1.
evento 3: mostrar imagen "visible" + href
Muchas gracias
DaycareWeb Mira en http://loseasi.blogspot.com/ sino estoy confundida hay algo sobre eso...
Hola Rosa,
Muchas gracias por rus respuestas, revisaré el link.
Por favor, tengo un gran problema: me registré gratis en 250free.com y alojé allí todas mis imagenes y archivos, y desde ayer esta fuera de servicio y no me dan explicaciones. Podrías recomendarme algun alojamiento (gratis, de momento) que pueda registrarme y redireccionar mis enlaces hacia allí.
Lo otro es, deseo ocultar los titulos de las paginas estaticas al ser cargadas, es decir cuando pinchas la pagina estatica, y te sale, aparece el titulo en la "entrada", eso no quiero mostrarlo. Si esto no es posible, cómo se puede enlazar una pagina estatica con una entrada, de manera que cuando pinchas la pagina estatica te salga dicha entrada.
Muchas gracias por todo.
Hola Rosa,
Respecto al comentario 33, te lo explicare de otra forma:
Cuando estas instalando una aplicacion, al principio, te aparece una casilla de verificacion para que la escojas, si aceptas las condiciones de instalacion. Por otro lado, hay un boton de "siguiente" (generalmente) que esta inhabilitado y solo si marcas la casilla se activa, y si vuelves a desmarcar la casilla este boton de "siguiente" se vuelve a inhabilitar. Eso es lo que quiero lograr con una casilla de verificacion y una imagen, en vez del boton "siguiente".
Creo que ahora te he explicado mejor lo que quiero.
Un saludo y muchas gracias.
DaycareWeb En el comentario 125 de la entrada donde explico como modificar el diseño de las páginas estáticas, encontrarás como ocultar su título.
Lo demás... supongo Jmiur continué en ello...
Gracias como siempre
Hola Rosa :) Tengo un par de dudas. Si alojo mis imágenes en Photobucket ¿también funciona todo esto? ¿Y el codigo lo tengo ke buscar en el editor de entradas en la pestaña de html? Si es así sólo encuentro un código como este:
img alt="Photobucket" border="0" src="http://i836.photobucket.com/albums/zz282/mofomala/borrachos-pulque.jpg" />
Es este al que te refieres? si es así tendria ke poner algo como esto?(claro ke en minusculas):
img alt="Photobucket" border="0"TITLE="BORRACHOS PULQUE" ALT="BORRACHOS PULQUE"src="http://i836.photobucket.com/albums/zz282/mofomala/borrachos-pulque.jpg" />
Por favor oriéntame con manzanitas jeje XD
Mala_sensei No necesitamos manzanitas, lo tienes bien claro, es tal como dices :D
Solo fijate que Photobucket ya incluye la etiqueta alt, donde dice: alt="Photobucket" lo hace para posicionarse el... cambias ahí Photobucket por tu propio texto y luego añades el title tal como dices:
muchas gracias, explicas de manera detallada y siempre me sacas de apuros, y ke por cierto me gusta tu blog, saludines ^^
Hola Rosa, mientras use la plantilla vieja en el blog me dio excelente resultado agregar el texto de la imagenes despues del Alt entre las comillas y como bien dices si apoyabas el mouse sobre la imagen se leia el texto y se posesionaba rapida en google
Ahora me pase a la plantilla Fantastico S.A. y cuando subo las fotos ya no me da la posiblidad de agregar el texto ya que en HTML
desaparecio el ALT(te quise pegar el texto pero me lo rechaza ya que me dice que no es aceptable su HTML.
Por favor me podras ayudar para ver si hay alguna posibilidad de colocar en algun lugar el texto para que se pueda leer apoyando el mouse, ya temo perder la buena ubicacion en google
te dejo la direccion del blog.
http://eltangoysusinvitados.blogspot.com
desde ya gracias por anticipado como en otras ocasiones.
Jorge
El tango Colocalo por ejemplo antes del src de la imagen, tal como ves en la entrada, tanto el alt como el title, pueden colocarse ahí sin problemas.
Hola Rosa magnìfica explicaciòn, gracias!! Tengo una pregunta ,¿en los post que ya estàn publicados, les puedo dar editar, agregar el atriuto alt,title y volver a publicar sin problemas? o sòlo lo puedo hacer en los post nuevos?:0
Un beso desde Argentina
Maria angeles Así es... aunque Google tarde algo más en indexarlas, acabará haciéndolo como las otras... puedes editar eso sin problemas.
Publicar un comentario
Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).
Los comentarios están siendo moderados.
Comentar con el formulario antiguo