Plantilla de SEO de imágenes y texto alternativo

Nombres de archivos descriptivos

Cuándo usarla: Cambie el nombre de los archivos de imágenes antes de cargarlos para que describan el tema y ayuden a la búsqueda de imágenes.

Nombre los archivos antes de cargarlos

Los motores de búsqueda leen el nombre del archivo como una señal de lo que muestra una imagen, y un nombre claro es más fácil de administrar en su biblioteca multimedia. Reemplace los valores predeterminados de la cámara como [IMG_4827.jpg] con una descripción breve y legible para personas.

• Describa el tema: [red-leather-office-chair.jpg], no una cadena aleatoria.
• Use guiones entre palabras; evite espacios, guiones bajos y caracteres especiales.
• Manténgalo en minúsculas para mantener la coherencia entre servidores.
• Sea conciso: unas pocas palabras significativas superan a una larga cadena de palabras clave.

No sature con palabras clave ni repita la misma frase en todos los archivos. Nombre cada imagen según lo que realmente representa para que el nombre siga siendo preciso y útil.

Comprobación rápida: ¿Alguien podría adivinar la imagen solo por el nombre del archivo? Si es así, ya está. Para un lote de tomas similares, agregue un detalle distintivo como color, ángulo o modelo: [product-name-front-view.jpg] y [product-name-side-view.jpg].

Texto alternativo (accesibilidad primero)

Cuándo usarla: Escriba atributos alt que describan las imágenes para usuarios de lectores de pantalla y motores de búsqueda.

Primero escriba texto alternativo para las personas

El texto alternativo existe principalmente para accesibilidad: los lectores de pantalla lo leen en voz alta y se muestra cuando una imagen no se carga. Describe lo que la imagen transmite en un lenguaje sencillo, como si se lo estuviera explicando a alguien que no puede verlo.

• Sea específico y conciso: [un barista sirviendo café con leche en una taza blanca], aproximadamente una oración corta.
• Transmite el propósito: describe por qué la imagen está ahí, no solo sus detalles visuales.
• Omitir relleno: no comience con [imagen de] o [foto de]; la tecnología ya lo anuncia como una imagen.
• No utilices palabras clave: una mención natural de un término relevante está bien; una lista de palabras clave perjudica la accesibilidad.

Para imágenes puramente decorativas que no añaden información, utilice una opción alt vacía ([alt=""]) para que los lectores de pantalla las omitan. Si la imagen también es un enlace, el texto alternativo debe describir el destino o la acción del enlace.

Consejo: si un título ya describe completamente la imagen, mantenga el texto alternativo breve para evitar repetir las mismas palabras dos veces.

Compresión y formatos modernos (WebP/AVIF)

Cuándo usarla: Reduzca el tamaño del archivo y cambie a formatos modernos para mejorar el tiempo de carga y LCP.

Comprima y modernice cada imagen

Las imágenes grandes ralentizan las páginas y pueden perjudicar su Largest Contentful Paint. Reduzca el tamaño del archivo antes de subirlo y sirva formatos modernos que se comprimen mucho mejor que los antiguos con una calidad similar.

• Elija el formato correcto: AVIF o WebP para fotos y la mayoría de los gráficos; SVG para logotipos e iconos simples; mantenga PNG solo cuando necesite transparencia o texto nítido.
• Cambie el tamaño al tamaño de visualización: no envíe un archivo [4000px] a un espacio de [800px].
• Comprima con sensatez: busque el archivo más pequeño que siga viéndose limpio; pruebe un par de niveles de calidad y compare.
• Proporcione alternativas: use el elemento picture para ofrecer AVIF o WebP con una alternativa JPEG para navegadores más antiguos.

Flujo de trabajo: exporte en las dimensiones correctas, pase el archivo por una herramienta de compresión y luego confirme que se vea nítido en una pantalla de alta resolución. Para la imagen hero o principal, priorice que se cargue rápido, ya que suele ser el elemento LCP de la página.

Imágenes adaptables y carga diferida

Cuándo usarla: Presente el tamaño correcto por dispositivo y posponga las imágenes fuera de la pantalla para acelerar la carga.

Ajuste el tamaño y posponga imágenes

El marcado adaptable permite al navegador elegir el mejor archivo para cada pantalla, mientras que la carga diferida retrasa las imágenes a las que el visitante aún no se ha desplazado. Juntos reducen los bytes desperdiciados y aceleran el renderizado inicial.

• Utilice srcset y sizes: proporcione varios anchos para que los teléfonos descarguen archivos pequeños y las pantallas grandes obtengan imágenes nítidas.
• Establezca width y height: agregue dimensiones explícitas (o aspect-ratio) para reservar espacio y evitar cambios de diseño.
• Carga diferida bajo la línea de pliegue: agregue [loading="lazy"] a las imágenes que comienzan fuera de la pantalla.
• NO cargue la imagen LCP de forma diferida: la imagen hero o principal por encima de la línea de pliegue debe cargarse de inmediato; márquela como de alta prioridad en su lugar.

Por qué es importante: posponer las imágenes fuera de la pantalla libera ancho de banda para lo que se ve primero. Reservar espacio con dimensiones definidas evita que el contenido salte a medida que llegan las imágenes, lo que protege su Cumulative Layout Shift y la experiencia de lectura.

Subtítulos, contexto circundante y mapas del sitio de imágenes

Cuándo usarla: Fortalezca la relevancia de la imagen con el contexto en la página y ayude a los rastreadores a descubrir imágenes.

Agregue contexto y facilite el descubrimiento

Los motores de búsqueda leen el texto que rodea una imagen, el pie de foto y el título de la página para comprenderla. Un contexto sólido más un mapa del sitio de imágenes hacen que sus elementos visuales sean más fáciles de interpretar y encontrar.

• Agregue pies de foto cuando sea útil: los pies de foto se leen con más frecuencia que el texto del cuerpo, así que utilícelos para figuras, gráficos y fotos de productos.
• Coloque las imágenes cerca del texto relevante: coloque cada imagen junto al párrafo que ilustra.
• Utilice el elemento figure: envuelva una imagen y su figcaption juntos para lograr una estructura clara y semántica.
• Enumere imágenes en un mapa del sitio: incluya entradas de imágenes (o un mapa del sitio de imágenes dedicado) para que los rastreadores puedan descubrir gráficos cargados por scripts o galerías.

Aplíquelo: para la imagen en [page URL], escriba un pie de foto que agregue información en lugar de repetir el texto alternativo y asegúrese de que el encabezado y el texto cercanos mencionen el mismo tema. Luego confirme que el archivo aparece en su mapa del sitio XML.

Licencias y datos estructurados de imágenes

Cuándo usarla: Marque las imágenes para que puedan aparecer con resultados enriquecidos y licencias claras.

Marque y licencie sus imágenes

Los datos estructurados informan a los motores de búsqueda sobre la función y la propiedad de una imagen, lo que puede habilitar resultados de imagen más completos y una insignia de licencia. Agréguelos cuando los derechos de imagen o el contexto sean importantes, como en páginas de productos, recetas o artículos.

• Utilice el esquema correcto: haga referencia a URL de imágenes de alta resolución en su marcado de Product, Recipe, Article o ImageObject.
• Proporcione imágenes grandes y rastreables: los datos estructurados deben apuntar a imágenes que no estén bloqueadas y cumplan con las pautas de tamaño mínimo.
• Agregue metadatos de licencia: incluya [license] y [acquireLicensePage] en ImageObject para que los términos de uso sean claros.
• Mantenga los metadatos honestos: los campos de crédito ([creator]) y copyright deben coincidir con la página y los derechos reales de la imagen.

Valide antes del lanzamiento: pruebe su marcado con un validador de datos estructurados, corrija cualquier error y confirme que la imagen referenciada se cargue. Los campos de licencia precisos ayudan a que su trabajo aparezca correctamente y protegen la forma en que se reutiliza.