Cómo automatizar el atributo ALT en todas las imágenes de WordPress

El atributo alt (texto alternativo) tiene la función de describir una imagen en la etiqueta HTML <img>. Debes tomarlo como un atributo obligatorio para accesibilidad web y SEO.

Cada imagen que publiques debería sí o sí tener una descripción en su atributo alt por tres razones:

  1. Harás tu web más accesible para personas con alguna discapacidad visual, el atributo altes utilizado por los lectores de pantalla y navegadores para invidentes.
  2. Por SEO, ayudarás al posicionamiento de tu sitio.
  3. En el caso de que haya algún problema por el que no se puede mostrar la imagen el navegador mostrará el texto del atributo altDe ahí lo de texto alternativo.

No debes confundirlo con el atributo title que los navegadores lo utilizan a modo de tooltip.

Cómo añadir el atributo alt en WordPress

Cuando añadimos una imagen en WordPress tenemos opción de incluirlo en un campo. Bien desde la Biblioteca multimedia

atributo alt wordpress

o desde el editor

Cómo automatizar el atributo ALT en todas las imágenes de WordPress ceslava 1

Si no completas ese campo el resultado será un alt vacío: alt=""WordPress no lo coge ni del nombre del archivo ni del título.

Cómo añadir alt a todas las imágenes de WordPress

Si no quieres hacer este trabajo de forma manual puedes automatizarlo, generar un texto alt para todas las imágenes de tu WordPress, las antiguas y para todas las que publiques desde ahora.

Puedes utilizar el plugin SEO Friendly Images aunque lleva más de años sin actualizarse aún tiene más 200.000 instalaciones activas-

O bien puedes añadir en tu archivo functions.php este código que buscará todos los alt vacíos, la cadena alt=""en el contenido de tus páginas y entradas y los sustituirá por alt="Título de la página o entrada nº imagen" Si pusiste manualmente el altno cambiará nada.

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(
          'alt=""',
          'alt="' . esc_attr( get_the_title() ) . ' '. $index . '"',
          $images[0][$index] );
        $content = str_replace(
          $images[0][$index],
          $new_img,
          $content );
      }
    }
  }
  return $content;
}
add_filter( 'the_content', 'add_alt_tags', 99999 );

* Este código lo publicaron hace un tiempo los amigos de Nelio Software pero le he hecho algunas modificaciones para que funcione correctamente.

Como hemos comentado esto es para las imágenes de tus entradas, páginas y Tipos de entradas personalizadas (CPT) pero en un WP hay más imágenes a las que añadir el atributo alt.Por un lado las imágenes de tu tema, para ello haz una búsqueda de las <img> en los archivos de tu tema y asegúrate de que tienen el atributo alt y por otro las imágenes destacadas.

Cómo añadir alta las imágenes destacadas en WordPress

Las imágenes destacadas la suelen utilizar los temas en la página de inicio, en el sidebar, en el footer, en las páginas de archivo, etc. En esta entrada hablamos de todo lo concerniente a las imágenes destacadas en WordPres

Normalmente se hace uso de la función the_post_thumbnail o get_the_post_thumbnail en ambas funciones le puedes añadir los atributos que quieras al <img> que genere.

Para añadir un alt con el título de la publicación busca esas 2 funciones en los archivos de tu tema y añade el array entero

the_post_thumbnail( 
'large', 
array( "alt" => esc_attr( get_the_title() ) )

);

 

o si ya existe añade el alt separado por coma


the_post_thumbnail( 
'large', 
array( 'itemprop' => "image", "alt" => esc_attr( get_the_title() ) )
);

 

Escribí esto el 22/06/2017

3 comentarios

  1. Muchas gracias Cristian por compartir alternativas a introducir manualmente los textos ALTernativos a las imágenes. Es habitual encontrarnos en la optimización SEO que falte la etiqueta ALT en la mayoría de las imágenes y aunque lo óptimo es la individualización hay ocasiones que priman otros factores.

    Saludos.

  2. Juan Pablo dice:

    Muchas gracias Cristian por compartir este conocimiento, buscaba precisamente esto. Lo probare en mi web. Gracias nuevamente.

Tu comentario

Usamos cookies para que mejorar la experiencia de usuario.

ACEPTAR
Aviso de cookies