Tamaño de exportación recomendado
1200×630 px
Cómo funciona
- Abre el generador de imágenes OG con el formato Open Graph fijado en 1200×630.
- Elige una plantilla que encaje con la página que vas a compartir (layouts centrados en texto o divididos).
- Edita el título y el subtítulo, y ajusta el fondo, el contraste y las imágenes opcionales.
- 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.
Implementa imágenes Open Graph en tu sitio web
Después de generar la imagen OG, súbela a una ruta pública de tu sitio y apunta og:image (y normalmente twitter:image) a esa URL. Incluye width, height y alt para que los rastreadores rendericen la tarjeta de forma fiable. Prefiere PNG o JPEG para la máxima compatibilidad de vistas previas; prueba WebP antes de usarlo como 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.
- Tool workflow
Best Open Graph Image Generators Compared (2026)
Compare Open Graph image generators for social previews. See how FeatureImg, OpenGraph.xyz, and Bannerbear differ on templates, editing, export, and workflow.
- How-to guides
How to Create an Open Graph Image
Learn how to create an Open Graph image for blog posts, landing pages, product launches, and social shares. Use templates to design a clean link preview image online.
- Design ideas
Open Graph Image Examples
Explore Open Graph image examples for blog posts, landing pages, product launches, and social shares. Learn what makes a better link preview image.
Crea tu próxima imagen destacada
Empieza con un formato, elige una plantilla y exporta una imagen limpia en minutos.