Agencia de Marketing Digital en Bucaramanga

Qué es y por qué es importante para la accesibilidad y el SEO

Qué es y por qué es importante para la accesibilidad y el SEO
Puedes compartir nuestro contenido en redes sociales

[ad_1]

¿Qué es el texto alternativo?

El texto alternativo (alt text) es una descripción escrita de una imagen en línea que proporciona una alternativa cuando la imagen es inaccesible para el usuario.

El texto alternativo brinda a los lectores de pantalla algo para leer en voz alta a los usuarios con discapacidades visuales, ayuda a los robots de los motores de búsqueda a comprender el contenido de las imágenes y puede aparecer en una página web cuando la imagen no se carga.

(Esto contrasta con un captura de imagen. Que siempre aparece en la página.)

el texto alternativo "Coolife Spinner equipaje de mano, el mejor equipaje de mano" aparece junto a un ícono de imagen rota en una publicación de blog.

El texto alternativo generalmente se agrega a través de la atributo alternativo en el código HTML de una imagen.

Al igual que:

alt=“El texto alternativo va aquí”>

Es por eso que a veces se le conoce como el “atributo alt” o “etiqueta alt”.

La mayoría de los sistemas de administración de contenido (CMS) tienen un campo dedicado para el texto alternativo. Por lo tanto, no necesita editar el HTML directamente.

Aquí hay un ejemplo de WordPress:

El "Texto alternativo (texto alternativo)" cuadro de diálogo en el CMS de WordPress.

También puede usar texto alternativo de imagen en plataformas de redes sociales como Twitter.

Aquí hay un ejemplo de Dogs Trust:

Un tweet de imagen de @DogsTrust.  El "alternativa" se ha hecho clic en la etiqueta de la imagen, revelando una "descripción de la imagen" caja de diálogo.

¿Por qué es importante el texto alternativo?

El texto alternativo es importante porque hace que las imágenes sean más accesibles para las personas y los motores de búsqueda. Incluso cuando no se pueden mostrar.

Si no proporciona el texto alternativo apropiado, las personas que usan lectores de pantalla no pueden obtener información de las imágenes. Esto excluye injustamente a los usuarios con discapacidad visual. que puede dañar su reputación de la marcatráfico y tasa de conversión.

Más, la accesibilidad web es buena para el SEO.

Google y otros motores de búsqueda usan texto alternativo para determinar qué imágenes representan (o vinculan). Esto puede mejorar su comprensión de su contenido y, por lo tanto, conducir a clasificaciones más altas.

El texto alternativo es particularmente útil para SEO de imágenes—es decir, una clasificación alta en Google Images y otros resultados de imágenes.

Este tipo de exposición puede atraer tráfico valioso a su sitio.

Por ejemplo, la página de resultados del motor de búsqueda (SERP) para “cachorros corgi” está dominada por imágenes. Que enlazan con los sitios de los propietarios.

Resultados de búsqueda de Google para "cachorros corgi" Hay varias fotos de cachorros corgi en la parte superior.

Muchas de estas imágenes usan la palabra clave “cachorro de corgi” o “cachorros de corgi” en su texto alternativo.

Una foto de un corgi en una página web, junto con su código HTML.  Puedes ver el "Bebé el cachorro Corgi" texto alternativo en el código.

Porque el texto alternativo es importante en optimización en la páginaa veces se denomina “texto alternativo de SEO”.

Cómo escribir texto alternativo (mejores prácticas)

Aprenda a escribir texto alternativo que mejore la accesibilidad y el SEO de su sitio.

Hemos reunido tres mejores prácticas de texto alternativo para ayudarlo a escribir un texto alternativo perfecto:

1. Agregue texto alternativo a los tipos correctos de imágenes

no escribas texto alternativo para imágenes puramente decorativas (como la de abajo). Estas descripciones pueden distraer y confundir a los usuarios con discapacidades visuales, en lugar de agregar un contexto útil.

A "Características de Semrush" el encabezado va acompañado de una ilustración decorativa de una mujer junto a un gráfico circular, una página web, etc.

En su lugar, proporcione un atributo alt nulo (vacío). Al igual que:

” data-lazy-src=

Hacer escribir texto alternativo para todas las demás imágenes: imágenes que proporcionan significado adicional al lector

Por ejemplo:

  • Imágenes de texto útil (p. ej., capturas de pantalla de publicaciones en redes sociales)
  • Iconos que denotan funcionalidad (p. ej., iconos del carrito de la compra)
  • Fotos que brindan información adicional (p. ej., una comparación del tamaño de un teléfono inteligente)
  • Gráficos que ilustran datos que de otro modo no se mencionarían
  • Gráficos que demuestran procesos (p. ej., cómo sostener los palillos)

Consejo: Si redactas contenido en Semrush’s Asistente de redacción SEO, la herramienta le recordará que agregue texto alternativo a la imagen. También proporciona legibilidad, SEO, originalidad y sugerencias de tono de voz.

El "Agregue atributos alt a sus imágenes." sugerencia en el Asistente de Redacción SEO de Semrush.

2. Sea descriptivo pero conciso

El texto alternativo debe ser “la descripción más concisa posible del propósito de la imagen”, según el Iniciativa de Accesibilidad Web (WAI).

Lo importante de una imagen depende del contexto. Por lo tanto, tenga en cuenta el contenido circundante y la audiencia al escribir texto alternativo.

Considere la foto de abajo. El texto alternativo “Mujer haciendo yoga” sería apropiado en muchos contextos.

Pero en una guía de ejercicios, podría ser necesaria una descripción detallada de la postura de la mujer.

Mujer haciendo yoga.

Cuando escriba texto alternativo, piense en cómo describiría una imagen a alguien en una conversación telefónica.

No incluya los siguientes detalles en su texto alternativo:

  • Créditos de las fotos e información de derechos de autor: inclúyalos en el título de la imagen
  • Frases redundantes como “imagen de” o “foto de” (a menos que el formato sea particularmente relevante)
  • Información que todos sus lectores necesitan: agregue esto al título o al contenido del cuerpo en su lugar
  • Información que ya se proporcionó a través del título de la imagen o el contenido del cuerpo.

Consejo: Algunas personas recomiendan apegarse a un máximo de 125 caracteres al escribir texto alternativo para imágenes. Eso se debe a que muchas tecnologías de asistencia dejan de leer el texto alternativo a los 125 caracteres. Pero no es un límite estricto. Si necesita escribir mucho más, consulte los consejos de la WAI sobre Imágenes complejas.

3. Incluye una palabra clave

Agregar palabras clave relevantes al texto alternativo puede ayudar a que sus imágenes se clasifiquen en los resultados de imágenes de Google.

Por ejemplo, este texto alternativo le dice a Google que nuestro guía de embudo de marketing contiene una útil ilustración de embudo de marketing:

Una ilustración del embudo de marketing junto con su código HTML.  Puede leer el texto alternativo en el código.

Lo que significa que sería un resultado de imagen de Google relevante para consultas relacionadas con embudos de marketing.

Para comprender qué palabras clave incluir en el texto alternativo, deberá realizar una investigación de palabras clave.

Intente realizar una investigación de palabras clave con Semrush’s Herramienta mágica de palabras clave.

Simplemente ingrese una palabra clave relacionada con su imagen y luego haga clic en “Buscar.”

una búsqueda de "cachorro corgi" en los EE. UU. en Keyword Magic Tool de Semrush.  Hay una flecha hacia el "Buscar" botón.

Ir a “Filtros avanzados” entonces “Características SERP.”

Entonces revisa “Imagen” y “paquete de imagen” antes de hacer clic en “Aplicar.”

El "Filtros avanzados" > "Características SERP" menú desplegable en Keyword Magic Tool.  El "Imagen" y "paquete de imagen" las casillas de verificación están marcadas.” data-original=”https://static.Diseñowebcool/blog/uploads/media/23/d5/23d5fe88406f0ab0547fc9e68f845eb0/original.png” height=”637″ loading=”lazy” width=”1010″ class=”lazyload ” src=”https://static.Diseñowebcool/blog/uploads/media/23/d5/23d5fe88406f0ab0547fc9e68f845eb0/image.png”/></picture></figure>
<p>La herramienta mostrará palabras clave que contengan su palabra clave inicial (o una variación) <strong>y</strong> generar resultados de imagen. </p>
<p>Estas palabras y frases son excelentes candidatas para el texto alternativo de SEO de su imagen.  Siempre que la imagen satisfaga las necesidades de los buscadores.</p>
<figure class=resultados para "cachorro corgi" en Keyword Magic Tool.  Los resultados incluyen "cachorros corgi" y "cachorros corgi cerca de mí."

Ejemplos de texto alternativo

Veamos tres ejemplos de texto alternativo que siguen las mejores prácticas.

Ejemplo 1: NASA

Esta publicación de blog trata sobre una foto tomada por el telescopio espacial Hubble. La NASA proporciona texto alternativo muy descriptivo para garantizar que los usuarios con discapacidades visuales puedan entender lo que hay en la foto.

Una publicación de blog de la NASA titulada "Hubble detecta una galaxia con zarcillos" con una foto de la galaxia.

Texto alternativo: Galaxia espiral con núcleo brillante, brazos espirales y un ligero resplandor que la rodea. Debajo, hebras hechas de parches de color azul brillante descienden como tentáculos. La galaxia acaba de ser tocada por una segunda galaxia tenue a la izquierda.

Ejemplo 2: Oficina de Accesibilidad a Internet

La página de inicio de la Oficina de Accesibilidad de Internet presenta logotipos de las marcas con las que ha trabajado.

un subtítulo "Estas son algunas de las estrellas con las que hemos trabajado a lo largo de los años:" encima de logotipos de varias marcas, como Chipotle y Godiva.

Cuando los usuarios no tienen acceso a estas imágenes, las etiquetas alt proporcionan un sustituto.

Iconos de imágenes rotas junto con varias marcas, como Chipotle y Godiva.  Aparecen debajo de un subtítulo que dice "Aquí hay algunas estrellas con las que hemos trabajado a lo largo de los años:."

Ejemplo 3: El Guardián

En esta revisión del producto, The Guardian usa atributos alt. y leyendas de imágenes para dar a los lectores y motores de búsqueda la información que necesitan.

Una sección de un artículo sobre el Pixel 7 Pro.  El texto alternativo aparece en lugar de la imagen y debajo aparece un título.
  • Texto alternativo: La parte posterior del Pixel 7 Pro que muestra la barra de aluminio de la cámara.
  • Captura de imagen: El diseño de la barra de la cámara todavía divide la opinión, pero no hay duda de que se destaca entre la multitud. Fotografía: Samuel Gibbs/The Guardian

Tenga en cuenta que el texto alternativo actúa como un reemplazo para la imagen Mientras que el título proporciona extra información, como el crédito de la foto.

Cómo encontrar y corregir el texto alternativo faltante

Para verificar si falta texto alternativo para las imágenes en su sitio, use Semrush’s Auditoría del sitio herramienta.

Ingrese su dominio y haga clic en “Iniciar auditoría.”

una búsqueda de "www.tusitio.com" en la herramienta Auditoría del sitio de Semrush.  Hay una flecha hacia el "Iniciar auditoría" botón.

Luego siga las indicaciones para configurar la herramienta.

Una vez que la auditoría esté lista, haga clic en el botón “Asuntos” pestaña.

Una auditoría del sitio en Semrush.  Hay una flecha hacia el "Asuntos" pestaña.

Verá una lista de errores, advertencias y avisos.

Busque “atributos alternativos”. Luego vea si tiene la advertencia “# imágenes no tienen atributos alt”.

Si lo hace, haga clic en el “# imágenes” enlace para ver las URL afectadas.

una búsqueda de "atributo alternativo" dentro de la auditoría del sitio de Semrush.  Hay una flecha a un "3.605 imágenes no tienen atributos alt" advertencia.

Haga clic en el icono “abrir enlace” al lado de cada título de página para ver cualquier página o imagen.

El "URL de la página" columna en la herramienta Auditoría del sitio de Semrush.  El "enlace abierto" los iconos están resaltados.

¿Encontraste una imagen que no necesita texto alternativo? Haga clic en el icono del ojo para ocultar la advertencia.

El informe de problemas en la herramienta Auditoría del sitio de Semrush.  Se resalta una columna en el lado derecho, que presenta botones con símbolos de ojos.

O utilice los filtros, las casillas de verificación y “Ocultar seleccionadoBotón ” para eliminar las advertencias de forma masiva.

El informe de problemas en la herramienta de auditoría del sitio de Semrush.  El "Filtros avanzados" y "Esconder" los botones están resaltados.  Al igual que las casillas de verificación junto a cada resultado.

¿Listo para trabajar en tu texto alternativo? Use las casillas de verificación y “Enviar a…botón ” para crear tareas en el Semrush CRM, Trelloo Zapier. (Es posible que primero deba configurar la integración correspondiente).

El "Enviar a..." en la herramienta Auditoría del sitio de Semrush.  las opciones son "CRM," "Trello," y "Zapier."

Luego agregue el texto alternativo que falta a través de su CMS.

Asegúrese de volver a ejecutar su Auditoría del sitio después. Simplemente haga clic en el botón de engranaje y presione “Repetir campaña.” Y observe cómo desaparecen las advertencias de texto alternativo de su imagen.

El icono de engranaje en la herramienta Auditoría del sitio de Semrush abre un menú con un "Repetir campaña" opción.



[ad_2]

Deja una respuesta