¿Cuál es el problema?
Tu página tiene una etiqueta meta og:image, pero la URL a la que apunta no devuelve una imagen válida. Esto significa que la imagen está rota: las plataformas sociales mostrarán un marcador de posición, un icono de imagen rota o directamente ninguna imagen cuando se comparta tu enlace.
Esto es peor que no tener og:image, porque indica a las plataformas y a los usuarios que algo falla en tu sitio.
Causas comunes
1. URL incorrecta o error tipográfico
La URL de la imagen en la etiqueta meta no corresponde a un archivo real en tu servidor.
2. El servidor devuelve un error (404, 500, etc.)
El archivo de imagen fue eliminado, movido, o el servidor está mal configurado.
3. Tipo de contenido incorrecto
La URL existe pero devuelve HTML (por ejemplo, una página de inicio de sesión o una página de error) en lugar de un archivo de imagen. El servidor debe devolver un encabezado Content-Type que comience con image/ (por ejemplo, image/jpeg, image/png).
4. Redirección a un recurso que no es imagen
La URL de la imagen redirige a una página que no es una imagen (por ejemplo, una página de inicio de sesión de un CDN o un enlace expirado).
5. Restricciones de acceso
La imagen requiere autenticación, está detrás de un firewall o está bloqueada para peticiones externas (por ejemplo, protección contra hotlinking).
6. URL relativa sin base adecuada
Usar una ruta relativa como /images/og.jpg sin una resolución de URL adecuada puede provocar referencias rotas.
Cómo solucionarlo
Paso 1: Verificar la URL de la imagen
Abre la URL de og:image directamente en tu navegador. Debería mostrar la imagen, no una página de error ni una redirección.
Paso 2: Comprobar el tipo de contenido
El servidor debe responder con un tipo de contenido de imagen:
Content-Type: image/jpeg
Content-Type: image/png
Content-Type: image/webp
Content-Type: image/gifPaso 3: Usar una URL absoluta con HTTPS
Usa siempre una URL completa y absoluta:
<!-- Mal -->
<meta property="og:image" content="/images/og.jpg" />
<!-- Bien -->
<meta property="og:image" content="https://yoursite.com/images/og.jpg" />Paso 4: Asegurar el acceso público
La imagen debe ser accesible públicamente sin autenticación. Los rastreadores de redes sociales no pueden iniciar sesión para obtener tu imagen.
Paso 5: Probar con curl
Puedes verificarlo desde la línea de comandos:
curl -I https://yoursite.com/og-image.jpgBusca HTTP/2 200 y content-type: image/... en la respuesta.
Impacto en las redes sociales
Una og:image rota es uno de los problemas más perjudiciales para la presencia en redes sociales:
- Facebook — Muestra un marcador gris o ninguna imagen
- Twitter/X — Recurre a una tarjeta de solo texto con mínima interacción
- LinkedIn — Muestra una vista previa vacía que se ve poco profesional
- Discord, Slack, Telegram — Muestran imágenes incrustadas rotas o ausentes
- WhatsApp — Muestra un enlace sin ninguna vista previa visual
Los enlaces con imágenes rotas pueden recibir hasta un 80% menos de interacción en comparación con enlaces con imágenes funcionales.
Consejos de prevención
- Automatiza la validación de imágenes — Añade una verificación en tu pipeline de CI/CD que compruebe que las URLs de og:image devuelven imágenes válidas
- Usa un CDN — CDNs como Cloudinary, Imgix o Cloudflare Images garantizan una entrega fiable de imágenes
- Monitoriza tus imágenes — Configura monitorización de disponibilidad para las URLs de imagen críticas
- Usa imágenes de respaldo — Configura tu servidor para devolver una imagen OG por defecto si la específica no está disponible
- Versiona tus imágenes — Incluye un hash o versión en el nombre del archivo para evitar problemas de caché