Añadir automáticamente el atributo alt a todas tus imágenes

WordPress

¿Eres un fan de WordPress? Tanto si eres un blogger eventual como un editor profesional, Nelio Content es el calendario editorial que hará más fácil tu día a día. ¡Échale un vistazo!

En HTML, toda imagen puede definir un atributo Alt que defina el contenido de la imagen con un pequeño texto. Este texto se muestra siempre que la imagen no pueda visualizarse por cualquier motivo (por ejemplo, porque el navegador del usuario bloquea las imágenes o el usuario utiliza un lector que no las permite como los lectores de pantalla y navegadores para invidentes).

Más allá de esta función, la importancia y popularidad del texto alternativo para las imágenes viene de su papel en el posicionamiento de la página en los buscadores (vaya lo que en inglés llamamos “Search Engine Optimization”, es decir el famoso SEO). Como los buscadores no pueden “ver” las imágenes (todavía, Google está poniendo mucho esfuerzo y dinero en algoritmos capaces, como mínimo, de identificar los objetos principales en una imagen mediante el uso de redes neuronales), la única manera de explicarles de que van las imágenes enlazadas en una página web es mediante el uso del atributo Alt.

Hubo un tiempo en qué se vendía el atributo Alt como el santo grial del posicionamiento, que iba a marcar la diferencia entre aparecer en la primera página de Google o no. Hoy se acepta que esto no es así, sino que este atributo es uno más de los más de cien parámetros que se dice que Google utiliza para evaluar las páginas indexadas (pura especulación pero esta página describe los 200 parámetros que según ellos Google tiene en cuenta). Aún así, sigue siendo importante más que nada porqué es uno de los parámetros que más fácilmente podemos mejorar y sin prácticamente coste alguno.

De hecho, muchos de nosotros somos conscientes de la importancia de añadir el Alt pero no siempre nos acordamos de hacerlo (por ejemplo, yo normalmente me acuerdo al añadir las imágenes que forman parte de la entrada pero muchas veces me olvido cuando estoy añadiendo la imagen destacada). En un mundo ideal deberíamos revisar siempre que todas las imágenes tengan su texto alternativo definido (por ejemplo, mirando en la librería multimedia que se haya indicado el Alt al subir las imágenes) y corregir las que no proponiendo el texto más adecuado cada vez.

Pero como hay que ser realistas, la opción menos mala es poner como mínimo un valor (diferente) en cada imagen. Y para eso nada mejor que este snippet de WordPress propuesto por Svilen Popov que añade como texto alternativo a cada imagen que no lo tenga ya definido, el título de la entrada / página donde se encuentre la imagen:

function add_alt_tags( $content ) {
  preg_match_all( '/<img (.*?)\/>/', $content, $images );
  if ( ! is_null( $images ) ) {
    foreach ( $images[1] as $index => $value ) {
      if ( ! preg_match( '/alt=/', $value ) ) {
        $new_img = str_replace(
          '<img',
          '<img alt="' . esc_attr( get_the_title() ) . '"',
          $images[0][$index] );
        $content = str_replace(
          $images[0][$index],
          $new_img,
          $content );
      }
    }
  }
  return $content;
}
add_filter( 'the_content', 'add_alt_tags', 99999 );

¡Ya tienes una nueva función útil para añadir a tu archivo functions.php!

FlojaNo está malBienMuy bien¡Impecable! (1 votos, promedio: 5,00 de 5)
Cargando…

por

Aunque ya no está involucrado en el proyecto, Jordi fue uno de los co-fundadores de Nelio Software. Actualmente, es líder de un grupo de investigación en la UOC.

31 comentarios en “Añadir automáticamente el atributo alt a todas tus imágenes

  1. Interesante. Aunque es mejor que no poner nada, sigue siendo una solución a medias: sólo funciona en los posts y páginas, y en caso de post con varias imágenes, todas tendrían el mismo atributo alt.

    Te paso por cierto otro enlace bastante interesante sobre los factores tomados en cuenta por Google para el Ranking. Se trata de los resultados de una enquesta a expertos:
    http://moz.com/search-ranking-factors

  2. Hola!

    Lllevo bastante tiempo con este tema que me lleva de cabeza, he puesto tu script en muchas sitios pero no lo consigo hacer. igual es por las últimas actualizaciones de wordpress.

    No sabrás de otro modo verdad?

    Saludos!

      1. Buenas noches, he intentado utilizar estos códigos pero la verdad que no sé que más hay que hacer, porque no veo ningún cambio en mi tema, ¿Acaso hay que hacer un paso adicional que no entendí?
        Tengo el tema parabola de wordpress y no sé como poner el atributo “alt” en los slider ni en las imágenes que están en inicio, de ahí por lo demás todas las imágenes que están conectadas con los artículos, si están bien. Gracias por la respuesta.

        1. Hola Alberto.

          He repasado el código que compartió mi compañero Jordi y he detectado un pequeño error en la primera expresión regular (línea 2). Con este cambio, todo debería funcionar correctamente. ¡Pruébalo y nos dices!

          ¡Un saludo!

          1. Hola Fabiana,

            En la versión actual de la web el error ya no está. Hice la corrección directamente en la entrada y, al tratarse de un fragmento de código, eliminé el código que fallaba y dejé el nuevo.

            ¿Por qué lo preguntas? ¿No te funciona el código? ¿Tienes algún problema?

            Un saludo,
            David

        2. Alberto yo uso el tema parabola y para asignar el alt a las imagenes del slider tome la decisión de darles el mismo nombre que el title() de cada imagen en el slider.
          En el archivo frontpage.php busca el codigo del slider:

          Donde aparece al atributo alt="" (vacío), debes agregar el siguiente código:

          alt=""
          

          Es una opción poco ortodoxa pero funciona.

          Espero sea de ayuda, un saludo.

        3. Hola Alberto.

          Yo uso el tema parabola y me encontré con el mismo problema que tú, al final tomé la decisión de asignar al atributo “alt” de cada imagen del slider, el mismo que el title(h2).
          En el archivo frontpage.php busca el código del slider.

          Y donde aparece el atributo alt=””(vacio), agrega el siguiente código:

          alt=”

          Las imágenes del slider tendrán como atributo “alt” el titulo que le hayas asignado a cada una en la página de presentación.
          Espero que te sirva de ayuda.
          Un saludo.

  3. Hola otra vez xD

    Lo he puesto en todos los funtions de muchas maneras y nada, creo recordar que lo puse hace una semana (no se si este u otro) y funcionaba hasta que actualicé plantilla+wordpress .

    No se si puedes hecharme una mano…. Uso WordPress 4.2.2 running HappenStance theme.

    gracias.

    1. ¡Hola Daniel!

      Perdona que no te contestáramos antes. Normalmente, el autor de cada entrada se encarga de gestionar sus comentarios… pero imagino que a Jordi se le pasó por alto el tuyo. Esta mañana he visto el comentario de Alberto y me he dado cuenta que el tuyo estaba sin responder. Efectivamente, había un error en la función que publicó originalmente Jordi. Si pruebas la nueva versión, ¡todo debería funcionar ya!

      Un saludo,
      David

      1. Hola David:
        Pues soy un puro noob en WordPress, pero leyendo tutoriales se llega a roma !!.
        El tema está en:
        1-Ya coloqué la función dentro de functions.php, pero ningún cambio ocurre!!
        2-Tengo que hacer la llamada a la función desde algún otro archivo para que se ejecute o debería auto-ejecutarse justo donde está?

        Nota: Uso WP 4.4.1 nose si influye en algo.

        Espero por su amigable y experimentada respuesta.

        1. ¡Hola Goku!

          Muchas gracias por ponerte en contacto con nosotros. A ver si puedo ayudarte.

          Lo primero que tienes que ver es que el fragmento de código que compartió Jordi tiene dos partes: una función (add_alt_tags) que es la que añade los atributos alt a tus imágenes y un hook (add_filter) que es el que invoca a esa función cuando se pinta el contenido de una entrada. Comprueba que las dos partes estén añadidas en tu fichero functions.php tal y como está disponible en la entrada.

          Si todo está en orden, entonces debes tener en cuenta dos cosas:

          1. La sustitución de las imágenes únicamente se aplica en el contenido de una entrada. Si pretendes que se añada el atributo alt en imágenes que añade el tema, widgets… no lo conseguirás.
          2. Si estás usando un tema personalizado, es muy importante que al pintar el contenido de una entrada $post, se haga usando la función the_content (en lugar de, por ejemplo, accediendo al atributo $post->the_content). Esto es debido a que la función de WordPress the_content “filtra” el contenido de una entrada y permite modificarlo justo antes de que se pinte por pantalla.

          ¿Te sirve esto de ayuda o te está pasando algo diferente?

          Un saludo,
          David

  4. Hola David!!

    He encontrado este post pues estoy como loca mirando en internet a ver como soluciono mi problema con los atributos alt de las imágenes de mis post.

    Te cuento, uso el tema DIVI personalizado (no sé si esto influye en algo)
    Cuando subo las imágenes, relleno las casillas de titulo, texto alternativo y atributo tittle de la imagen.
    Pero luego el plugin de SEO me indica que las imágenes del post no tienen atributos alt.

    ¿Por qué me ocurre esto, si se supone que la información esta agregada a la imagen?
    Lo que escribo en las casilla suele ser una descripción de la imagen y la palabra clave del post.

    AHH yo soy neofita total en HTML, sólo uso las casillas que wordpress me indica, no me meto con el código pues no tengo ni idea.

    Te agradecería muchísimo si pudieras ayudarme!!

    Gracias

    1. ¡Hola Arianna!

      Muchas gracias por ponerte en contacto con nosotros. Veamos si desde WPrincipiante te podemos ayudar 😉

      Hasta donde yo sé, el plugin de SEO (entiendo que el de Yoast) da dos tipos de aviso diferentes para el atributo alt:

      1. A las imágenes de esta página les faltan los atributos alt.
      2. Las imágenes en esta página no tienen etiquetas alt que contengan su palabra clave.

      Si te aparece el segundo mensaje, el problema es bastante sencillo de solucionar. Suponiendo que tu palabra clave es “decoración”, simplemente deberás comprobar que alguna de las imágenes que has incorporado en tu entrada incluya esa palabra. Para ello, simplemente accede a la galería de imágenes de WordPress, busca las imágenes que has insertado en tu entrada y asegúrate que alguna tenga la palabra “decoración” en la opción “Texto alternativo”.

      Si, por otro lado, estás viendo el primer mensaje, entonces lo que pasa es que alguna de tus imágenes no incluye el atributo alt o, si lo incluye, éste aparece vacío (en plan alt=""). Para comprobar si ese es el caso bastará con que repitas el proceso anterior y te asegures que la opción “Texto alternativo” no está vacía.

      Todo esto es asumiendo que el problema lo tienes en alguna entrada. Si el aviso aparece en las páginas de tu web, entonces necesitarás repasar el contenido “a mano”. El editor de entradas de WordPress es estándar, pero el editor de páginas depende del tema que tengas instalado (en tu caso, DIVI). No sé muy bien cómo funciona DIVI, pero en algún sitio debe haber una opción para ver el “código fuente” de la página en cuestión. Una vez lo tengas delante, busca la cadena de texto “<img“, la cual suele tener una pinta parecida a esto:

      <img src="http://tuweb.com/wp-contents/uploads/2016/02/una-imagen.png" ... />

      y asegúrate de que incluye el atributo alt:

      <img src="http://tuweb.com/wp-contents/uploads/2016/02/una-imagen.png" ... alt="Aquí el atributo en cuestión" />

      Si alguna de tus imágenes no lo incluye, añádelo a mano y listo. Aunque, eso sí, te recomiendo que primero guardes una copia de tu página; si no eres muy diestra con el HTML es fácil que “desmontes” la página al editar su código a mano, así que mejor tener la copia de seguridad cerca.

      Finalmente, un último comentario. Si, por lo que fuera, tu atributo alt tiene que tener comillas dobles, deberás sustituirlas por &quot;. Así, este texto:

      Este es mi "texto alternativo"

      deberá ser:

      Este es mi &quot;texto alternativo&quot;

      De esta forma, cuando lo metas dentro del atributo alt, se verá así:

      <img ... alt="Este es mi &quot;texto alternativo&quot;" />

      con lo que las comillas dobles que aparecen en el código HTML final sirven para delimitar el principio y el final del atributo alt únicamente.

      Espero haberte podido ayudar y, en cualquier caso, que nos cuentes cómo lo llevas 😉

      Un saludo,
      David

    1. ¡Gracias por la aportación!

      De todas formas, fíjate que la función que compartimos lo que hace es buscar todas las etiquetas <img …/> en el contenido de una entrada y, para cada una de ellas, le añade el atributo alt con el título de la entrada en cuestión (si no lo tuviera ya). Teniendo en cuenta que nuestro filtro está pensado para ejecutarse el último, cuando (en teoría) los plugins de imágenes ya habrán procesado sus shortcodes y tal, parece que el código debería funcionar, ¿no?

      Ahora bien, si las etiquetas img se generasen por JavaScript en el navegador del usuario, entonces el filtro no funcionaría, puesto que no existiría ninguna en el momento de procesar el contenido de la entrada. ¿Es esto habitual?

      En fin, si recuerdas algún plugin de imágenes complicadas y te animas a compartir tu experiencia, te lo agradecería mucho.

      Un saludo,
      David

  5. Hola, estoy dando mis primeros pasos en wordpress y Divi, pero no consigo que el yoast me marque en verde que las imágenes tienen el atributo alt.

    El caso es que si miro la web con el inspector de firefox me salen las imágenes con el atributo alt.

    La web es http://www.pruebas.elacrobata.com

    Podéis decirme por que es?.

    Gracias

    1. Hola Roberto. Por lo que puedo ver en tu web, las imágenes si que tienen puesto el atributo alt. Ten en cuenta que WordPress SEO by Yoast no siempre es capaz de detectar todo perfectamente. Yo no me obsesionaría con conseguir que el semáforo esté en verde. Creo que es contraproducente. Con conseguir unos mínimos ya es suficiente.

  6. Hola Jordi! Primero te agradezco por compartir esta publicación. Te comento que estoy interesada en el tema compartes no porque se me olviden los atributos ALT, sino porque aún cuando los tengo configurados en mi biblioteca mi sitio no los muestra en el código. Sospecho que es un error del Theme porque aunque me dí la tarea de definirlos todos no aparece ni un solo atributo Alt en el sitio.

    Hice la prueba con el código que compartiste y si me funcionó, pero me puso el mismo atributo para TODAS las imágenes de cada página poniéndoles el título de la sección y eso si bien es algo, no es taaan producente…

    De casualidad no conoces alguna manera de mandar a llamar los atributos que están definidos en la biblioteca? Este es el theme que estoy utilizando: http://thegravity.net/novalumen/
    De antemano gracias por tu ayuda!!

    1. Hola Andrea. Es mucho mejor que contactes con los desarrolladores del tema directamente. Seguramente ellos te podrán ayudar a solucionar el tema del atributo ALT. Y así además todos los que utilicen este mismo tema se verán beneficiados. Nosotros no hemos trabajado con este tema, así que no podemos ayudarte demasiado. Gracias por tu comentario.

  7. Hola, muchas gracias por compartir esta información.

    En mi caso, uso el tema uDesign y este tema pone por defecto en el alt de la imagen principal el título de la entrada en cuestión donde la imagen está insertada. Yo tengo optimizado el alt y el title de cada imagen en la biblioteca de medios, pero el tema no me respeta esta optimización y planta como alt el título del post como he dicho antes…

    He visto en el funtions.php del tema que para el alt de las imágenes principales de las entradas usa el siguiente código:

    alt=”‘ . esc_attr( get_post_field( ‘post_title’, $post_id ) ) . ‘”

    ¿Cómo puedo hacer para que el tema me respete el alt de la propia imagen (el que tengo en la biblioteca de medios y no el que me inserta el tema con el título del post)?

    ¡Muchas gracias por vuestra ayuda y un saludo!

    1. Hola Javier. Antes de nada, permíteme que te diga que menuda basura de tema si te hace eso 😜. Para recuperar el alt de la imagen destacada puedes probar algo tal que así:

      $alt = esc_attr( get_post_field( ‘post_title’, $post_id ) );
      $thumbnail_id    = get_post_thumbnail_id( $post_id );
      $thumbnail_image = get_posts( array( 'p' => $thumbnail_id, 'post_type' => 'attachment' ) );
      
      if ( $thumbnail_image && isset( $thumbnail_image[0]) ) {
         $alt = $thumbnail_image[0]->post_excerpt;
      }

      Con esto tienes en la variable PHP $alt el valor del texto alternativo para la imagen destacada.
      Aunque lo mejor que puedes hacer es contactar directamente con el desarrollador del tema para que te lo cambie.

      1. jajaja, aunque también es mejor que te rellene el alt a que te lo deje vacío y no dé otra opción, pero en este caso me trae de cabeza.. 🙂

        Muchas gracias por tu respuesta, pero inserto el código que me dices en el functions.php y sigue tomando el título de la entrada como alt de la imagen principal…

        ¿Hay algo más que se me escape y esté haciendo mal?

  8. Hola!!

    2017 y la función sigue siendo muy útil gracias! 🙂

    Dado que woocommerce guarda un producto como un post, habría que hacer algún cambio para utilizarlo en imágenes de producto?
    En caso afirmativo, supongo que será lo mismo si el mismo nombre del post lo utilizo para el caption y description correcto?
    Gracias!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *