FeatureImg

Generador de imágenes OG

Crea una imagen Open Graph 1200×630 para vistas previas de enlaces en blogs, landing pages y lanzamientos de producto.

Tamaño de exportación recomendado

1200×630 px

Plantillas recomendadas

Cada una se abre en el editor con este formato aplicado. Ver todas las plantillas

Cómo funciona

  1. Abre el generador de imágenes OG con el formato Open Graph fijado en 1200×630.
  2. Elige una plantilla que encaje con la página que vas a compartir (layouts centrados en texto o divididos).
  3. Edita el título y el subtítulo, y ajusta el fondo, el contraste y las imágenes opcionales.
  4. Exporta PNG, JPEG o WebP, sube el archivo a tu sitio y define og:image con esa URL.

Buenas prácticas

  • Apunta a unos 1200×630 px, el tamaño habitual para vistas previas enriquecidas de enlaces.
  • Mantén el titular lo bastante corto para leerse en miniatura en feeds y chats.
  • Usa contraste fuerte; las plataformas suelen recomprimir las imágenes con fuerza.
  • Pon las palabras clave en la primera mitad del título por si se recortan los bordes.
  • Reutiliza una misma familia de layouts en tus publicaciones para que los shares se sientan de marca.
  • Tras subir el archivo, define og:image (y twitter:image) con la URL pública final, no con una ruta local.
  • Vuelve a comprobar la vista previa en Slack o LinkedIn tras cambiar la imagen; algunas cachés conservan la tarjeta antigua hasta actualizarse.

Implement Open Graph images in your website

After you generate an OG image, upload the file to a public path on your site and set og:image (and usually twitter:image) to that URL. Link previews then show your title, description, and graphic across social platforms and messengers.

<!-- Basic Open Graph tags -->
<meta property="og:title" content="Your page title" />
<meta property="og:description" content="Your page description" />
<meta property="og:image" content="https://yourdomain.com/og-image.png" />
<meta property="og:url" content="https://yourdomain.com/page" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yourdomain.com/og-image.png" />

Preguntas frecuentes

Aprende más sobre tamaños, buenas prácticas y formas de crear mejores imágenes para este formato.

Crea tu próxima imagen destacada

Empieza con un formato, elige una plantilla y exporta una imagen limpia en minutos.