FeatureImg
Iniciar sesión

Generador de imágenes OG

Crea una imagen Open Graph 1200×630 para vistas previas de enlaces—sin software de diseño ni cuenta. Elige una plantilla, edita el título, exporta PNG o JPEG (prueba WebP antes de usarlo como og:image) y define og:image en tu página.

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 o JPEG, 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.
  • Prefiere PNG o JPEG para og:image (Meta indica JPEG, GIF y PNG para og:image:type). Prueba WebP antes de depender de él y define og:image y twitter:image con la URL pública final.
  • 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. Include width, height, and alt so crawlers can render the card reliably. Prefer PNG or JPEG for the widest link-preview compatibility; test WebP before using it as og:image.

<!-- 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:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Open Graph image" />
<meta property="og:image:type" content="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

Guías relacionadas

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.

Crear tu imagen OG