Saltar al contenido
Módulo 04 · Sistemas de contenido y claridad en la página

Optimiza imágenes, vídeo y YouTube para el descubrimiento

Publica recursos multimedia que expliquen una decisión, funcionen para todos los usuarios y den contexto preciso sobre su contenido.

Lección 15Sistemas de contenido y claridad en la página · Curso prácticoActualizado
42% del cursoVer todas las lecciones →

Lo que aprenderás

Una imagen o un vídeo pueden aclarar una comparación, un proceso o una prueba que el texto explica peor. Para que ayuden, deben cargar bien, tener contexto y responder a una necesidad real, no existir solo para decorar una página.

Al terminar esta lección: Podrás planificar un recurso visual con propósito, texto alternativo, transcripción, página de destino y medición.

El límite que debes tener claro

Importante: Optimizar una imagen no compensa un vídeo sin valor, una miniatura engañosa o una página que no responde a la intención del visitante.

Elige el medio por la tarea, no por decoración

Plan multimediaTarea → formato → acceso → contexto → acción
  1. 01

    Define qué debe entenderse

    Identifica la duda que un recurso puede responder mejor.

  2. 02

    Elige el formato

    Imagen para comparar, video para demostrar o tabla para decidir.

  3. 03

    Hazlo accesible y rápido

    Ofrece texto alternativo, subtítulos, transcripción y tamaño adecuado.

  4. 04

    Conecta con la página

    Aporta contexto y un siguiente paso claro cerca del medio.

Conceptos clave

01

El medio debe hacer un trabajo

Usa una imagen para comparar, un vídeo para demostrar o una tabla para decidir. Si no mejora la comprensión, puede sobrar.

Guardado en este dispositivo.
02

El contexto no va solo en el archivo

El título, pie, texto cercano, transcripción y página ayudan a entender qué muestra el recurso y por qué importa.

03

Diseña para acceso

Añade texto alternativo útil, subtítulos, controles, contraste y formatos que no bloqueen a usuarios móviles.

04

El peso y la ubicación cambian la experiencia

Usa dimensiones y formatos acordes al espacio. Carga recursos secundarios cuando se necesiten, sin retrasar el mensaje o la acción principal.

Pregunta: ¿Este medio ayuda más de lo que cuesta en tiempo o datos?

05

La accesibilidad forma parte del contenido

Describe imágenes informativas, subtitula el diálogo y ofrece transcripción cuando ayude a entender el video. Lo decorativo no debe añadir ruido.

Pregunta: ¿Puede entenderse el mismo contenido sin percibir el medio?

El método práctico

  1. 01

    Define la tarea

    Escribe qué debería entender o hacer la persona tras ver el recurso.

  2. 02

    Crea una versión accesible

    Incluye texto alternativo, subtítulos o transcripción según corresponda.

  3. 03

    Ubícalo cerca de la decisión

    No escondas la explicación en una galería sin contexto.

  4. 04

    Mide el uso

    Observa reproducciones útiles, clics de siguiente paso y preguntas que el recurso no resolvió.

Taller multimedia

Haz que una demostración de producto ayude a tomar una decisión

Un medio funciona cuando resuelve una pregunta, se puede consumir con facilidad y conduce a información relacionada.

Escenario

Una empresa publica un video de dos minutos sobre la configuración de su producto. No tiene capítulos, subtítulos ni transcripción, y el siguiente paso queda lejos del reproductor.

El equipo quiere conservar la demostración, ayudar a quienes prefieren leer y reducir la carga innecesaria al abrir la página.

Prepara el recurso paso a paso

01

Define la tarea y el momento

Escribe qué debería aprender o hacer la persona tras consumir el recurso y qué duda no resuelve.

02

Elige el formato más claro

Usa video para mostrar movimiento, capturas para explicar estados y texto cuando las instrucciones deban buscarse o copiarse.

03

Prepara alternativas accesibles

Añade título descriptivo, subtítulos, transcripción y texto alternativo para imágenes informativas. Marca como decorativo lo que no añade información.

04

Optimiza carga y ubicación

Ajusta tamaño y formato al espacio. Evita cargar video automáticamente y no retrases el contenido principal por medios secundarios.

05

Conecta el recurso con el flujo

Coloca instrucciones y siguiente paso cerca de la demostración. Comprueba reproducción, transcripción, enlaces y estados sin conexión o error.

Ficha de un recurso visual

  1. Tarea del cliente: pregunta que el recurso ayuda a resolver.
  2. Formato y propósito: por qué imagen, video, diagrama o tabla es adecuado.
  3. Accesibilidad: texto alternativo, subtítulos o transcripción necesarios.
  4. Rendimiento: tamaño, formato, carga y ubicación en la página.
  5. Contexto: explicación que ayuda a interpretar el medio.
  6. Resultado: comprensión, uso de la guía y siguiente paso pertinente.

Revisión antes de publicar

  1. ¿El medio responde una pregunta concreta?
  2. ¿Se puede comprender y usar sin audio o visión?
  3. ¿La página conserva texto y acción si el recurso falla?
  4. ¿La carga de medios secundarios retrasa la tarea principal?
  5. ¿Se sabe qué debe hacer la persona a continuación?

Ejemplo: demostración de producto

Una empresa publica un vídeo de dos minutos sobre configuración. Añade un título específico, capítulos, transcripción, capturas de cada paso, una página de soporte y un enlace claro hacia el siguiente paso para usuarios que necesitan ayuda adicional.

Qué cambia: El vídeo deja de ser un activo aislado y se convierte en parte de una ruta de asistencia y descubrimiento.

Taller aplicado · 45–60 minutos

Diseña medios que ayuden a completar la tarea

Una imagen o un vídeo gana su lugar cuando explica, demuestra, compara o permite verificar algo mejor que el texto solo. Optimizar el archivo no rescata un recurso decorativo o inaccesible.

Caso de trabajo

Un tutorial de gestión de proyectos incluye doce capturas casi idénticas y un vídeo de dieciocho minutos. Las imágenes usan nombres genéricos, el texto alternativo repite el título y el vídeo no tiene capítulos ni transcripción. En móvil, las capturas se leen a medias.

  1. Movimiento 1

    Asigna una función a cada medio

    Marca si orienta, demuestra, compara, prueba o permite practicar. Elimina duplicados y decide qué información debe seguir disponible en texto o HTML semántico.

  2. Movimiento 2

    Diseña para la entrega real

    Prueba tamaño, recorte, densidad, contraste, subtítulos, transcripción, controles, teclado, miniatura y lectura en pantalla pequeña. No dependas solo del color.

  3. Movimiento 3

    Conecta el recurso con el contexto

    Usa títulos, pies, texto cercano, nombres de archivo y enlaces que expliquen qué verá el usuario. El texto alternativo comunica la función o información, no una lista de palabras clave.

  4. Movimiento 4

    Estructura el vídeo para encontrar respuestas

    Añade capítulos precisos, una descripción que resuma el valor, enlaces útiles, transcripción revisada y una página donde el vídeo tenga contexto propio.

  5. Movimiento 5

    Mide la tarea, no solo la reproducción

    Relaciona interacción con la acción que el recurso debía facilitar. Revisa abandono, búsqueda interna, preguntas de soporte y pruebas de comprensión antes de atribuir causalidad.

Cómo se vería una respuesta sólida

El equipo conserva cuatro capturas anotadas, convierte una comparación en tabla HTML y divide el vídeo en seis capítulos. Publica una transcripción corregida y un ejemplo descargable. En móvil, cada imagen puede ampliarse sin perder el pie. La revisión mide si los usuarios completan la configuración y si disminuyen las preguntas repetidas; no declara que el tiempo de reproducción sea una señal de posicionamiento.

Evidencia que debes entregar

Entrega un brief por medio con función, audiencia, formato, accesibilidad, contexto, versión, mantenimiento y medida vinculada a la tarea.

Prueba los fallos antes de aprobar

La consolidación borra una intención distinta

Dos URL comparten vocabulario, pero una ayuda a comparar y otra a implementar. Revisa tareas, enlaces y conversiones antes de unirlas. La similitud de consultas no demuestra que deban tener el mismo destino.

La redirección encubre una retirada sin sustituto

Enviar todo a una categoría o a la portada conserva un código, no la utilidad. Exige equivalencia de propósito y contenido. Si ya no existe una respuesta responsable, un estado de retirada claro puede ser mejor.

La fecha cambia sin una revisión real

Actualizar el año o la marca temporal no convierte el contenido en vigente. Registra qué afirmación, ejemplo, enlace o instrucción se comprobó. Si nada cambió, conserva la fecha anterior y documenta la decisión de mantener.

Defiende la decisión

Elige un grupo con cuatro páginas y presenta una decisión distinta para cada una: conservar, actualizar, consolidar o retirar. Demuestra la función actual, la evidencia y el impacto sobre enlaces, navegación, soporte y tareas del usuario. Explica también la alternativa rechazada. Una decisión de limpieza solo es defendible si protege el recorrido completo, no únicamente el inventario de URL.

Deja un traspaso que otra persona pueda usar

Entrega la tabla por URL, destinos equivalentes, enlaces que deben corregirse, métricas de referencia y pruebas posteriores. Incluye responsable, ventana de observación y procedimiento de vuelta cuando exista. Otra persona debe poder rastrear por qué una página cambió sin depender de una hoja separada sin contexto.

Prueba de cierre

Prueba de cierre: revisa diez enlaces que llegan a las páginas afectadas y explica cómo cambiará cada contexto. Una consolidación que solo modifica redirecciones, pero conserva anclas y promesas antiguas, no supera la revisión.

Qué observar después

Compara antes y después por grupo: códigos, enlaces, búsquedas internas, acciones y solicitudes de soporte. Espera el tiempo suficiente para observar rastreo sin atribuir cada cambio de tráfico a la limpieza. Documenta también resultados neutros.

Criterios de aceptación

  • Cada recurso cumple una función.
  • La información esencial tiene alternativa.
  • El móvil conserva legibilidad.
  • El vídeo tiene capítulos y transcripción.
  • La medida corresponde a la tarea.

Aplícalo ahora

Convierte la lección en una decisión

Elige una página y define un recurso visual: tarea, formato, texto alternativo o transcripción, contexto, CTA y medida de éxito.

Antes de seguir

  • El recurso ayuda a comprender una decisión.
  • Tiene contexto visible y accesible.
  • La página de destino explica lo que muestra.
  • Mido una acción útil, no solo reproducciones.

Pon esta lección en práctica.

Crea una cuenta gratuita de Spacebrain y organiza tu trabajo SEO con los proveedores de datos que elijas.

Probar gratis