SEO de imágenes y vídeo: nombres de archivo, texto alternativo y datos estructurados

Las imágenes y los vídeos son lo primero que se ve de una web y, muchas veces, lo último que se optimiza. Se suben con el nombre que traían de la cámara o del generador, sin texto alternativo y sin dimensiones, y se confía en que el buscador «entienda» lo que muestran.

Los buscadores entienden cada vez mejor las imágenes, pero siguen apoyándose en las señales que les damos. Y los lectores de pantalla no adivinan nada: leen lo que escribimos. Este artículo resume las reglas que aplicamos en grupobeetle.com y que comprobamos de forma automática en cada compilación con nuestro comando de verificación.

Por qué los medios cuentan para el SEO

Una imagen bien preparada aporta en tres frentes:

• Búsqueda de imágenes y resultados enriquecidos. Google Imágenes, Discover y los resultados con miniatura dependen de que la imagen sea rastreable, relevante y esté bien descrita.
• Contexto de la página. El nombre del archivo, el texto alternativo y el texto que la rodea refuerzan el tema de la página.
• Experiencia. Medios pesados o sin dimensiones empeoran la carga y provocan saltos de diseño, dos factores que también se miden.

Además, una imagen sin descripción es una barrera de accesibilidad. Que el SEO y la accesibilidad pidan lo mismo es una buena noticia: haces el trabajo una vez.

Regla 1: nombres de archivo descriptivos

El nombre del archivo es la primera pista sobre su contenido. IMG_4821.jpg no dice nada; grupo-beetle-portada-capitulo-marca-video-movil.mp4 lo dice casi todo.

Las normas que seguimos:

• Minúsculas y guiones (kebab-case). Sin espacios, sin guiones bajos, sin acentos ni eñes en el nombre del archivo.
• Al menos tres palabras con significado. La fórmula que mejor nos funciona: marca + producto o tema + qué se ve.
• En el idioma de la página. Si la página está en español, el nombre también.
• Nada genérico. Fuera nombres como frame_0001, IMG_, DSC, screenshot, captura, final2, copy o los prefijos que añaden algunos generadores de imágenes.
• Nada de identificadores aleatorios. Cadenas largas de letras y números no aportan nada y delatan que el archivo no se ha revisado.

Para las variantes, añade un sufijo claro en lugar de inventar otro nombre: -movil, -poster, -final. Así, el vídeo de escritorio, el de móvil y sus pósters forman una familia reconocible.

En nuestro proyecto, el verificador recorre las carpetas públicas de medios y de marca y falla si encuentra un archivo que no sea kebab-case de al menos tres palabras, que coincida con un patrón genérico o que parezca un identificador aleatorio. Un archivo mal nombrado no llega a publicarse.

Regla 2: texto alternativo útil (o vacío a propósito)

El atributo alt describe la imagen para quien no puede verla y para el buscador. Las pautas:

• Describe lo que se ve y por qué importa en esa página. No es una lista de palabras clave.
• Sé específico. «Fotograma de la portada de grupobeetle.com con el capítulo en vídeo de una marca del grupo» es mejor que «portada».
• No empieces con «imagen de» o «foto de». El lector de pantalla ya anuncia que es una imagen.
• Una o dos frases como máximo. Si necesitas más, el contexto debería estar en el texto de la página.
• Distingue estados. Si hay un póster inicial y otro final, cada uno con su descripción: cerrado y abierto, antes y después.

Hay una excepción importante: las imágenes decorativas. Un fondo, un adorno o un icono que repite lo que ya dice el texto deben llevar alt="" para que el lector de pantalla los ignore. Lo que no puede pasar es que el alt vacío sea un descuido. Por eso nuestra regla es estricta: un alt vacío solo se acepta si la imagen está marcada explícitamente como decorativa con role="presentation" o aria-hidden="true". Cualquier <img> sin alt, o con alt vacío sin esa marca, hace fallar la verificación.

Regla 3: dimensiones siempre declaradas

Cada <img> lleva sus atributos width y height. No sirven para fijar el tamaño en pantalla, que lo decide el CSS, sino para que el navegador reserve el hueco antes de que la imagen llegue. Sin ellos, el contenido salta cuando la imagen termina de cargar, y eso penaliza la estabilidad visual (CLS).

Para vídeos y contenedores de medios, la propiedad CSS aspect-ratio cumple la misma función. En la portada de grupobeetle.com cada caja de vídeo tiene su proporción reservada por marca, y la estabilidad visual se mantiene a cero.

Nuestro verificador también rechaza cualquier <img> sin width y height.

Regla 4: formatos y peso

• WebP o AVIF para fotografías e ilustraciones rasterizadas; SVG para logotipos e iconos.
• El tamaño justo: no sirvas una imagen de 3000 píxeles para un hueco de 400. Genera varios tamaños y deja que el navegador elija.
• Carga diferida (loading="lazy") para todo lo que está por debajo del primer pantallazo, y nunca para la imagen principal de la página.
• Vídeo en lugar de GIF para cualquier animación: pesa una fracción y se puede pausar.

Regla 5: vídeos con nombre accesible

Un <video> sin descripción es opaco para todos. Cada vídeo de la web lleva un aria-label o un title que explica qué muestra, y un póster con su propio texto alternativo cuando se muestra como imagen. Es otra de las comprobaciones de nuestro verificador: un vídeo sin nombre accesible bloquea la publicación.

Si el vídeo tiene voz o información que no está en la página, añade subtítulos o una transcripción. Si es puramente ambiental y sin audio, como los de nuestra portada, un nombre descriptivo es suficiente.

Regla 6: datos estructurados para vídeo

Los datos estructurados en formato JSON-LD ayudan al buscador a entender qué es cada vídeo y a mostrarlo con miniatura. Para cada vídeo de la portada publicamos un objeto VideoObject con:

• name y description: título y descripción reales del vídeo, coherentes con su aria-label.
• thumbnailUrl: las URLs de los pósters.
• contentUrl: la URL del archivo de vídeo.
• uploadDate: la fecha de publicación.
• duration: la duración en formato ISO 8601 (por ejemplo, PT5S para cinco segundos).
• width y height.
• publisher: una referencia por @id a la organización.

Esa última línea es clave. En la página principal publicamos un objeto Organization con un identificador estable, y cada vídeo apunta a él. Todo forma un único grafo: la organización, sus marcas y sus medios, conectados entre sí. El logotipo de la organización se declara como ImageObject en dos versiones, una rasterizada y otra vectorial, con sus dimensiones y una leyenda.

Una advertencia: los datos estructurados deben describir lo que de verdad hay en la página. Marcar un vídeo que no se ve o inflar descripciones no solo no ayuda, sino que puede invalidar los resultados enriquecidos.

Regla 7: un sitemap de medios

El sitemap normal lista páginas. Para que el buscador descubra imágenes y vídeos que se cargan con JavaScript o en diferido, añadimos un sitemap de medios con las extensiones image: y video:. En él declaramos el logotipo, los pósters de cada capítulo y, para cada vídeo, su miniatura, título, descripción, URL, duración y fecha de publicación.

El archivo robots.txt enlaza tanto el sitemap de páginas como el de medios. En el entorno de pruebas, ninguno de los dos se anuncia y el sitio entero queda fuera de la indexación.

Cómo automatizarlo

La forma más fiable de mantener estas reglas es que una máquina las compruebe. Nuestro comando de verificación, que se ejecuta tras cada compilación, revisa:

1. Que toda <img> tenga alt, y que el alt vacío solo aparezca en imágenes marcadas como decorativas.
2. Que toda <img> declare width y height.
3. Que todo <video> tenga aria-label o title.
4. Que los archivos de las carpetas de medios y de marca tengan nombres descriptivos en kebab-case, de al menos tres palabras y sin patrones genéricos.

Si cualquiera falla, la publicación se detiene. Parece rígido, pero elimina la tarea más tediosa del SEO de medios: revisar a mano archivo por archivo. Y crea un hábito: cada imagen o vídeo que entra en el proyecto se renombra y se describe antes de subirlo.

Lista de comprobación rápida

• Nombre de archivo en kebab-case: marca + tema + qué se ve.
• Texto alternativo específico, o vacío y marcado como decorativo.
• width y height en cada imagen; aspect-ratio en cada contenedor de vídeo.
• WebP, AVIF o SVG, al tamaño justo.
• aria-label o title en cada vídeo.
• VideoObject con publisher enlazado a la organización.
• Sitemap de medios enlazado desde robots.txt.
• Verificación automática antes de publicar.

Para ver cómo encajan estas reglas en el rendimiento general de una web con vídeo y 3D, lee nuestra guía sobre webs inmersivas sin perder velocidad. Si tus productos están en Shopify, cada tienda tiene además su propio blog: los consejos de producto de nuestras marcas viven en el blog de Beetle Wood y en el blog de Beetle Print.