¿Alguna vez has subido una imagen a tu sitio WordPress sólo para darte cuenta más tarde de que olvidaste añadir el texto ALT? Si es así, ¡no eres el único! El texto ALT, abreviatura de “texto alternativo”, sirve como descripción de las imágenes, proporcionando contexto a los usuarios que no puedan verlas. Es crucial tanto para el SEO (Search Engine Optimization) como para la accesibilidad, lo que lo convierte en un aspecto esencial de la gestión de tu sitio web.
En esta entrada del blog, te explicamos cómo utilizar el texto ALT.
En esta entrada del blog, prometemos proporcionarte una solución sencilla para añadir texto ALT de forma masiva a tus imágenes sin depender de ningún plugin. Sí, ¡has leído bien! Con sólo unas pocas líneas de código, puedes mejorar la accesibilidad de tu sitio web y mejorar su SEO. Vamos a ello
II. Entender el texto ALT
A. Definición de texto ALT
El texto ALT es un atributo HTML utilizado para describir imágenes en su sitio web. Cuando una imagen no se puede mostrar, o para aquellos que utilizan lectores de pantalla, el texto ALT sirve como sustituto, explicando de qué trata la imagen. Esto puede ser especialmente útil para los usuarios con problemas de visión que utilizan tecnologías de apoyo.
B. Ventajas de aplicar texto ALT a las imágenes
1. Mejora el SEO al mejorar la visibilidad en las búsquedas
Los motores de búsqueda como Google no pueden “ver” las imágenes de la misma manera que los humanos. Al proporcionar texto ALT, les estás dando una descripción que puede ser indexada, mejorando potencialmente tu posicionamiento en las páginas de resultados de los motores de búsqueda (SERPs). Cuando los usuarios buscan imágenes relacionadas con su contenido, tener texto ALT puede ayudar a que sus imágenes aparezcan en las búsquedas relevantes.
2. Aumenta la accesibilidad para usuarios con discapacidad visual
La accesibilidad es un componente crítico del diseño web. Al añadir texto ALT a tus imágenes, te aseguras de que los usuarios con discapacidad visual puedan entender el contenido de tus imágenes a través de lectores de pantalla. Esto no sólo mejora la experiencia del usuario, sino que también hace que su sitio web cumpla con las normas de accesibilidad.
III. Cómo prepararse para añadir texto ALT en masa
A. Accediendo al editor de temas de WordPress o al archivo Functions.php
Para empezar a añadir texto ALT a tus imágenes, necesitarás acceder al editor de tu tema de WordPress o al archivo functions.php. Puedes hacer esto yendo a tu panel de WordPress, navegando a Apariencia > Editor de temas, y seleccionando el archivo functions.php de la parte derecha.
Editor de temas.
B. Importancia de hacer una copia de seguridad de los archivos del sitio web antes de realizar cambios
Antes de hacer cualquier cambio en el código de su sitio web, es esencial hacer una copia de seguridad de sus archivos. Esto asegurará que tengas un punto de restauración si algo sale mal. Puedes utilizar un plugin de copia de seguridad o los servicios de copia de seguridad de tu proveedor de alojamiento. Recuerda, más vale prevenir que curar.
IV. Implementación del código de autocompletar ALT
A. Guía paso a paso del script proporcionado
¡Ahora, arremanguémonos y ensuciémonos las manos con algo de código! A continuación se muestra un sencillo script que le ayudará a rellenar automáticamente el texto ALT para las imágenes que actualmente carecen de ella utilizando el titulo de la imagen, si la imagen se llama “image” ese será el nombre de la imagen, pero si acostumbras a organizarlas por nombre y la imagen se llama”Oficina bonita” ese será el ALT que se agregará, aunque no haga la magia de identificar la imagen y ponerle un nombre chulo con super IA, esta solución te ahorrará un dolor de cabeza cuando tienes cientos o miles de fotos y las auditorias te van mal.
function set_image_alt_text() {
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'posts_per_page' => -1,
'post_status' => 'heredar'
);
$images = new WP_Query($args);
if ($images->have_posts()) {
while ($images->tiene_posts()) {
$images->el_post();
$attachment_id = get_the_ID();
$alt_text = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);
if (empty($alt_text)) {
$image_title = get_the_title($attachment_id);
update_post_meta($attachment_id, '_wp_attachment_image_alt', $image_title);
}
}
}
wp_reset_postdata();
}
add_action('init', 'set_image_alt_text');
1. Explicación de la función WP_Query utilizada para recuperar imágenes de la biblioteca multimedia
La función WP_Query se utiliza para crear una consulta personalizada que recupera archivos adjuntos (imágenes, en este caso) de la biblioteca multimedia de WordPress. Especificamos que queremos todos los adjuntos del tipo de entrada “attachment” y del tipo mime de entrada “image”. Esto asegurará que sólo estamos trabajando con imágenes.
2. Cómo el script comprueba si hay atributos ALT vacíos y los rellena con títulos de imágenes
Después de recuperar las imágenes, el script comprueba si el texto ALT está vacío utilizando la función get_post_meta. Si encuentra una imagen sin texto ALT, toma el título de la imagen (que generalmente es descriptivo) y lo rellena como texto ALT utilizando la función update_post_meta. Genial, ¿verdad?
B. Ubicación del script en tu tema (functions.php)
Una vez que hayas entendido el código, pégalo en el archivo functions.php de tu editor de temas. Asegúrate de colocarlo al final del archivo para evitar conflictos con el código existente. No olvides guardar los cambios.
V. Ejecutando el Script
A. Instrucciones para ejecutar el script de forma segura
Ahora que has añadido el script, es el momento de ejecutarlo. Simplemente actualiza tu sitio web o navega a cualquier página. El script se ejecutará automáticamente en la siguiente carga de página gracias a la línea add_action('init', 'set_image_alt_text'); que hemos incluido. Como por arte de magia
B. Verificación de que todas las imágenes se han actualizado correctamente
Después de ejecutar el script, es importante verificar que el texto ALT se ha añadido correctamente. Ve a tu biblioteca multimedia, haz clic en una imagen y comprueba si el campo de texto ALT está relleno. También puedes utilizar herramientas como Google Lighthouse para comprobar la accesibilidad de tu sitio web y asegurarte de que todo está en orden.
VI. Limpieza después de la ejecución
A. Importancia de borrar o comentar el script tras su uso para ahorrar recursos
Una vez que el script se ha ejecutado con éxito, es una buena práctica borrar o comentar el código en functions.php. Mantener código innecesario puede ralentizar su sitio web y dar lugar a posibles conflictos en el futuro.
B. Cómo comentar el código de forma efectiva
Para comentar el código de forma efectiva, puedes simplemente envolver la función en /* y */ de esta forma:
Cómo comentar el código de forma efectiva.
/* function set_image_alt_text() { // código de la función aquí } add_action('init', 'set_image_alt_text'); */
Esto evitará que el código se ejecute a la vez que lo mantiene en el archivo para futuras referencias si es necesario.
Conclusión
Has añadido con éxito texto ALT a tus imágenes de forma masiva sin usar ningún plugin. Al hacerlo, has mejorado el SEO y la accesibilidad de tu sitio web, facilitando que los motores de búsqueda y los usuarios con discapacidad visual se involucren con tu contenido. Todos salimos ganando.
