Imágenes Open Graph para la web de tu app

Actualizado el 30 de octubre de 2026

Una imagen Open Graph es la imagen que aparece cuando alguien comparte un enlace a tu web en X, LinkedIn, Facebook, Slack, iMessage y casi cualquier otra app. Hazla de 1200 × 630 píxeles (1.91:1), defínela con la etiqueta og:image, añade twitter:card con el valor summary_large_image para que X la muestre en grande, aleja el texto de los bordes y pruébala antes de compartir el enlace.

Qué es una imagen Open Graph

Open Graph es un conjunto de metaetiquetas, creado por Facebook, que indica a otras apps cómo mostrar un enlace a tu página: su título, descripción, URL e imagen. Cuando pegas un enlace en una publicación o un chat, la app descarga la página, lee estas etiquetas y crea una tarjeta de vista previa.

Sin una etiqueta de imagen, la app adivina. Puede elegir tu logo, una imagen cualquiera de la página o nada. En la web de una app, esa tarjeta suele ser lo primero que la gente ve de tu producto, así que merece la pena controlarla.

El tamaño: 1200 × 630

El protocolo Open Graph no fija un tamaño en píxeles. En la práctica, 1200 × 630, una relación 1.91:1, se muestra como una tarjeta a todo el ancho en casi todas las plataformas, y el 1200 × 627 de LinkedIn está tan cerca que la misma imagen sirve. Usa ese tamaño y exporta en JPEG o PNG de menos de unos pocos megas para que cargue rápido cuando la app la descargue.

Deja una zona segura

Cada app recorta la imagen de forma algo distinta, y algunas la muestran más pequeña, como miniatura. Para que se lea bien en todas:

Deja el texto y el dispositivo al menos a 60 u 80 píxeles de cada borde.
Pon lo importante en los dos tercios centrales.
Usa letra grande: un titular de cinco palabras o menos, de al menos 60 píxeles de alto.
No repitas el título de la página en la imagen. La tarjeta ya muestra el título debajo.

Las etiquetas que hay que añadir

Ponlas en el <head> de cada página. El protocolo Open Graph marca como obligatorias og:title, og:type, og:image y og:url, y pide og:image:alt siempre que definas una imagen.

Etiqueta	Valor de ejemplo
`og:title`	TuApp – Sigue tus hábitos
`og:description`	Una frase sobre lo que hace la app.
`og:type`	website
`og:url`	https://yourapp.com/
`og:image`	https://yourapp.com/og.jpg (una URL completa, no una ruta relativa)
`og:image:width` / `og:image:height`	1200 / 630
`og:image:alt`	La pantalla de inicio de la app en un iPhone, sobre un fondo azul.
`twitter:card`	summary_large_image

En HTML queda así:

<meta property="og:image" content="https://yourapp.com/og.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="The app's home screen on an iPhone">
<meta name="twitter:card" content="summary_large_image">

X lee las etiquetas Open Graph para el título, la descripción y la imagen cuando faltan sus propias versiones twitter:, así que twitter:card suele ser la única etiqueta específica de X que necesitas. Sin ella, X puede mostrar una tarjeta pequeña o ninguna.

Una imagen por página

Tu página de inicio lleva la imagen principal. Las demás páginas pueden tener la suya:

Páginas de funciones: la pantalla de esa función, enmarcada.
Artículos y guías: el título del artículo sobre el fondo de tu marca, o la captura de la que trata.
Registro de cambios o notas de versión: la pantalla nueva de esa versión.

Una imagen propia de cada página hace que un enlace compartido parezca hecho para esa conversación, y consigue más clics que la misma tarjeta con el logo en todas las páginas.

Prueba la vista previa

Las apps guardan en caché las vistas previas, a veces durante días, así que prueba antes de compartir un enlace a lo grande.

Abre la URL de la imagen en un navegador. Si no carga de forma pública, ninguna app la mostrará.
El Depurador de contenido compartido de Facebook muestra lo que Facebook lee de tu página, y su botón para volver a extraer actualiza una vista previa guardada en caché.
El Post Inspector de LinkedIn hace lo mismo para LinkedIn.
X: pega el enlace en una publicación nueva sin enviarla. El editor muestra la tarjeta que usará X.
Mensajes y Slack: envíate el enlace a ti mismo.

Si sigue saliendo una imagen antigua, cambia el nombre del archivo de la imagen (por ejemplo og-2.jpg) y actualiza la etiqueta. Una URL nueva se salta casi todas las cachés.

Errores habituales

Una ruta relativa a la imagen. /og.jpg funciona en un navegador pero no en una tarjeta de vista previa. Usa la URL completa con https://.
Una imagen bloqueada para los rastreadores. Si tu robots.txt o una página de inicio de sesión bloquea la imagen, las apps no pueden descargarla.
Texto pequeño. En un chat la tarjeta puede mostrarse a un tercio de su tamaño. Todo lo que mida menos de unos 40 píxeles de alto en el original se vuelve ilegible.
Una captura de teléfono alta sola. Recortada a 1.91:1, una captura de teléfono muestra un trozo de la barra de estado y poco más. Colócala en un lienzo ancho.

Hazla con un dispositivo enmarcado

Para una app, la imagen Open Graph más eficaz suele ser la propia app: tu mejor pantalla en un marco de dispositivo, sobre el color de tu marca, con un titular corto. Como 1.91:1 es ancho, un solo teléfono en el centro deja mucho espacio. Úsalo para un titular junto al teléfono, o muestra dos o tres pantallas en fila.

FeatureFrame tiene un lienzo predefinido 1.91:1. En un Mac:

Suelta tu captura. FeatureFrame reconoce el iPhone o iPad por su tamaño y la enmarca en un modelo 3D de ese dispositivo.
Elige el lienzo 1.91:1 y, como fondo, un color sólido, un degradado o tu propia imagen.
Inclina un poco el dispositivo, o añade hasta tres capturas con la disposición Fila.
Exporta a 720p en JPEG. Un lienzo 1.91:1 sale a 1376 × 720, con el mismo formato que 1200 × 630 y algo más nítido. Úsalo tal cual o redimensiónalo al tamaño exacto.

Deja el titular para una herramienta de diseño o la plantilla de tu web si lo necesitas; el dispositivo enmarcado es la parte difícil de hacer a mano.

Usa la misma imagen como imagen principal de tus publicaciones de lanzamiento: consulta la checklist de imágenes para el lanzamiento. Para los demás tamaños que necesitarás, consulta tamaños de imagen para compartir capturas de apps, y para marcos de dispositivo sueltos, la biblioteca de marcos de dispositivos.