¿Te preguntas qué son las imágenes decorativas y cómo afectan al SEO?
Las imágenes decorativas deben tratarse de forma diferente a otros tipos de imágenes.
La buena noticia es que es muy fácil manejar correctamente las imágenes decorativas.
En este artículo
- ¿Qué son las imágenes decorativas?
- Imágenes informativas vs. decorativas: ¿Cuál es la diferencia?
- ¿Qué es el texto alternativo (texto alternativo)?
- Texto alternativo para imágenes decorativas
- Texto alternativo para imágenes informativas
- More SEO tips: Image File Names and Sizes
- Web Page SEO: Get More Visitors
- How is Alt Text Written in HTML?
¿Qué son las imágenes decorativas?
Una imagen decorativa es una imagen que no proporciona ninguna información relevante.
Por ejemplo, una foto de stock de libros apilados es una imagen decorativa que se encuentra comúnmente en sitios web de educación.
Si bien las imágenes decorativas rara vez añaden valor informativo, pueden mejorar el estilo de un sitio web y contribuir al disfrute de una página por parte del usuario.
Por ejemplo, las revistas y publicaciones literarias pueden usar imágenes de stock o ilustraciones personalizadas para añadir un toque visual a las páginas.
Aquí, la imagen decorativa puede ser atractiva y hablar principalmente a la imaginación.
La página "Acerca de nosotros" de la revista Nautilus es un buen ejemplo. Promete "un viaje a las maravillas del universo", y una ilustración de ensueño atrae al lector.
Imágenes informativas vs. decorativas: ¿Cuál es la diferencia?
La diferencia clave entre las imágenes decorativas e informativas es que estas últimas proporcionan información relacionada con el tema de una página.
Los ejemplos de imágenes informativas incluyen:
- Fotos de eventos noticiosos, como una protesta o una escena del crimen.
- Diagramas y gráficos que amplifican los puntos expuestos en un artículo.
- Imágenes de un lugar, persona o cosa discutida en el artículo.
Las imágenes informativas también se denominan imágenes funcionales.
Las imágenes informativas ayudan a los usuarios a verificar la exactitud del texto y, en algunos casos, a profundizar en detalles.
Pero como vimos con el ejemplo de Nautilus, parece incorrecto afirmar que las imágenes decorativas no transmiten ninguna información, ya que pueden evocar visualmente un estado de ánimo y establecer expectativas.
Sin embargo, podemos decir que las imágenes decorativas no proporcionan ninguna información que no esté ya presente en el texto.
Estos dos tipos de imágenes también se manejan de manera diferente en SEO.
Para entender cómo y por qué, volvamos al significado del texto alternativo.
¿Qué es el texto alternativo (texto alternativo)?
El texto alternativo es texto que describe una imagen.
Hay 2 propósitos para el texto alternativo:
- Los motores de búsqueda leen e indexan el texto alternativo y les ayuda a comprender el contenido de la imagen.
- El texto alternativo es leído en voz alta por lectores de pantalla, dispositivos utilizados por personas con discapacidades.
El texto alternativo también se llama etiqueta alt. Esta es una referencia al HTML que los sistemas de gestión de contenido como WordPress añaden automáticamente a las imágenes.
Texto alternativo para imágenes decorativas
Manejar el texto alternativo para imágenes decorativas es fácil: dejarlo en blanco se considera la mejor práctica.
Así es como se hace para asegurarse de que el campo esté en blanco:
- Inicia sesión en WordPress
- Navega a cualquier página web en la que tengas una imagen.
- Luego haz clic en la imagen para abrir la configuración de imagen de WordPress en la barra lateral derecha.
Ahí es donde verás el campo de Texto Alternativo.
Dejarlo en blanco simplemente significa que no tienes que añadir ningún texto alternativo.
Al dejarlo en blanco, los lectores de pantalla se saltarán la imagen decorativa. Eso proporciona una mejor experiencia de usuario para las personas con discapacidad visual, ya que describir esta imagen no aportaría ningún valor.
Imagina un lector de pantalla leyendo en voz alta,
- “gente señalando sitios web”
- “imagen verde decorativa”, o,
- “ilustración para artículo de sitio web”
Aburrido, ¿eh?
Ahora veamos cómo el manejo del texto alternativo para imágenes informativas es diferente
Los lectores de pantalla son una de las muchas tecnologías de asistencia utilizadas por personas con discapacidades.
Texto alternativo para imágenes informativas
Como ejemplo, vamos a usar un artículo sobre un modelo de estrategia digital creado por Avinash Kaushik.
Kaushik es un visionario del marketing muy conocido. Dado que el artículo se centra en su trabajo, añadimos una foto suya.
Y este es el texto alternativo que añadimos: “avinash kaushik hablando en una conferencia”.
La foto de Kaushik no proporciona mucha información, así que podrías preguntarte: “¿Por qué no tratarla como una imagen decorativa?” Podríamos. Pero Kaushik es central para el artículo. Y queremos que los motores de búsqueda indexen este texto alternativo.
De esa manera, los usuarios que busquen “Avinash Kaushik” pueden encontrar esta foto y hacer clic en el artículo.
Ahora veamos 2 problemas de imágenes que pueden afectar al SEO.
Más consejos de SEO: Nombres y Tamaños de Archivos de Imagen
Asegurarse de que el nombre y tamaño de tu archivo de imagen estén optimizados puede mejorar tu SEO.
Veamos primero los nombres de archivo.
Nombres de Archivos de Imagen vs. Tipos de Archivo
Antes de empezar, es útil saber que un nombre de archivo de imagen es diferente del tipo de archivo de imagen. El tipo de archivo se expresa como una “extensión” – un pequeño fragmento de texto que aparece automáticamente al final del nombre de un archivo de imagen.
Por ejemplo, Nombre-foto.jpg
Esto nos dice que el nombre del archivo es “Nombre-foto” y está en formato de archivo jpg.
Si esta imagen estuviera en formato png, se vería así: Nombre-foto.png.
La extensión es una pequeñísima información que indica en qué formato está el archivo.
Existen muchos tipos de formatos de imagen digital, como .webp y .svg. No es necesario entenderlos todos porque esta extensión se añadirá automáticamente.
Cómo optimizar los nombres de archivo de imagen
Dado que los motores de búsqueda también leen los nombres de archivo de imagen, asegúrate de que los tuyos sean claros y descriptivos.
Los archivos de imagen con nombres poco claros son vagos, como estos:
- 1100073658.jpg
- Hombre-ejercitandose.jpg
Los buenos títulos de imagen deben ser específicos y describir la imagen.
Por ejemplo, digamos que estás escribiendo un artículo sobre cómo los reclutas desarrollan su forma física antes de ser enviados al campamento de entrenamiento del Cuerpo de Marines de EE. UU.
Tu imagen muestra a un recluta real practicando ejercicios de plancha. En lugar de hombre-ejercitandose.jpg, podrías titular tu imagen recluta-marine-haciendo-plancha.jpg.
Los nombres de archivo para imágenes decorativas a menudo son menos específicos porque se utilizan para evocar un estado de ánimo o una sensación de marca. Por ejemplo, la imagen decorativa del Nautilus de arriba se llama vehiculo-maravilla.jpg.
Si estás compartiendo una obra de arte, el título de la obra es un nombre de archivo de imagen adecuado.
Más información en nuestro artículo sobre SEO de nombres de archivo de imagen.
Precaución: Publicar imágenes para las que no tienes licencia puede resultar en multas cuantiosas. En EE. UU. estas multas pueden ascender hasta $150k por uso de imagen.
Tamaño de archivo de imagen
Dado que los tamaños de archivo grandes pueden hacer que tu página cargue lentamente, considera usar un plugin de WordPress que optimice automáticamente tus imágenes para la velocidad.
Plugins como WP Rocket son fáciles de instalar y usar.
Consejo profesional: El tamaño de tu archivo de imagen y el tamaño de visualización de la imagen son 2 cosas diferentes. Es posible reducir el tamaño de la imagen y que siga mostrándose como una imagen de alta resolución, lista para Retina.
SEO de páginas web: Consigue más visitantes
Las imágenes informativas y decorativas pueden ayudarte a atraer a los visitantes del sitio. Y el texto alternativo para imágenes informativas puede atraer tráfico de los motores de búsqueda.
Pero hay más en el SEO que solo el texto alternativo de las imágenes.
Aquí es donde entra un plugin como All in One SEO (AIOSEO).
Diseñado para ser fácil de usar para principiantes, proporciona casi todo lo que necesitas para SEO (aparte del contenido).
Este es un plugin consolidado con miles de reseñas de 5 estrellas en WordPress.org. Más de 3 millones de usuarios lo han descargado.
Así es como funciona.
Clasifica más alto: Todos quieren que su contenido clasifique más alto, pero aprender SEO lleva tiempo. Aquí es donde AIOSEO es clave. Analiza tu contenido y te dice exactamente qué hacer para optimizarlo para SEO.
A medida que actúas según la recomendación, tu puntuación TruSEO aumenta.
Luce genial en los resultados de búsqueda: El plugin facilita que tus páginas web sean elegibles para mostrarse como fragmentos enriquecidos. Puedes pensar en los fragmentos enriquecidos como pantallas de motor de búsqueda súper de lujo.
Así es como se ve un fragmento de búsqueda estándar:
Y aquí tienes un fragmento enriquecido.
No se necesita código: All in One SEO se encarga automáticamente de varias funciones técnicas. Por ejemplo, generará automáticamente sitemaps XML y RSS. Estos sitemaps notifican a los motores de búsqueda para informarles sobre tus cambios o contenido nuevo.
No olvides planificar las conversiones
Mientras te esfuerzas por conseguir más tráfico, asegúrate de determinar qué acciones quieres que realicen los visitantes de la web.
Usamos OptinMonster para crear pop-ups de intención de salida. Estos pop-ups aparecen cuando la gente está a punto de salir de tu sitio web.
OptinMonster es económico y eficaz.
¿Cómo se escribe el texto alternativo en HTML?
Aquellos de vosotros que tengáis curiosidad sobre la representación HTML del texto alternativo encontraréis útil lo siguiente.
La sintaxis del texto alternativo es la siguiente:
<img alt="your alt text goes here">Ten en cuenta que alt es una propiedad del elemento de imagen HTML y lo que se coloca entre las comillas es el valor de la propiedad.
<img alt="baseball player sliding into homebase">Las etiquetas Img también contendrán la fuente (src) (URL) de la imagen, por ejemplo:
<img src="/baseball-player-scoring.png/" alt="baseball player sliding into homebase">Cuando el campo de texto alternativo está en blanco, se llama texto alternativo nulo y se ve así en HTML.
<img src="/baseball-player-scoring.png/" alt="">Esto también se llama un atributo alt vacío.
Consejo: Descubre cómo ver el código de cualquier página web.
Preguntas y respuestas sobre imágenes
¿Tienes más preguntas sobre cómo algunas imágenes sirven para fines decorativos, el texto alternativo o la accesibilidad? Hemos respondido a algunas preguntas comunes a continuación.
Si tienes alguna pregunta adicional, por favor, deja una nota en la sección de comentarios.
¿Se consideran decorativas las imágenes de fondo?
Sí, las imágenes de fondo, tal como se definen por la propiedad background-image en CSS, se consideran decorativas. En estos casos, el código CSS del sitio web normalmente designará una clase cuyo atributo alt siempre se deja en blanco.
¿Qué es la accesibilidad web?
La accesibilidad web es un conjunto de prácticas y estándares tecnológicos diseñados para facilitar que las personas con discapacidades naveguen y consuman contenido en un sitio web. Las Pautas de Contenido de Accesibilidad Web (WCAG) describen las mejores prácticas para los desarrolladores web, pero los principiantes pueden querer empezar con los fundamentos.
Si bien hacer que un sitio sea accesible no impacta directamente en el SEO, la accesibilidad concuerda con un buen SEO. Es por eso que un sitio optimizado para la accesibilidad puede clasificarse más alto en los resultados de búsqueda.
¿Cuáles son las pautas de accesibilidad web?
El documento de pautas de accesibilidad web estableció directrices para facilitar el acceso a los sitios web a las personas con discapacidades. Desarrolladas por la Iniciativa de Accesibilidad Web (WAI), las Pautas de Contenido de Accesibilidad Web (WCAG) están en continua mejora.
Las pautas se adhieren a 4 principios, definidos como Perceptibles, Operables, Comprensibles y Robustos.
La Iniciativa de Accesibilidad Web forma parte del Consorcio Mundial de la Web (W3).
Después de las imágenes decorativas . . .
Esperamos que esta publicación te haya ayudado a comprender qué son las imágenes decorativas y por qué es una buena práctica dejar el texto alternativo en blanco.
A continuación, obtén más información sobre el SEO de imágenes y cómo las imágenes pueden ser útiles para crear contenido escaneable.
Si encontraste útil este artículo, suscríbete a nuestro Canal de YouTube. Encontrarás muchos más tutoriales útiles allí. También puedes seguirnos en X (Twitter), LinkedIn o Facebook para estar al tanto.
¿Quieres probar AIOSEO gratis?
Introduce la URL de tu sitio web de WordPress para instalar AIOSEO Lite.
Descargo de responsabilidad: Nuestro contenido es compatible con los lectores. Esto significa que si haces clic en algunos de nuestros enlaces, podemos ganar una comisión. Solo recomendamos productos que creemos que añadirán valor a nuestros lectores.
