Falta og:image:alt — Accesibilidad para imágenes en redes sociales

¿Qué es og:image:alt?

La meta etiqueta og:image:alt proporciona texto alternativo para tu imagen de Open Graph. Describe el contenido de la imagen para usuarios que no pueden verla — ya sea por discapacidad visual, conexiones lentas o enlaces de imagen rotos.

¿Por qué es importante?

Accesibilidad

• Los lectores de pantalla en plataformas sociales usan este texto para describir la imagen a usuarios con discapacidad visual
• Se estima que más de 2 mil millones de personas en el mundo tienen algún tipo de discapacidad visual
• Plataformas como Facebook y Twitter utilizan el texto alternativo en sus funciones de accesibilidad

Beneficios para el SEO

• Los motores de búsqueda usan el texto alternativo para comprender el contenido de la imagen
• Contribuye a una mejor indexación de tus páginas
• Google considera la accesibilidad como señal de posicionamiento

Contenido de respaldo

• Cuando la imagen no carga, se muestra el texto alternativo en su lugar
• Proporciona contexto incluso sin el elemento visual

Cómo solucionarlo

<meta property="og:image:alt" content="Screenshot of OpenGraph.to showing a website analysis with score of 95/100" />

Buenas prácticas para el texto alternativo de imágenes OG

1. Sé descriptivo pero conciso — Apunta a 1-2 oraciones (lo ideal es menos de 125 caracteres)
2. Describe lo que hay en la imagen — No de qué trata la página, sino lo que muestra la imagen
3. No empieces con “Imagen de” o “Foto de” — Los lectores de pantalla ya lo anuncian como imagen
4. Incluye detalles relevantes — Menciona el texto que aparece en la imagen y los elementos visuales clave
5. Evita el relleno de palabras clave — Escribe para personas, no para motores de búsqueda

Ejemplos

Correcto:

<meta property="og:image:alt" content="Dashboard showing website performance metrics with a 95/100 score" />

Incorrecto:

<meta property="og:image:alt" content="image" />
<meta property="og:image:alt" content="og image website seo open graph meta tags social media" />

Implementación según el framework

Next.js (App Router):

export const metadata = {
  openGraph: {
    images: [{
      url: 'https://yoursite.com/og-image.jpg',
      width: 1200,
      height: 630,
      alt: 'Description of the image content',
    }],
  },
}