# F4.  Imágenes general - SEO guía optimización contenido

#####   


##### **Etiquetas `alt` en las imágenes y SEO**

Las etiquetas `alt` (texto alternativo) son descripciones que se asignan a las imágenes en el código HTML. Aunque no se muestran visualmente en la página, tienen un papel clave en la accesibilidad y en el posicionamiento web (SEO).

**1. Mejoran el SEO (posicionamiento en buscadores)**

Los buscadores como Google no "ven" imágenes, pero leen el texto `alt` para saber qué representan. Esto ayuda a:

- Entender el contenido de la página.
- Posicionar la imagen en Imágenes.
- Aumentar la visibilidad de productos en e-commerce.

<p class="callout info">  
El buscador Google tiene tecnología de reconocimiento de texto en imágenes (OCR) y puede detectar texto dentro de una imagen, por ejemplo:  
  
· Texto en una foto  
  
· Texto en un banner  
  
· texto en una infografía  
  
⚠️ Pero esto no sustituye al texto HTML ni al atributo `alt`.  
  
  
</p>

<div class="overflow-y-auto p-4" dir="ltr" id="bkmrk-">  
</div>**2. Mejoran la accesibilidad**

Las personas con discapacidades visuales utilizan lectores de pantalla. Estos dispositivos leen el texto alternativo para describir la imagen. Si una imagen no tiene `alt`, esas personas no sabrán qué se muestra.  
Esto también es una exigencia legal en muchos países en materia de accesibilidad web.

**3. Aparecen si la imagen no se carga**

Si por alguna razón la imagen no se puede mostrar (por conexión lenta o error), el texto `alt` aparece en su lugar. Esto evita vacíos de información en la página.

##### **Buenas prácticas para usar `alt` correctamente** 

- Ser **descriptivo y específico**: explicar qué se ve en la imagen.
- Incluir **palabras clave**, si es natural hacerlo.
- No repetir contenido innecesario.
- No usar frases como “imagen de...” o “foto de...”, Google ya sabe que es una imagen.

> ❌ **Ejemplo incorrecto;** <div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary" id="bkmrk-html-copiareditar-%3Ci-0"><div class="overflow-y-auto p-4" dir="ltr">` <span class="hljs-attr">alt</span>=<span class="hljs-string">imagen1</span>`  
> </div></div>  
>   
> ✔️ **Ejemplo correcto;** `<span class="hljs-attr">alt</span>=<span class="hljs-string">Zapatos de cuero negro con suela antideslizante para hombre</span>`**`<span class="hljs-string"> </span>`**

<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary" id="bkmrk-html-copiareditar-%3Ci-1"><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">  
</div></div></div><div class="overflow-y-auto p-4" dir="ltr">  
</div></div>#### **Conclusión**

Las etiquetas `alt` no solo mejoran el posicionamiento en buscadores, sino que hacen la web más accesible y profesional. En una tienda online, cada imagen de producto debería tener un `alt` descriptivo, ya que también puede ayudar a aparecer en resultados de búsqueda visual.