⚠ Advertencia Image

Imagen OG sin HTTPS — Problemas de seguridad y compatibilidad

Algunas plataformas pueden bloquear imágenes sin HTTPS. Usa HTTPS para tu imagen OG.

¿Cuál es el problema?

La URL de tu og:image usa HTTP en lugar de HTTPS. En la web actual, orientada a la seguridad, muchas plataformas bloquean o se niegan a cargar imágenes servidas a través de conexiones HTTP inseguras.

Por qué HTTPS importa para las imágenes OG

Compatibilidad con plataformas

Facebook — Prefiere claramente HTTPS; las imágenes HTTP pueden no mostrarse en las previsualizaciones
Twitter/X — Requiere HTTPS para las imágenes de las cards
LinkedIn — Puede bloquear imágenes HTTP
Discord — Muestra una advertencia por contenido mixto
Slack — Puede no desplegar imágenes HTTP

Seguridad

Las imágenes HTTP pueden ser interceptadas y modificadas mediante ataques man-in-the-middle
Los navegadores muestran avisos de “contenido mixto” cuando páginas HTTPS cargan recursos HTTP
Los usuarios son cada vez más conscientes de los indicadores de seguridad

SEO

Google favorece los sitios y recursos con HTTPS
Los problemas de contenido mixto pueden afectar negativamente tu posicionamiento

Cómo solucionarlo

Simplemente cambia la URL de tu imagen de HTTP a HTTPS:

<!-- Antes -->
<meta property="og:image" content="http://tusitio.com/og-image.jpg" />

<!-- Después -->
<meta property="og:image" content="https://tusitio.com/og-image.jpg" />

¿Qué pasa si tu servidor no soporta HTTPS?

Obtén un certificado SSL gratuito — Usa Let’s Encrypt para un certificado SSL gratuito y automatizado
Usa un CDN — Servicios como Cloudflare, Vercel o Netlify ofrecen HTTPS gratis
Usa un servicio de alojamiento de imágenes — Plataformas como Cloudinary, Imgix o AWS S3 sirven imágenes por HTTPS por defecto
Configura redirecciones — Configura tu servidor para redirigir HTTP a HTTPS

Consejo adicional: Usa og:image:secure_url

Para máxima compatibilidad, también puedes especificar la URL HTTPS explícitamente:

<meta property="og:image" content="https://tusitio.com/og-image.jpg" />
<meta property="og:image:secure_url" content="https://tusitio.com/og-image.jpg" />

Verifica tus etiquetas Open Graph

Artículos relacionados

og:image rota

La URL de og:image no devuelve una imagen válida. Las plataformas sociales mostrarán una vista previa rota o vacía.

La URL canónica difiere de la URL de la página

La URL canónica apunta a una URL diferente a la de la página actual.

El charset no es la primera etiqueta meta

La declaración de charset debería ser el primer elemento dentro de <head>.

og:description podría ser más larga

Tienes espacio para una descripción más detallada que aumente la interacción.

og:description contiene una URL

La og:description debería ser un resumen legible, no una URL.

Keyword stuffing en og:description

Repetir las mismas palabras excesivamente en la descripción se percibe como spam.

Servidor MCP de OpenGraph

Inspecciona tags OG directamente desde tu editor

El servidor MCP de OpenGraph te permite inspeccionar y analizar meta tags Open Graph directamente desde tu editor con IA o asistente. Proporciona dos herramientas:

inspect_og — Obtener y puntuar tags OG de cualquier URL
suggest_og_tags — Generar HTML de meta tags recomendados

Agrega el servidor al archivo .cursor/mcp.json de tu proyecto:

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

Reinicia Cursor después de agregar la configuración.

Agrega a tu archivo .vscode/mcp.json (requiere extensión GitHub Copilot):

{
  "servers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

Asegúrate de tener GitHub Copilot con soporte MCP habilitado.

Agrega a tu archivo claude_desktop_config.json:

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

El archivo de configuración está en ~/Library/Application Support/Claude/claude_desktop_config.json en macOS o %APPDATA%\Claude\claude_desktop_config.json en Windows.

Agrega a tu archivo ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

Reinicia Windsurf después de modificar la configuración.

Agrega a tu settings.json de Zed bajo context_servers:

{
  "context_servers": {
    "opengraph": {
      "command": {
        "path": "npx",
        "args": ["-y", "opengraph-mcp"]
      }
    }
  }
}

Abre ajustes con Cmd+, y agrega la configuración.

Ejemplos de uso

▶ "Inspecciona los tags OG de github.com"

▶ "Sugiere meta tags OG para mi sitio web https://example.com"

▶ "Verifica si mi blog tiene etiquetas Open Graph correctas"