Tutorial: Optimización de imágenes

EspErpENto

Mi
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
16 Feb 2013
Mensajes
3.179
El tráfico que puede llevar una imagen optimizada a un artículo del blog es mayor de lo que puedes pensar.

Así, voy a compartir un tutorial práctico sobre optimización de imágenes con el que puedes aumentar fácilmente las visitas a tus webs.

Al optimizar una imagen para el artículo de un blog pensando en el seo debes tener en cuenta los tres atributos que debe llevar toda imagen.

Va requerir trabajo, puesto que lo más fácil es subir la imagen tal y como la hemos descargado.

Lo sé, porque eso es lo que hacía en el lejano 2013 cuando monte mi primer blog:

Las imágenes como archivo que son tienen tres características y todas ellas son de vital importancia, características que se conocen como ATRIBUTOS.

Los atributos que debe tener toda imagen optimizada para el seo son tres ( 3 )

  1. Atributo Name
  2. Atributo Alt
  3. Atributo Title
El atributo Name es el nombre que lleva todo archivo de imagen y debes considerar lo siguiente:

  • Nunca debes usar mayúsculas, tildes o caracteres especiales para su nombre
  • Tampoco debes usar números.
  • Si el name tiene dos o más palabras, usa un guión normal o un guión bajo para separar las palabras.
Voy a usar un post de ejemplo donde se busca posicionar para la KEY: vivienda a orilla del lago para que veas los errores y cómo se corrigen:

titulo del artículo.JPG


Ejemplo de name incorrecto:

nombre incorrecto.jpg


Como puedes ver el name de la imagen es un galimatía, incluso va el nombre de la web desde donde fue descargada.

Ejemplo de name correcto:

nombre de archivo correcto.jpg

Como puedes ver, el name de la imagen es vivienda con techo rojo a orilla del lago, no es la KEY exacta, pero como voy a meter cerca de seis imágenes, debo evitar que las seis tengan el mismo name.

Vamos ahora con el atributo ALT.

El atributo ALT es una propiedad que permite a un invidente poder comprender de qué trata la imagen y se coloca de forma sencilla:

Ejemplo de una imagen con alt vacío:

alt vacio.jpg

Como puedes ver, la caja dentro del rectángulo está vacía.

En cambio en esta otra ya he colocado el atributo Alt:

alt lleno.jpg

Llenar el alt es algo que a lo sumo vas a tardar un minuto y siendo exagerado.

El atributo title es el único que requiere un pelin de cuidado, puesto que implica escribir una línea de código dentro de la imagen.

Te muestro la forma de colocar el title de una imagen, que por cierto es un pop up que salta cuando colocas el ratón encima de la imagen, es una propiedad que solo se puede ver en el ordenador, pero las arañas de los buscadores son capaces de leerlas y por lo tanto les sirve para saber de qué va la imagen y posicionarla.

Lo primero es abrir el artículo en la pestaña de html:

pestana.JPG

Una vez que abres vas a ver algo así, por cierto eso es en el editor clásico, luego lo veremos en Gutenberg:

pestana.JPG

En el rectángulo en rojo puedes ver un h2, todo lo que ves es puro html y el html de la imagen está dentro de un rectángulo negro con las flechas rojas apuntando hacia el interior:




pestana.JPG

Una vez localizado el HTML de la imagen vas a escribir dentro de ella lo siguiente:


title="Vivienda a orilla del lago" es importante que no olvides colocar las comillas después del signo igual y el texto debe estar dentro de las comillas de apertura y de cierre y quedaría así:

title.JPG

Fíjate que toda la línea de código que has escrito debe estar separada tanto de la IMG como de la CLASS. El resultado sería:

title.JPG

Se ve bien el title y te trae tráfico

Vamos a ahora con el editor Gutenberg, que es exactamente lo mismo.

Lo primero es localizar los tres puntos verticales al lado derecho:

tres puntos.jpg

Una vez que los has localizado, pincha en ellos y se va a abrir un desplegable:

editor.jpg

Pincha donde dice: Editor de código y verás algo como esto:


editor html.JPG

Como es un poco confuso, usa el siguiente comando ctrl f para que salga un buscador:

control f.jpg

Basta con escribir: wp:image para encontrar todas las imágenes que tienes en el post:

buscador.jpg

Una vez que has localizado la imagen usa la misma línea de código para poner el atributo title:
Para ello busca el final del código html de la imagen y busca una comilla de cierre y una /, tal y como se ve en la imagen: imagen sin title.JPG

Una vez localizado, debes colocar la línea de código, asegurate de que la escribes después de la comilla y antes de la barra inclinada con que se cierra. Puedes variar el title para mejorar y aumentar las posibilidades de posicionamiento.


title="Vivienda a orilla del lago", también he usado otro title="HOLA A TODA LA COMUNIDAD DE FOROBETA":

imagen.JPG

Recuerda salir del editor visual:

salir editor.JPG


El resultado final sería:

final.jpg hola forobeta.jpg

Cualquier duda, lo comentas y te contesto tan rápido como sea posible.

Te garantizo que si implementas el tutorial, vas a mejorar el seo de tus páginas y por lo tanto las posibilidades de posicionamiento van a ser mayores.

Espero que os guste este tutorial sobre optimización seo de imágenes, recuerda participar en el tutorial. Tu participación contribuye a que pueda continuar compartiendo más tutoriales interesantes en la comunidad.

Gracias a al user @franciscofernandezes es posible escribir el Atributo title sin tocar código:


Muy buen tutorial. Lo único, para los que no quieran tocar código… En WordPress si una vez colocada la imagen pulsas sobre ella, le das al lápiz y despliegas los ajustes avanzados, podrás colocar directamente el atributo title de la imagen. Esto todo con el editor clásico. En Gutenberg es similar solo que se usan los ajustes del bloque de la parte derecha, en la sección de opciones avanzadas si no me equivoco.

Otra opción para acabar antes, aunque solo funciona con el editor clásico, es un plugin que hace que el apartado título que hay presente dentro de la biblioteca de imágenes debajo del texto alt pase automáticamente a ser el atributo title de las imágenes, que también es muy interesante.

Gracias al aporte del user @franciscofernandezes , como trabajo con html es raro que use el editor visual, aquí se puede ver el proceso de cómo colocar el atributo name sin tocar el código:

1. Pinchar en la imagen de tal modo que salte un pop up y pinchar en el lápiz que se ve en la imagen:

Ver el archivo adjunto 677724

Una vez que has pinchado en el lápiz se abre una ventana nueva dentro de Wordpress que tiene esta pinta:

Ver el archivo adjunto 677725

Hay que pinchar en donde dice OPCIONES AVANZADAS y se mostrará un desplegable como el siguiente:

Ver el archivo adjunto 677726

Se puede leer donde dice: Atributo "title" de la imagen y es justo ahí donde vamos a escribir su atributo, es decir el TITLE.

Ver el archivo adjunto 677727
Pinchas en el botón azúl en la parte de abajo a la derecha para actualizar y te regresa al inicio:

Ver el archivo adjunto 677728

Actualizas el artículo y el resultado final sería:


Ver el archivo adjunto 677729
 
Última edición:

BURGAKIKE

Iota
Verificado con videollamada
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
6 Feb 2017
Mensajes
2.385
Buen tutorial, aplicaré a mis sitios webs.
 

leit0s

Dseda
Verificado con videollamada
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
24 Dic 2012
Mensajes
1.013
Se agradece el tutorial, tengo una consulta, yo uso el theme Napoli y la imagen la toma directa de la imagen destacada, en si no la agrego al post; en ese caso estoy revisando el código donde editar y colocar el title pero aun no lo encontrado, como proceder.
 

Sorda

Zeta
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
4 Jul 2017
Mensajes
1.511
Buen tutorial, el último paso no lo sabía.
 

Sommera

1
Ómicron
Verificado con videollamada
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
21 Feb 2010
Mensajes
4.535
@EspErpENto

Buen tutorial.

Dejando de lado el tema SEO en el articulo individual y enfocando mas en el trafico de imágenes.

Con respecto a la indexacion de las imágenes en Google lo recomiendas? Adicionalmente, en caso de que indexen, me acuerdo que hace un tiempo leí que agregaban un código en el .htaccess para que el trafico que llegaba por imágenes sea dirigido a la URL. ¿Que opinas de esto o como se podría aprovechar potenciales visitantes?
 

EspErpENto

Mi
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
16 Feb 2013
Mensajes
3.179
Se agradece el tutorial, tengo una consulta, yo uso el theme Napoli y la imagen la toma directa de la imagen destacada, en si no la agrego al post; en ese caso estoy revisando el código donde editar y colocar el title pero aun no lo encontrado, como proceder.

Más o menos he pillado el problema, en todo caso puedes corregirme.

Según entiendo, solamente colocas la imagen destacada y el artículo muestra la imagen de forma dinámica, así funcionan la mayoría de los themes de WordPress.

¡No hay forma de colocar el atributo title a la feature image!

La única solución es que añadas una nueva imagen al artículo.
 

EspErpENto

Mi
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
16 Feb 2013
Mensajes
3.179
@EspErpENto

Buen tutorial.

Dejando de lado el tema SEO en el articulo individual y enfocando mas en el trafico de imágenes.

Con respecto a la indexacion de las imágenes en Google lo recomiendas? Adicionalmente, en caso de que indexen, me acuerdo que hace un tiempo leí que agregaban un código en el .htaccess para que el trafico que llegaba por imágenes sea dirigido a la URL. ¿Que opinas de esto o como se podría aprovechar potenciales visitantes?
Cuando indexo un artículo, un paso que siempre hago una vez publicado, automáticamente la Consola indexa TODO.

Eso incluye las imágenes que pueda tener el artículo.

Hasta hoy jamás he indexado la url de una imagen, puesto que, te repito, se indexan de forma automática, pero ello no significa que tú tengas que seguir mi rutina.

Es decir, puedes perfectamente indexar la url de la imagen.

Eso por un lado.

En relación a agregar un código al .htacces, lo veo innecesario, puesto que por defecto cuando pinchas en una imagen en Google / Imágenes te lleva a la URL del artículo, no te lleva a la imagen.

Creo que solamente en el caso de haber eliminado la imagen, es que te lleva a una página Error 404, por ese motivo antes de eliminar la imagen a lo bestia, lo mejor es crear una redirección a dicha imagen y así eliminar sin problema.

Un saludo y gracias por comentar.
 

franciscofernandezes

Beta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios!
Desde
3 Ene 2022
Mensajes
37
Muy buen tutorial. Lo único, para los que no quieran tocar código… En WordPress si una vez colocada la imagen pulsas sobre ella, le das al lápiz y despliegas los ajustes avanzados, podrás colocar directamente el atributo title de la imagen. Esto todo con el editor clásico. En Gutenberg es similar solo que se usan los ajustes del bloque de la parte derecha, en la sección de opciones avanzadas si no me equivoco.

Otra opción para acabar antes, aunque solo funciona con el editor clásico, es un plugin que hace que el apartado título que hay presente dentro de la biblioteca de imágenes debajo del texto alt pase automáticamente a ser el atributo title de las imágenes, que también es muy interesante.
 

perra dudosa

1
Ómicron
Verificado con videollamada
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
27 Sep 2019
Mensajes
4.905
Buen tutorial, ya lo sabía pero no se me había ocurrido convertir todo en html y ctrl-f ... me servirá ya que tengo muchas imágenes sin el atributo alt por pereza de hacerlo una por uno xD
Gracias
 

EspErpENto

Mi
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
16 Feb 2013
Mensajes
3.179
Muy buen tutorial. Lo único, para los que no quieran tocar código… En WordPress si una vez colocada la imagen pulsas sobre ella, le das al lápiz y despliegas los ajustes avanzados, podrás colocar directamente el atributo title de la imagen. Esto todo con el editor clásico. En Gutenberg es similar solo que se usan los ajustes del bloque de la parte derecha, en la sección de opciones avanzadas si no me equivoco.

Otra opción para acabar antes, aunque solo funciona con el editor clásico, es un plugin que hace que el apartado título que hay presente dentro de la biblioteca de imágenes debajo del texto alt pase automáticamente a ser el atributo title de las imágenes, que también es muy interesante.

Gracias al aporte del user @franciscofernandezes , como trabajo con html es raro que use el editor visual, aquí se puede ver el proceso de cómo colocar el atributo name sin tocar el código:

1. Pinchar en la imagen de tal modo que salte un pop up y pinchar en el lápiz que se ve en la imagen:

Lapiz.JPG

Una vez que has pinchado en el lápiz se abre una ventana nueva dentro de Wordpress que tiene esta pinta:

editor.JPG

Hay que pinchar en donde dice OPCIONES AVANZADAS y se mostrará un desplegable como el siguiente:

editor lapiz.JPG

Se puede leer donde dice: Atributo "title" de la imagen y es justo ahí donde vamos a escribir su atributo, es decir el TITLE.

title.JPG
Pinchas en el botón azúl en la parte de abajo a la derecha para actualizar y te regresa al inicio:

Lapiz.JPG

Actualizas el artículo y el resultado final sería:


gracias.jpg
 

perra dudosa

1
Ómicron
Verificado con videollamada
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
27 Sep 2019
Mensajes
4.905
Otra opción para acabar antes, aunque solo funciona con el editor clásico, es un plugin que hace que el apartado título que hay presente dentro de la biblioteca de imágenes debajo del texto alt pase automáticamente a ser el atributo title de las imágenes, que también es muy interesante.
Que plugin es?
 

EspErpENto

Mi
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
16 Feb 2013
Mensajes
3.179
Buen tutorial, ya lo sabía pero no se me había ocurrido convertir todo en html y ctrl-f ... me servirá ya que tengo muchas imágenes sin el atributo alt por pereza de hacerlo una por uno xD
Gracias

En Gutenber no necesitas tocar el código para escribir el alt:

sin alt.JPG

Cuando pinchas en la imagen aparecen distintas opciones, entre ellas la del Atributo Alt:

con alt.JPG

Lo ves ¿no?

Al día de hoy mi consejo es que te olvides del editor clásico, mientras más rápido uses Gutenber, más rápido te vas a evitar problemas.

WordPress, en un momento dado, va a dejar de dar soporte al plugins del editor clásico.

Yo tarde un año en pasarme a Gutenber y ya te digo, luego me di cuenta del tiempo que había perdido al seguir usando el editor clásico.
 

franciscofernandezes

Beta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios!
Desde
3 Ene 2022
Mensajes
37

El plugin es este: https://es.wordpress.org/plugins/img-title-restore/

Lleva dos años sin ser actualizado, pero al menos a mi me funciona. Se debe tener en cuenta de todas formas que no va a añadir el atributo title a imágenes ya adjuntadas, sino que va a comenzar a funcionar para las nuevas imágenes que añadas a partir de ahora. También es importante que tengas en cuenta que no funciona con Gutenberg… Solo con el editor clásico.

Otra opción si no recuerdo mal es el plugin Rank Math de SEO, me suena que tenía una opción para añadir automáticamente los atributos Alt y Title que faltan en las imágenes. Tampoco puedo garantizar que no sea una opción de pago, pues no lo recuerdo.
 

Crea una cuenta o accede para comentar

Debes ser un miembro para poder comentar

Crear cuenta

Crea una cuenta en nuestra comunidad

Acceder

¿Ya tienes una cuenta? Accede aquí


Arriba