Optimizar las imágenes de su sitio web no es tarea fácil. No solo necesita asegurarse de que los tamaños de sus archivos sean manejables para evitar tiempos de carga de página prolongados, sino que también presentan muchas oportunidades para mejorar su optimización de motores de búsqueda (SEO) que son fáciles de pasar por alto. Por ejemplo, es posible que desconozca el atributo del título de la imagen y el papel que desempeña en los elementos visuales de su sitio.
En esta publicación, arrojaremos algo de luz sobre el atributo del título de la imagen, discutiremos en qué se diferencia del atributo alt y hablaremos sobre lo que significa para su estrategia de SEO. También le mostraremos cómo ocultarlo de los visitantes de su sitio.
¡Vamos a sumergirnos!
Suscríbete a nuestro canal de Youtube
Lo primero es lo primero: el atributo del título de la imagen no es el mismo que el nombre del archivo de la imagen. Más bien, es información que se puede incluir en la etiqueta HTML de la foto o el gráfico. He aquí un ejemplo, con el atributo de título al final:
|
01
|
<img src="filename.jpg" alt="description of your image" title="image title"> |
El impacto más notable que tiene el atributo de título es que los usuarios pueden verlo como una «información sobre herramientas» en la parte frontal de su sitio cuando se desplazan sobre la imagen:
No todos los navegadores admiten esta característica. Sin embargo, Firefox es uno de los pocos que lo hace y es el tercer navegador más popular en la web. Puede agregar atributos de título de imagen en WordPress a través de su Biblioteca de medios . Simplemente haga clic en la imagen en cuestión y complete el campo Título :
También puede agregarlo directamente en el Editor de bloques. Expanda la Configuración avanzada para el bloque de imagen y complete el campo Atributo de título :
El propósito de hacer visible el título de la imagen al pasar el mouse es proporcionar un poco de contexto adicional para sus visitantes. Por ejemplo, algunos creadores de contenido incluirán los nombres de las personas representadas en la imagen o detalles clave que los usuarios pueden beneficiarse al saber.
Sin embargo, no desea confiar exclusivamente en el atributo de título, especialmente porque no es visible para los usuarios en todos los navegadores. En algunos casos, un pie de foto puede ser más eficaz . Además, siempre debes asegurarte de agregar texto alternativo a tus imágenes , incluso si tienen atributos de título.
Al crear sus atributos de título, es mejor limitarlos a unas pocas palabras. Sea selectivo y descriptivo para que el texto flotante no sea demasiado largo y brinde valor a sus visitantes.
La diferencia entre el atributo de título y el atributo Alt
Mencionamos anteriormente que es importante agregar texto alternativo a sus imágenes, incluso si ha incluido un atributo de título. Es un error común que los creadores de contenido confundan el atributo del título de la imagen con el atributo alt, o supongan que usar ambos es una exageración.
El atributo alt especifica el texto alternativo de la imagen en su etiqueta HTML. Es el segundo atributo enumerado en nuestro ejemplo anterior:
|
01
|
<img src="filename.jpg" alt="description of your image" title="image title"> |
El propósito del texto alternativo es describir elementos visuales a los usuarios que no pueden verlos, ya sea porque la imagen no se cargó o porque están usando un lector de pantalla. Este texto se mostrará en lugar de la imagen en los casos en que no se pueda representar:
En WordPress, puede agregar texto alternativo a las imágenes a través de su Biblioteca multimedia o la configuración de cualquier bloque de imagen en el Editor de bloques. Esto es clave para garantizar que su sitio cumpla con los estándares de accesibilidad , por lo que le recomendamos encarecidamente que lo haga.
Es extremadamente importante no intentar usar el atributo del título de la imagen para reemplazar el atributo alt. No todos los lectores de pantalla admiten el atributo de título, y no hay forma de que los usuarios que dependen de la navegación del teclado pasen el cursor sobre una imagen para verla, por lo que esto podría generar problemas graves de accesibilidad en su sitio.
Cómo el atributo del título de la imagen impacta en el SEO
Hay muchos mensajes mixtos cuando se trata de cuán importante es el atributo del título de la imagen para el SEO. Algunos afirman que es una excelente manera de incorporar palabras clave adicionales, mientras que otros dicen que los robots de los motores de búsqueda ni siquiera lo rastrean.
Para ir al grano, el atributo del título de la imagen no es un factor de clasificación directo. Optimizar sus imágenes agregando títulos a todas ellas probablemente no hará un cambio significativo en la visibilidad de sus páginas en los resultados del motor de búsqueda.
Sin embargo, incluir atributos de título tampoco dañará su sitio desde el punto de vista de SEO. De hecho, Google lo recomienda . Si los robots de los motores de búsqueda los rastrean e incorpora palabras clave , es posible que al menos pueda dar a sus imágenes un impulso en los resultados de búsqueda de imágenes de Google.
Además, los títulos de las imágenes pueden mejorar la experiencia del usuario (UX) de su sitio al compartir detalles clave con los visitantes. Esto puede contribuir indirectamente al SEO al influir en los factores de clasificación, como las visitas a la página, la duración de la sesión y otras métricas similares.
Aun así, como hemos mencionado varias veces, no todos los navegadores y dispositivos admiten texto flotante. Revisar su biblioteca de medios y agregar títulos a cada archivo podría ser una gran pérdida de tiempo si la mayoría de sus usuarios nunca lo verán.
Cómo ocultar la información sobre herramientas del título de la imagen en WordPress
Es posible que prefiera ocultar la información sobre herramientas del título de la imagen. Quizás le preocupa que los visitantes lo encuentren molesto, o quiera usarlo principalmente con fines de SEO, pero no siente que sea necesario para ayudar a los lectores a comprender su contenido.
Simplemente puede eliminar el atributo de título de sus imágenes en el Editor de bloques y su Biblioteca de medios. Sin embargo, perderá cualquier beneficio potencial de SEO que pueda ver de él.
La mayoría de las personas que desean ocultar la información sobre herramientas terminan agregando JavaScript a sus sitios para poder mantener el atributo en sus etiquetas de imagen pero evitar que se muestre en la interfaz. Recomendamos usar un complemento como Insertar encabezados y pies de página para facilitar este proceso.
Agregue el siguiente código en la sección <head> , envuelto en etiquetas de script:
|
01
02
03
|
jQuery(document).ready(function($) { $('img[title]').each(function() { $(this).removeAttr('title'); });}); |
Si está utilizando Divi , puede omitir la instalación del complemento adicional y agregar este código navegando a Divi> Opciones de tema> Integración :
El primer editor de código en esta pantalla agregará JavaScript a la sección <head> de su sitio tal como lo haría Insertar encabezados y pies de página.
Conclusión
Es posible crear contenido en línea durante años y nunca pensar en los atributos del título de sus imágenes. Sin embargo, ignorarlos por completo podría ser una oportunidad perdida para brindar contexto adicional a sus usuarios. Más importante aún, el mal uso de este atributo podría tener consecuencias negativas para la accesibilidad y el SEO de su sitio.
En esta publicación, discutimos las diferencias entre el atributo del título de la imagen y el atributo alt para que pueda maximizar su SEO. También le mostramos cómo ocultar la información sobre herramientas del título de la imagen en la parte frontal para que los visitantes no puedan verla cuando se desplazan sobre una foto o un gráfico.
¿Tiene alguna pregunta sobre el atributo del título de la imagen o la optimización de la imagen? ¡Déjalos para nosotros en la sección de comentarios a continuación!
Imagen de Jane Kelly / Shutterstock.com