Generador de tarjetas sociales (imagen Open Graph)
Diseña una imagen Open Graph de 1200×630 con tu título, descripción y nombre del sitio sobre un degradado, descarga el PNG y copia las etiquetas meta og: y de Twitter.
Las redes sociales necesitan una URL absoluta https://.
¿Qué es Generador de tarjetas sociales?
Cuando se comparte un enlace en Facebook, LinkedIn, X/Twitter, Slack o Discord, la plataforma muestra la imagen Open Graph de la página. Esta herramienta crea esa imagen con el tamaño recomendado de 1200 × 630 px a partir de tu Título, Descripción y Nombre del sitio o dominio sobre un degradado de color, y escribe las etiquetas meta og: y twitter: correspondientes.
Cómo usar Generador de tarjetas sociales
- Escribe el Título, la Descripción y el Nombre del sitio o dominio.
- Elige un Tema o define tú mismo el degradado y los colores del texto.
- Haz clic en Descargar PNG y sube la imagen a tu sitio.
- Introduce la URL de la página y la URL de la imagen (donde subirás el PNG), y copia las Etiquetas meta de Open Graph y Twitter en el
<head>de tu página.
Ejemplo
Título: Hello OG
<meta property="og:title" content="Hello OG"> … <meta name="twitter:card" content="summary_large_image">
Además de una imagen PNG de 1200 × 630.
Cuándo usar Generador de tarjetas sociales
Úsalo para entradas de blog, lanzamientos de productos, páginas de documentación y cualquier página que esperes que se comparta. Para miles de páginas, genera las imágenes automáticamente durante el build. Las redes sociales guardan en caché las vistas previas, así que después de cambiar una imagen usa sus herramientas de depuración (Facebook Sharing Debugger, LinkedIn Post Inspector) para actualizarla.
Cómo funciona Generador de tarjetas sociales
La tarjeta se dibuja en un canvas de 1200×630: un fondo con degradado lineal en diagonal, el nombre del sitio arriba, el título en negrita (el tamaño de fuente baja de 72 px hasta 40 px hasta que cabe en tres líneas, con ajuste de palabras voraz y corte por caracteres en escrituras sin espacios) y hasta dos líneas de descripción. El texto de derecha a izquierda, como el árabe, se alinea a la derecha automáticamente. Las etiquetas meta incluyen og:title, og:description, og:url, og:image con ancho y alto, y twitter:card con el valor summary_large_image, con todos los valores escapados para HTML.
Casos de Uso Comunes
- Crear una imagen para compartir una nueva entrada de blog
- Hacer tarjetas de vista previa coherentes para páginas de documentación
- Anunciar el lanzamiento de un producto en LinkedIn y X
- Generar las etiquetas meta og:image de una landing page
Preguntas Frecuentes
¿Qué tamaño debe tener una imagen Open Graph?
1200 × 630 píxeles (aprox. 1,91:1) es el tamaño recomendado para las tarjetas grandes de Facebook, LinkedIn y X.
¿Por qué la URL de la imagen debe ser absoluta?
Las redes sociales descargan la imagen desde sus propios servidores, así que og:image debe ser una URL https:// completa, no una ruta relativa.
Mi nueva imagen no aparece cuando comparto el enlace
Las plataformas guardan en caché las vistas previas. Vuelve a analizar la URL con el depurador de la plataforma o espera a que caduque la caché.