Texto alternativo de la imagen: qué es, cómo escribirlo y por qué es importante para el SEO

Si dedicas tiempo a optimizar el contenido, los encabezados, los subtítulos y las meta descripciones de tu blog o sitio web para los motores de búsqueda, la siguiente imagen debería alarmarte:

La captura de pantalla anterior es la primera página de resultados del motor de búsqueda (SERP) que Google produce para el término de búsqueda, «ejemplos de tablas de Excel». Observe cómo, además de la pestaña «Imágenes» en la parte superior, Google incluye un paquete sustancial de imágenes en las que se puede hacer clic al comienzo de la página de resultados principal, antes de que los resultados de texto orgánico sean visibles.

Hoy en día, casi el 38% de las SERP de Google muestran imágenes, y es probable que aumente. Eso significa que, a pesar de sus mejores esfuerzos de SEO, aún podría perderse otra fuente de tráfico orgánico: las imágenes de su sitio web. ¿Cómo entras en esta fuente de tráfico? Texto alternativo de la imagen.

Ya sea que realice SEO para su negocio o no, optimizar el texto alternativo de la imagen de su sitio web es su boleto para crear una mejor experiencia de usuario para sus visitantes, sin importar cómo lo encontraron por primera vez.

Cómo agregar texto alternativo a sus imágenes

En la mayoría de los sistemas de administración de contenido (CMS), hacer clic en una imagen en el cuerpo de una publicación de blog produce una optimización de imagen o un módulo de texto enriquecido, donde puede crear y cambiar el texto alternativo de la imagen.

Veamos cuáles son los próximos pasos para CMS Hub y WordPress a continuación.

Cómo agregar texto alternativo en HubSpot CMS

En HubSpot, una vez que hayas hecho clic en una imagen y hayas hecho clic en el ícono de edición (que parece un lápiz), aparecerá un cuadro emergente de optimización de imagen.

Así es como se ve esta ventana de optimización de imagen en el CMS dentro de su portal de HubSpot:

Su texto alternativo se escribe automáticamente en el código fuente HTML de la página web, donde puede editar aún más el texto alternativo de la imagen si su CMS no tiene una ventana de texto alternativo fácilmente editable. Así es como podría verse esa etiqueta alt en el código fuente de un artículo:

Cómo agregar texto alternativo en el CMS de WordPress

En WordPress, al hacer clic en una imagen se abrirá automáticamente el Cuadra pestaña en la barra lateral. En la sección denominada «Configuración de imagen», agregue el texto alternativo en el campo vacío.

Cuando esté listo, haga clic en Actualizar desde la barra de herramientas en la parte superior de la pantalla.

¿La regla más importante del texto alternativo? Sea descriptivo y específico. Sin embargo, tenga en cuenta que esta regla de texto alternativo puede perder su valor si su texto alternativo no considera también el contexto de la imagen. El texto alternativo puede fallar en la marca de tres formas diferentes. Considere los siguientes ejemplos.

3 ejemplos de texto alternativo de imagen (lo bueno y lo malo)

1. Palabra clave frente a detalle

Texto alternativo incorrecto

alt="HubSpot office wall Singapore inbound marketing workplace murals orange walls ship it"

¿Qué pasa con la línea de texto alternativo de arriba? Demasiadas referencias a HubSpot. El uso de texto alternativo para rellenar palabras clave en oraciones fragmentadas agrega demasiada pelusa a la imagen y poco contexto. Esas palabras clave pueden ser importantes para el editor, pero no para los rastreadores web.

De hecho, el texto alternativo anterior dificulta que Google comprenda cómo se relaciona la imagen con el resto de la página web o el artículo en el que se publica, lo que impide que la imagen se clasifique en el ranking relacionado. cola larga palabras clave que tienen niveles más altos de interés detrás de ellas.

Peor aún, si rellena demasiadas palabras clave, puede incurrir en una penalización de Google.

Buen texto alternativo

Con el texto alternativo incorrecto (arriba) en mente, un texto alternativo mejor para esta imagen podría ser:

alt="Orange mural that says 'ship it' on a wall at HubSpot's Singapore office"

2. Detalle frente a especificidad

Imagen a través de Winslow Townson

Texto alternativo incorrecto

alt="Baseball player hitting a ball at a baseball field"

La línea de texto alternativo de arriba sigue técnicamente la primera regla del texto alternativo, ser descriptivo, pero no es descriptivo de la manera correcta. Sí, la imagen de arriba muestra un campo de béisbol y un jugador golpeando una pelota de béisbol. Pero esta es también una imagen del Fenway Park, y del # 34 de los Medias Rojas, David Ortiz, marcando uno sobre el jardín derecho. Estos son detalles importantes que Google necesitaría para indexar correctamente la imagen si está, por ejemplo, en una publicación de blog sobre deportes de Boston.

Buen texto alternativo

Con el texto alternativo incorrecto (arriba) en mente, un texto alternativo mejor para esta imagen podría ser:

alt="David Ortiz of the Boston Red Sox batting from home plate at Fenway Park"

3. Especificidad frente a contexto

Imagen vía UCLA

Ambas imágenes de arriba tienen un contexto claro que puede ayudarnos a escribir un buen texto alternativo: una es de una oficina de HubSpot y la otra es Fenway Park. Pero, ¿qué pasa si su imagen no tiene un contexto oficial (como el nombre de un lugar) para describirla?

Aquí es donde deberá utilizar el tema del artículo o la página web en la que está publicando la imagen. Aquí hay algunos buenos y malos ejemplos de texto alternativo según el motivo por el que lo publica:

Para un artículo sobre la asistencia a la escuela de negocios

Texto alternativo incorrecto

alt="Woman pointing to a person's computer screen"

La línea de texto alternativo anterior normalmente pasaría como texto alternativo decente, pero dado que nuestro objetivo es publicar esta imagen con un artículo sobre cómo ir a una escuela de negocios, nos estamos perdiendo algunas opciones de palabras clave que podrían ayudar a Google a asociar la imagen. con ciertas secciones del artículo.

Buen texto alternativo

Con el texto alternativo incorrecto (arriba) en mente, un texto alternativo mejor para esta imagen podría ser:

alt="Business school professor pointing to a student's computer screen"

Para una página web sobre software educativo para profesores de escuelas de negocios

Texto alternativo incorrecto

alt="Teacher pointing to a student's computer screen"

La línea de texto alternativo anterior es casi tan descriptiva y específica como el buen texto alternativo del ejemplo anterior, entonces, ¿por qué no es suficiente para una página web sobre software educativo? Este ejemplo profundiza aún más en el tema de la escuela de negocios y especifica que la audiencia ideal para esta página web son los profesores. Por lo tanto, el texto alternativo de la imagen debe reflejar eso.

Buen texto alternativo

Con el texto alternativo incorrecto (arriba) en mente, un texto alternativo mejor para esta imagen podría ser:

alt="Professor using education software to instruct a business school student"

Prácticas recomendadas de texto alternativo de imagen

En última instancia, el texto alternativo de la imagen debe ser específico, pero también representativo del tema de la página web que respalda. ¿Entiendes la idea hasta ahora? Aquí hay algunas claves importantes para escribir texto alternativo de imagen efectivo:

• Describe la imagen y sé específico. Usa tanto el tema como el contexto de la imagen para guiarte.
• Agrega contexto que se relacione con el tema de la página. Si la imagen no presenta un lugar o una persona reconocibles, agregue contexto según el contenido de la página. Por ejemplo, el texto alternativo para una imagen de archivo de una persona que escribe en una computadora podría ser «Mujer optimizando el sitio web de WordPress para SEO» o «Mujer investigando plataformas de blogs gratuitas», según el tema de la página web.
• Mantenga su texto alternativo con menos de 125 caracteres. Las herramientas de lectura de pantalla generalmente dejan de leer texto alternativo en este punto, cortando el texto alternativo extenso en momentos incómodos al verbalizar esta descripción para las personas con discapacidad visual.
• No empieces el texto alternativo con «imagen de …» o «Imagen de …» Vaya directamente a la descripción de la imagen. Las herramientas de lectura de pantalla (y Google, para el caso) lo identificarán como una imagen del código fuente HTML del artículo.
• Utilice sus palabras clave, pero con moderación. Solo incluya la palabra clave de destino de su artículo si se incluye fácilmente en su texto alternativo. Si no, considere semántico palabras clave, o simplemente los términos más importantes dentro de una palabra clave de cola larga. Por ejemplo, si la palabra clave principal de su artículo es «cómo generar clientes potenciales», puede usar «generación de clientes potenciales» en su texto alternativo, ya que «cómo» puede ser difícil de incluir en el texto alternativo de la imagen de forma natural.
• No meta su palabra clave en el texto alternativo de cada imagen. Si la publicación de su blog contiene una serie de imágenes corporales, incluya su palabra clave en al menos una de esas imágenes. Identifica la imagen que crees que es más representativa de tu tema y asígnale tu palabra clave. Cíñete a descripciones más estéticas en los medios circundantes.
• Revise los errores ortográficos. Las palabras mal escritas en el texto alternativo de la imagen pueden dañar la experiencia del usuario o confundir a los motores de búsqueda que rastrean su sitio. Debe revisar el texto alternativo como lo haría con cualquier otro contenido de la página.
• No agregue texto alternativo a cada imagen. Debe agregar texto alternativo a la mayoría de las imágenes en una página web por motivos de SEO, UX y accesibilidad; sin embargo, hay excepciones. Las imágenes que son puramente decorativas o que se describen en un texto cercano, por ejemplo, deben tener un atributo alt vacío. Para obtener un desglose más detallado de cuándo agregar texto alternativo y cuándo no, consulte este árbol de decisiones.

Cómo el texto alternativo afecta el SEO

Según Google, el texto alternativo se utiliza, en combinación con algoritmos de visión por computadora y el contenido de la página, para comprender el tema de las imágenes.

Por lo tanto, el texto alternativo ayuda a Google a comprender mejor no solo de qué se tratan las imágenes, sino también de qué se trata la página web en su conjunto. Esto puede ayudar a aumentar las posibilidades de que sus imágenes aparezcan en los resultados de búsqueda de imágenes.

Al crear contenido sobre un tema, considere cómo su audiencia podría preferir encontrar respuestas a sus preguntas sobre ese tema. En muchos casos, los buscadores de Google no quieren el resultado de búsqueda azul clásico con hipervínculos; quieren la imagen en sí, incrustada dentro de su página web.

Por ejemplo, un visitante que busca cómo eliminar duplicados en Excel puede preferir una captura de pantalla para comprender cómo completar la tarea de un vistazo.

Fuente de imagen

Debido a que esta imagen tiene texto alternativo optimizado, aparece en los resultados de búsqueda de imágenes para la palabra clave de cola larga «cómo eliminar duplicados en Excel». Dado que la publicación también aparece en los resultados de búsqueda web para la misma palabra clave, los visitantes pueden acceder a la publicación del blog a través de estos dos canales diferentes.

¿Por qué es importante el texto alternativo de la imagen?

Ya hemos aludido a varias razones por las que el texto alternativo de la imagen es importante: a saber, la accesibilidad, la experiencia del usuario y el tráfico de imágenes. Comprender estas razones lo ayudará a escribir el mejor texto alternativo posible para sus imágenes. A continuación, analizaremos más de cerca las principales razones por las que el texto alternativo de la imagen es importante.

Accesibilidad

En 1999, el W3C publicó su Pautas de accesibilidad al contenido web 1.0 para explicar cómo hacer que los contenidos sean más accesibles para los usuarios con discapacidad. Una de estas pautas fue «Proporcionar alternativas equivalentes al contenido visual y auditivo». Eso significaba que cualquier página web que incluyera imágenes (o películas, sonidos, miniaplicaciones, etc.) debería incluir información equivalente a su contenido visual o auditivo.

Por ejemplo, supongamos que una página web contiene una imagen de una flecha hacia arriba que enlaza con una tabla de contenido. Un texto equivalente podría ser «Ir a la tabla de contenido». Esto permitiría a un usuario con un lector de pantalla u otra tecnología de asistencia comprender el propósito de la imagen sin verla.

En otras palabras, el texto alternativo ayuda a garantizar que su contenido visual sea accesible para todos los usuarios, incluidos aquellos con discapacidades visuales.

Experiencia de usuario

El texto alternativo no solo brinda una mejor experiencia de usuario a los usuarios con discapacidades, sino que también brinda una mejor UX a todos los usuarios. Digamos que un visitante tiene una conexión de ancho de banda bajo, por lo que las imágenes de su página web no se cargan. En lugar de solo ver un ícono de enlace roto, también verán el texto alternativo. Esto les permitirá captar lo que la imagen debe transmitir.

Por ejemplo, un usuario podría ver la imagen de la izquierda. Si no pueden, debido a una discapacidad, un problema de ancho de banda u otra razón, escucharán o verán el texto alternativo a la derecha. Esto ayudará a proporcionar una mejor experiencia de usuario que si no hubiera texto alternativo.

Fuente de imagen

Tráfico de imágenes

Una de las cosas más importantes que el texto alternativo de la imagen puede hacer por usted es convertir sus imágenes en resultados de búsqueda con hipervínculos que aparecen en Google Imágenes o como paquetes de imágenes. Los paquetes de imágenes son resultados especiales que se muestran como una fila horizontal de enlaces de imágenes que pueden aparecer en cualquier posición orgánica (incluido el lugar # 1 en un SERP, como se ve en el ejemplo de la introducción).

Las imágenes que aparecen en Google Imágenes o en paquetes de imágenes proporcionan otra forma de recibir visitantes orgánicos. Esto puede resultar en miles de visitantes más, al menos en el caso de HubSpot.

A partir de 2018, el equipo del blog de HubSpot implementó un nueva estrategia SEO que, en parte, se centró más intensamente en optimizar el texto alternativo de la imagen. Esto ayudó a aumentar el tráfico de imágenes del blog en un 779% en menos de un año, lo que resultó en 160.000 vistas orgánicas más. Puede leer más sobre el éxito del equipo en este entrada en el blog.

Agregar texto alternativo de imagen a su sitio web

Entonces, ¿por dónde empezar al desarrollar texto alternativo para sus publicaciones de blog y páginas web? Considere realizar una auditoría básica de su contenido existente para ver dónde puede incorporar texto alternativo en imágenes sin etiquetar previamente. Observe cómo cambia su tráfico orgánico entre las páginas a las que asigna nuevas etiquetas alt.

Cuantas más imágenes optimices, mejor avanzará tu estrategia de SEO.

Nota del editor: esta publicación se publicó originalmente en septiembre de 2018 y se ha actualizado para que sea más completa.