Cómo escribir etiquetas alt para la imagen perfecta en WordPress

La optimización de las etiquetas de imagen alternativa puede hacer más que la mejora de SEO de su sitio de WordPress … de hecho, y lo que es más importante, puede y hará que su contenido sea más accesible para cada usuario que visita su sitio. A menudo se dice que “una imagen vale más que mil palabras”. Pero, ¿cómo describe esas imágenes en sus etiquetas alternativas? ¿Necesitas mil palabras? ¿Tienes que usar otras etiquetas de imágenes? Cuando pensamos en “etiquetas alternativas” (¿piensas en ellas, ¿verdad?), Rara vez nos aventuramos más allá para imaginar los atributos alt como algo que se beneficia de nuestro sitio. Bueno … ¡hay mucho más de lo que ves el ojo en estos perros! El texto alternativo también juega un papel importante en la accesibilidad web, como veremos pronto.
En este tutorial, observamos cómo optimizar las etiquetas alternativas para el SEO y la accesibilidad y mostrarle cómo escribir etiquetas de imágenes perfectas en WordPress … ¡cada vez! Y si crees que un video vale más que mil imágenes, aquí hay una que resume este tutorial (cuida a los perros locos) … imagina … has configurado, configurado y optimizado un sitio de WordPress para tu propio uso . o para un cliente. Su sitio necesita contenido. Una buena estrategia de contenido es asegurarse de que todos los elementos de su página atraigan lectores humanos y motores de búsqueda.
Agregar las imágenes correctas al contenido puede ayudar a atraer a más lectores, alentarlos a permanecer más tiempo en su página y fortalecer su mensaje. También queremos asegurarnos de que estas imágenes lo ayuden a posicionarse arriba en los resultados de buscar imágenes y mejorar la accesibilidad de su sitio web. Aquí es donde intervienen otra imagen. Los altetetets le permiten optimizar las imágenes para el SEO y la accesibilidad web.

¿Cuáles son las etiquetas alternativas? Una “etiqueta alt” o un atributo ALT es un texto alternativo utilizado para describir una imagen o lo que la imagen representa si la imagen no se puede mostrar por alguna razón (como una conexión lenta o un error en el atributo SRC) o si los usuarios no pueden Verlo debido a las impedimentos visuales, navegando por la web con imágenes detenidas, etc.
El texto alternativo se muestra cuando las imágenes no aparecen en su sitio y ayudan a los usuarios con discapacidades visuales.

Esta información alternativa de texto es útil para las personas que usan lectores de pantalla cuando navegan en la web, ya que leerán el texto de la otra etiqueta y harán que su imagen sea accesible y para mejorar las imágenes de SEO, porque las otras etiquetas ayudan a los motores de búsqueda a descubrir los contexto de imágenes. En el contenido de la página y obtenga adecuadamente los resultados de búsqueda cuando los usuarios buscan imágenes en línea.
El texto alternativo mejora la indexación de sus imágenes por los motores de búsqueda.

Etiquetas de título alt vs Si bien ambos atributos usan texto alternativo para mejorar cómo se usan las imágenes en su contenido, otro atributo debe describir lo que representa la imagen para ayudar a los usuarios a comprender lo que hace la imagen en la página (es decir, su propósito), mientras que un atributo de título es Se utiliza para mostrar un consejo explicativo al pasar con el mouse a través de la imagen. Usilite la etiqueta de título para crear indicaciones para sus imágenes.
Así es como se ve la sintaxis completa de una etiqueta de imagen HTML:


Puede agregar texto alternativo tan pronto como cargue imágenes en WordPress a través de Media Library …
Agregue texto alternativo después de cargar las imágenes en la biblioteca de medios.
Y al editar imágenes (también puede agregar una etiqueta de título a su imagen durante el proceso de edición) …

Compruebe que los atributos ALT se completen al editar imágenes.
Cómo escribir las otras etiquetas de imagen perfectas en WordPress ahora que hemos cubierto los elementos básicos de las etiquetas alternativas, para ver los tipos de imágenes que normalmente agregaremos al contenido y las pautas para usar el texto alternativo con diferentes tipos de imágenes .

Para poner las cosas en contexto, crearemos un ejemplo de publicación en WordPress y aplicaremos las reglas de las “mejores prácticas” para usar etiquetas ALT con diferentes tipos de imágenes para tratar de obtener el mejor resultado para los resultados de búsqueda y accesibilidad. Así que aquí está nuestra publicación inicial, con algún texto y la primera publicación de publicación …
¡Optimizemos a este cachorro!
Antes de decidir qué hacer con la imagen de esta publicación, eche un vistazo a las mejores prácticas para optimizar las imágenes utilizando los atributos ALT. El uso de etiquetas ALT para las pautas básicas de SEO WordPress para el atributo de texto alternativo son las siguientes: el texto debe describir la imagen si la imagen contiene información.

El texto debe explicar dónde va el enlace si la imagen está dentro de un elemento .
Use alt = “” si la imagen es solo para decoración.
Las mejores prácticas de Google Practice dicen que al elegir texto alternativo para sus imágenes, debe centrarse en crear información útil y rica que use palabras clave correctamente en el contexto del contenido de su página, advierte contra participar en el arte oscuro de “carga de palabras clave” por Completar otras palabras clave, ya que esto da como resultado una experiencia de usuario negativa y puede hacer que su sitio se vea como spam.
De hecho, esto es lo que dijo el ex jefe del equipo web de SPAM de Google, Matt Cutts, sobre el uso de etiquetas alternativas para mejorar los resultados de búsqueda de su sitio … la imagen a continuación …
¿Quieres más tráfico a una foto con un pollo en una taza? Agregue etiquetas alt yo … ¡qué más, pollo!
(imagen: pixabay.com)
Incorrecto (falta texto alternativo):


Bad (relleno de palabras clave):

mejor:

Lo mejor:

Sin embargo, si la imagen es puramente decorativa, no se deben usar otras etiquetas.
Por lo tanto,

Si bien lo anterior parece bastante simple, cuando considera problemas de accesibilidad, las cosas pueden comenzar a volverse un poco más confundidas. Lo que nos lleva a los diferentes tipos de imágenes que podemos usar en nuestro contenido. Diferentes tipos de imágenes que puede usar en WordPress si se da cuenta de qué texto alternativo debe usar con qué tipo de imagen comienza loca, simplemente descargue la hoja de trucos pdf que creé a continuación y lo use como guía al optimizar sus imágenes …
Yo … Haga clic en Banner para descargar otro árbol de decisión de etiqueta PDF Cheatsheet … ¡es gratis!
WordPress le permite agregar todo tipo de imágenes a publicaciones, páginas y tipos de publicaciones personalizadas. De acuerdo con las pautas de accesibilidad del Consorcio World Wide Web, las imágenes caen en las siguientes categorías para fines de accesibilidad:
Imágenes informativas
Imágenes decorativas

Imágenes funcionales
Imágenes de texto
Imágenes complejas
Grupos de imágenes
Mapas de imágenes
Imágenes informativas Estas son imágenes utilizadas para representar conceptos e información gráficos, como imágenes, fotos e ilustraciones. Se pueden usar imágenes informativas para: etiquetar otra información (por ejemplo, una imagen, imagen o icono de un teléfono o correo electrónico para obtener datos de contacto)
Suplementar otra información (por ejemplo, explique algo contenido en la imagen)
Transmitir información exitosa (por ejemplo, proporciona instrucciones descritas en la imagen)
Transmite una impresión, una expresión o emoción (por ejemplo, una imagen de una familia feliz que acompaña al contenido o información sobre un producto familiar apropiado)
Formato de archivo de transmisión (por ejemplo, iconos de archivo PDF o ZIP)
El enfoque sugerido para el uso de etiquetas ALT con imágenes informativas es incluir al menos una breve descripción que transmite la información esencial presentada por la imagen, como se muestra a continuación.
Un ejemplo en blanco y negro de imagen informativa.

0123 456 7890
Imágenes decorativas Los ejemplos de imágenes decorativas incluyen imágenes que:
Se utilizan como parte del diseño de la página (por ejemplo, bordes, separadores de secciones, etc.)
Se utilizan como parte de un enlace de texto (por ejemplo, para atraer la atención del usuario a un enlace que se puede hacer clic o aumentar el área en la que se puede hacer clic).
Tiene una alternativa adyacente (es decir, el texto que se muestra junto a la imagen es suficiente para explicar por qué la imagen es).

Están acostumbrados a crear el ambiente o para mejorar la apariencia de la página (por ejemplo, “Candy Fandy”).
El consenso parece ser que cuando una imagen no tiene ningún propósito o cuando su único propósito es agregar decoración visual a la página en lugar de transmitir información importante que ayude a los lectores a comprender la página, entonces es mejor proporcionar una alternativa de Text null (es decir,

). ¡Un ejemplo perfecto de una imagen decorativa que no sirve a ningún propósito!
Una imagen con un atributo se omitirá otro objetivo por tecnologías de asistencia como los lectores de pantalla. Muchas guías de SEO para imágenes sugieren que si una imagen no sirve para ningún propósito y se incluye en su diseño para fines decorativos (por ejemplo, una imagen de fondo), entonces debe crear la imagen usando CSS, no HTML. Si realmente no puede cambiar estas imágenes, dales un atributo otro objetivo (alt = “”). Sin embargo, tenga en cuenta que una imagen puede interpretarse como informativa, decorativa o algo más, dependiendo del contexto en el que se use. La decisión está a discreción del autor y la razón para incluir la imagen en la página. Por ejemplo, tome la imagen del Dr. Sigmund Freud de nuestro ejemplo a continuación …
Debido a Freud, toda la tienda de WordPress tiene una identificación.
El Dr. Freud se menciona en contenido que alguien que “no subestimó el poder del amor temprano”. Mientras que la mirada oscura del Dr. Freud en la sala le da al artículo un aire de credibilidad y autoridad, ¿es su fotografía informativa o puramente decorativa? ¿Cómo optimizé conscientemente (o subconsablemente) esta imagen dada la accesibilidad? Dejamos que los lectores adivinen cuál es la razón de Freud en nuestra publicación. ¿Dejamos escapar las cosas? Si decidimos que la imagen es decorativa, las instrucciones sugieren que dejemos la etiqueta otra vacía. Los lectores de la pantalla omitirían la imagen, y los lectores con discapacidades visuales pueden no estar informados sobre la contribución significativa de Sigmund:

>
Si decidimos que la imagen es informativa, entonces debemos decir algo en las etiquetas alternativas para explicar la imagen.
Informativo:


Alternativamente, podríamos decidir que la imagen es decorativa, pero haremos el reconocimiento del Dr. Freud por la validez de la “durabilidad proverbial del primer amor” para ser obvio para todos los usuarios, incluso para los lectores con impedimentos visuales, combinando El texto en los atributos de la imagen., como la otra etiqueta IMG y el campo IMG de subtítulos.
Agregar etiquetas alternativas a las imágenes es un trabajo duro. Pero un día, retrospectiva, los años de lucha parecerán los más hermosos.

Imágenes funcionales Las imágenes funcionales no transmiten información … se utilizan para iniciar acciones. Los ejemplos de imágenes funcionales incluyen botones a los que se puede hacer clic, enlaces y otros elementos interactivos, como un icono de impresora para representar la función de impresión o un botón para enviar un formulario. La alternativa del texto para imágenes funcionales, entonces, debe transmitir la acción deseada que desea obtener del lector (es decir, el propósito de la imagen), en lugar de proporcionar solo una descripción de la imagen. Por ejemplo, para la imagen del botón que se muestra a continuación, la alternativa de texto debe ser algo así como “Haga clic en el botón para encontrar el amor” en lugar de “Imagen del botón Clickable”. Una imagen de una imagen funcional que representa un botón que puede hacer clic ¡En personas disfuncionales que aún no han hecho clic con nadie!
Debido a que las imágenes funcionales son esenciales para la funcionalidad de contenido, otros valores faltantes o vacíos crean problemas para los usuarios de lectores de pantalla. Las tecnologías de asistencia, como los lectores de pantalla, normalmente anuncian el nombre del archivo de imagen, URL de imagen o URL para el destino del enlace, por lo que si falta la otra etiqueta, los usuarios tendrán dificultades para comprender la acción que se iniciará por imagen.
Las imágenes de imágenes de texto a menudo pueden mostrar texto que está destinado a ser leído. En este caso, la otra etiqueta debe incluir las palabras utilizadas en la imagen.
Esta imagen contiene texto blanco destinado a ser leído.

0123 456 7890
Las reglas de accesibilidad sugieren la inclusión de texto que puede ser Lea en imágenes a menos que la imagen sea un logotipo. En su lugar, puede atacar el texto con CSS3 y usar fuentes construidas en lugar de describir el texto como una imagen. Si necesita describir expresiones numéricas usando imágenes debido a la dificultad de presentar ecuaciones y símbolos matemáticos especiales, asegúrese de que la otra etiqueta proporcione suficiente información para que los lectores puedan hacer el cálculo. Por ejemplo, la captura de pantalla a continuación muestra una imagen con números decimales recurrentes … espera … ¿El último dígito está destinado a ser seis o nueve?
Así es como podría escribir el texto alternativo para esta imagen: <img src = "0DOT666666666666666666666666666666666666666666666666666666666666 / un complejes. puede requerir descripciones de texto largas y detalladas.

Las imágenes complejas eran simples antes de que SEO y la accesibilidad web se colocaron en el mapa.
Las guías de accesibilidad proporcionan diversos enfoques para proporcionar información de descripción larga en imágenes complejas, como navegadores web y motores de búsqueda (por ejemplo, utilizando elementos HTML5 como y