¿Se pregunta 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 frente a decorativas: ¿Cuál es la diferencia?
- ¿Qué es el texto alternativo?
- Texto alternativo para imágenes decorativas
- Texto alternativo para imágenes informativas
- Más consejos SEO: Nombres y tamaños de los archivos de imagen
- Página Web SEO: Consiga más visitantes
- ¿Cómo se escribe el texto alternativo en HTML?
¿Qué son las imágenes decorativas?
Una imagen decorativa es una imagen que no aporta ninguna información relevante.
Por ejemplo, una foto de archivo de libros apilados es una imagen decorativa que suele encontrarse en sitios web sobre educación.
Aunque las imágenes decorativas rara vez añaden valor informativo, pueden realzar el estilo de un sitio web y contribuir a que el usuario disfrute de una página.
Por ejemplo, las revistas literarias pueden utilizar imágenes de archivo o ilustraciones personalizadas para dar un toque visual a las páginas.
Aquí, la imagen decorativa puede ser seductora y hablar sobre todo a la imaginación.
La página Quiénes somos de la revista Nautilus es un buen ejemplo. Promete "un viaje a las maravillas del universo", y una ilustración onírica atrae al lector.
Imágenes informativas frente a decorativas: ¿Cuál es la diferencia?
La diferencia clave entre las imágenes decorativas y las informativas es que estas últimas proporcionan información relacionada con el tema de una página.
Ejemplos de imágenes informativas
- Fotos de acontecimientos noticiosos, como una protesta o la escena de un crimen.
- Diagramas y gráficos que amplían los puntos tratados en un artículo.
- Imágenes de un lugar, persona o cosa de los que se habla 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 los detalles.
Pero como vimos con el ejemplo del Nautilus, parece incorrecto afirmar que las imágenes decorativas no transmiten ninguna información, ya que pueden evocar visualmente un estado de ánimo y crear expectativas.
Sin embargo, podemos decir que las imágenes decorativas no aportan ninguna información que no esté ya presente en el texto.
Estos dos tipos de imágenes también se tratan de forma diferente en SEO.
Para entender cómo y por qué, revisemos el significado del texto alternativo.
¿Qué es el texto alternativo?
El texto alternativo es un texto que describe una imagen.
El texto alternativo tiene dos finalidades:
- Los motores de búsqueda leen e indexan el texto alternativo y les ayuda a comprender el contenido de la imagen.
- El texto Alt es leído en voz alta por los lectores de pantalla, dispositivos utilizados por personas con deficiencias.
El texto alternativo también se denomina etiqueta alt. Es una referencia al HTML que los sistemas de gestión de contenidos como WordPress añaden automáticamente a las imágenes.
Texto alternativo para imágenes decorativas
Manejar el texto alternativo de las imágenes decorativas es fácil: dejarlo en blanco se considera la mejor práctica.
A continuación le indicamos cómo hacerlo para asegurarse de que el campo está en blanco:
- Iniciar sesión en WordPress
- Navega a cualquier página web en la que tengas una imagen.
- A continuación, haga clic en la imagen para abrir la configuración de imágenes de WordPress en la barra lateral derecha.
Ahí es donde verás el campo Texto Alt.
Si lo dejas en blanco, no tendrás que añadir ningún texto alternativo.
Al dejarla en blanco, los lectores de pantalla pasarán por altola imagen decorativa. Así se mejora la experiencia de usuario de los discapacitados visuales, ya que la descripción de esta imagen no aportaría ningún valor.
Imagina un lector de pantalla leyendo en voz alta,
- "gente señalando páginas web"
- "imagen verde decorativa", o,
- "ilustración para artículo web"
Aburrido, ¿eh?
Veamos ahora en qué se diferencia el tratamiento del texto alternativo de las imágenes informativas
Los lectores de pantalla son una de las muchas tecnologías de apoyo que utilizan las personas con discapacidad.
Texto alternativo para imágenes informativas
Como ejemplo vamos a utilizar un artículo sobre un modelo de estrategia digital creado por Avinash Kaushik.
Kaushik es un conocido visionario del marketing. Como el artículo se centra en su trabajo, hemos añadido una foto suya.
Y este es el texto alt que añadimos: "avinash kaushik hablando en una conferencia".
La foto de Kaushik no aporta mucha información, así que te preguntarás: "¿Por qué no tratarla como una imagen decorativa?". Podríamos hacerlo. Pero Kaushik es fundamental para el artículo. Y queremos que los motores de búsqueda indexen este texto alternativo.
De este modo, los usuarios que busquen "Avinash Kaushik" pueden encontrar esta foto y hacer clic en el artículo.
Veamos ahora 2 problemas de imagen que pueden afectar al SEO.
Más consejos SEO: Nombres y tamaños de los archivos de imagen
Asegurarse de que el nombre y el tamaño del archivo de imagen están optimizados puede mejorar su SEO.
Veamos primero los nombres de los archivos.
Nombres de archivos de imagen frente a tipos de archivo
Antes de entrar en materia, conviene saber que el nombre de un archivo de imagen es distinto de su tipo. 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, Foto-nombre.jpg
Esto nos dice que el nombre del archivo es "nombre-de-la-foto" y que está en formato jpg.
Si esta imagen estuviera en formato png, tendría este aspecto: Foto-nombre.png.
La extensión es una pequeña información que indica el formato del 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 los archivos de imagen
Dado que los motores de búsqueda también leen los nombres de los archivos de imagen, asegúrese de que los suyos sean claros y descriptivos.
Los archivos de imagen mal nombrados son vagos, como éstos:
- 1100073658.jpg
- Hombre haciendo ejercicio.jpg
Los buenos títulos de imágenes deben ser específicos y describir la imagen.
Por ejemplo, digamos que estás escribiendo un artículo sobre cómo los reclutas mejoran su forma física antes de ser enviados al campamento de entrenamiento del Cuerpo de Marines de Estados Unidos.
Tu imagen muestra a un recluta real practicando ejercicios de plancha. En lugar de man-exercising.jpg podrías titular tu imagen marine-recruit-holding-plank.jpg.
Los nombres de archivo de las imágenes decorativas suelen ser 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 se llama wonder-vehicle.jpg.
Si compartes una obra de arte, el título de la obra es un nombre de archivo de imagen adecuado.
Obtenga más información en nuestro artículo sobre SEO de nombres de archivo de imágenes.
Atención: Publicar imágenes para las que no se dispone de licencia puede acarrear cuantiosas multas. En Estados Unidos, estas multas pueden alcanzar los 150.000 dólares por uso de imagen.
Tamaño del archivo de imagen
Dado que los archivos de gran tamaño pueden hacer que su página se cargue lentamente, considere la posibilidad de utilizar un plugin de WordPress que optimice automáticamente la velocidad de sus imágenes.
Plugins como WP Rocket son fáciles de instalar y utilizar.
Consejo profesional: El tamaño del archivo de imagen y el tamaño de visualización de la imagen son dos cosas distintas. Es posible reducir el tamaño de la imagen y que siga mostrándose como una imagen de alta resolución Retina-ready.
Página Web SEO: Consiga más visitantes
Las imágenes informativas y decorativas pueden ayudarle a captar la atención de los visitantes. Y el texto alternativo de las imágenes informativas puede atraer tráfico de los motores de búsqueda.
Pero el SEO no se limita al texto alternativo de las imágenes.
Aquí es donde un plugin como Todo en Uno SEO (AIOSEO) entra en juego.
Diseñado para ser fácil de usar para los principiantes, proporciona casi todo lo que necesita para SEO (aparte del contenido).
Se trata de un plugin consolidado con miles de opiniones de 5 estrellas en WordPress.org. Más de 3 millones de usuarios lo han descargado.
Funciona así.
Posicionarse mejor: Todo el mundo quiere que su contenido se posicione mejor, 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 sobre la recomendación, tu puntuación TruSEO aumenta.
Aparezca en los resultados de búsqueda: El plugin hace que sea fácil hacer que sus páginas web sean elegibles para ser mostradas como fragmentos enriquecidos. Puedes pensar en los fragmentos enriquecidos como visualizaciones de superlujo en los motores de búsqueda.
Este es el aspecto de un fragmento de búsqueda estándar:
Y aquí hay un fragmento enriquecido.
No necesita código: All in One SEO gestiona varias funciones técnicas automáticamente. Por ejemplo, generará automáticamente mapas de sitio XML y RSS. Estos sitemaps ping motores de búsqueda para decirles acerca de sus cambios o nuevos contenidos.
No olvide planificar las conversiones
Mientras actúas para conseguir más tráfico, asegúrate de averiguar qué acciones quieres que realicen los visitantes de la web.
Utilizamos OptinMonster para crear ventanas emergentes con intención de salida. Estas ventanas emergentes aparecen cuando la gente está a punto de salir de su sitio web.
OptinMonster es económico y eficaz.
¿Cómo se escribe el texto alternativo en HTML?
A quienes sientan curiosidad por la representación HTML del texto alternativo, les resultará útil lo siguiente.
La sintaxis del texto alternativo es la siguiente:
<img alt="your alt text goes here">Tenga en cuenta que alt es una propiedad de 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 denomina texto alternativo nulo y tiene este aspecto en HTML.
<img src="/baseball-player-scoring.png/" alt="">También se denomina atributo alt vacío.
Consejo: Averigua cómo ver el código de cualquier página web.
Preguntas y respuestas sobre la imagen
¿Tienes más preguntas sobre la función decorativa de algunas imágenes, el texto alternativo o la accesibilidad? A continuación respondemos a algunas preguntas frecuentes.
Si tiene alguna otra pregunta, escríbala en la sección de comentarios.
¿Las imágenes de fondo se consideran imágenes decorativas?
Sí, las imágenes de fondo, definidas por la propiedad background-image en CSS, se consideran decorativas. En estos casos, el código CSS del sitio web suele 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 normas tecnológicas diseñadas para facilitar a las personas con discapacidad la navegación y el consumo de contenidos en un sitio web. Las Pautas de Accesibilidad al Contenido en la Web (WCAG) describen las mejores prácticas para desarrolladores web, pero los principiantes pueden empezar por lo más básico.
Aunque hacer que un sitio sea accesible no repercute directamente en el SEO, la accesibilidad es coherente con un buen SEO. Por eso, un sitio optimizado para la accesibilidad puede aparecer mejor clasificado en los resultados de búsqueda.
¿Qué son las pautas de accesibilidad web?
Las pautas de accesibilidad web establecen directrices para facilitar el acceso a los sitios web a las personas con discapacidad. Desarrolladas por la Iniciativa de Accesibilidad a la Web(WAI), las Pautas de Accesibilidad al Contenido en la Web(WCAG) se mejoran continuamente.
Las directrices se adhieren a 4 principios, definidos como Perceptibles, Operables, Comprensibles y Robustos.
La Iniciativa de Accesibilidad a la Web forma parte del Consorcio World Wide Web(W3).
Después de Imágenes decorativas . . .
Esperamos que este post te haya ayudado a entender qué son las imágenes decorativas y por qué es una buena práctica dejar el texto alternativo en blanco.
A continuación, aprenda más sobre SEO de imágenes y cómo las imágenes pueden ser útiles para crear contenido escaneable.
Si este artículo te ha resultado útil, suscríbete a nuestro canal de YouTube. Allí encontrarás muchos más tutoriales útiles. También puedes seguirnos en X (Twitter), LinkedIn o Facebook para mantenerte informado.
¿Quieres probar AIOSEO gratis?
Introduzca la URL de su sitio web WordPress para instalar AIOSEO Lite.
Divulgación: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, es posible que ganemos una comisión. Sólo recomendamos productos que creemos que aportarán valor a nuestros lectores.
