Generador de imágenes Open Graph
Crea en menos de un minuto una imagen limpia y acorde a tu marca para compartir cualquier página en redes. Elige una plantilla, escribe tu título, añade un logo y un fondo, comprueba cómo se verá el enlace en las tarjetas sociales y las apps de chat, y luego descarga un PNG de 1200×630 y copia las metaetiquetas.
Última actualización:
Cómo se verá tu enlace
Cómo usar Generador de imágenes Open Graph
- Elige una plantilla de la fila de miniaturas en vivo.
- Escribe tu texto: el título (nombre de la página o publicación), un subtítulo opcional, tu sitio o dominio y una etiqueta pequeña como Blog o Guía.
- Dale estilo: elige una fuente, un color de acento y un fondo (degradado predefinido, color sólido o tu propia foto) y añade tu logo.
- Revisa las vistas previas debajo de la imagen para ver cómo se verá la tarjeta del enlace en los feeds sociales y las apps de chat, incluido el recorte cuadrado.
- Descarga el PNG (o JPG), súbelo a tu sitio y pega las metaetiquetas copiadas en el <head> de la página.
Tamaños de imagen Open Graph por plataforma
Una sola imagen de 1200 × 630 px funciona casi en todas partes. Las plataformas la reducen y algunas la recortan, así que mantén el texto dentro del área central y deja márgenes de unos 60-80 px.
| Dónde se comparte el enlace | Cómo se muestra la imagen | Consejo |
|---|---|---|
| Imagen 1.91:1 a todo el ancho sobre el título y el dominio | Se recomienda 1200 × 630; al menos 600 × 315 para el formato grande | |
| X (Twitter) | Tarjeta grande con esquinas redondeadas cuando twitter:card es summary_large_image | El título puede superponerse a la imagen, así que evita poner texto clave en la esquina inferior izquierda |
| Imagen 1.91:1 con el título debajo | Usa og:image; vuelve a comprobarlo con el Post Inspector tras los cambios | |
| Slack, Discord, Teams | Vista previa más pequeña con la imagen debajo de la descripción | El texto debe seguir siendo legible cuando la imagen solo mide ~300-400 px de ancho |
| WhatsApp, iMessage, Telegram | A menudo una miniatura pequeña o cuadrada | Coloca el logo o la palabra clave cerca del centro para que sobreviva a un recorte cuadrado |
Las metaetiquetas que necesitas
Las redes sociales leen las etiquetas del protocolo Open Graph en el <head> de tu página. Las esenciales son og:title, og:description, og:image y, para X, twitter:card. Usa siempre una URL https absoluta para la imagen y añade og:image:width y og:image:height para que la vista previa aparezca desde la primera vez que se comparte, antes de que se descargue la imagen.
<meta property="og:image" content="https://example.com/og/my-post.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta name="twitter:card" content="summary_large_image">
Consejos de diseño para imágenes que consiguen clics
- Títulos cortos y grandes. En un feed, la imagen suele medir 500 px de ancho o menos. De seis a diez palabras en tamaño grande funcionan mejor que una frase completa en letra pequeña.
- Alto contraste. El texto claro sobre un degradado oscuro (o al revés) sigue siendo legible en teléfonos y en apps con modo oscuro.
- Marca coherente. Usa la misma plantilla, color de acento y logo en cada publicación para que los lectores reconozcan tus enlaces.
- No lo repitas todo. La plataforma ya muestra el título de la página debajo de la imagen, así que la imagen puede llevar el titular más tu marca, no toda la descripción.
- Evita la caché. Cuando actualices una imagen, cambia el nombre del archivo (por ejemplo
post-v2.png) para que las redes obtengan la nueva versión.
Preguntas frecuentes
¿Qué tamaño debe tener una imagen Open Graph?
Usa 1200 × 630 píxeles, una relación de aspecto de 1.91:1. Es el tamaño que Facebook y LinkedIn recomiendan para las vistas previas de enlaces, y X (Twitter) lo muestra bien como tarjeta summary_large_image. Las imágenes de menos de 600 × 315 pueden mostrarse como una miniatura pequeña en lugar de una tarjeta grande.
¿Qué formato de archivo es mejor para og:image?
PNG mantiene el texto y los logos perfectamente nítidos y es ideal para diseños gráficos como estos. JPG pesa menos y es mejor cuando el fondo es una foto. Mantén el archivo muy por debajo de 5 MB; un diseño típico de esta herramienta ocupa 50-400 KB.
¿Cómo añado la imagen a mi sitio web?
Sube el archivo descargado a tu sitio y añade metaetiquetas como <meta property="og:image" content="https://example.com/og-image.png"> más og:image:width, og:image:height y twitter:card = summary_large_image dentro del head de la página. La herramienta genera estas etiquetas por ti; sustituye la URL de la imagen por la dirección real del archivo subido. Usa una URL https absoluta.
¿Por qué se corta parte de mi imagen en algunas apps?
La mayoría de los feeds muestran la imagen completa de 1.91:1, pero algunas apps de chat y diseños compactos la recortan a un cuadrado o a un rectángulo más pequeño desde el centro. Mantén el texto y los logos importantes lejos de los bordes; la vista previa del recorte cuadrado muestra lo que sobrevive a un recorte central.
¿Por qué no aparece la nueva imagen cuando comparto mi enlace?
Las redes sociales guardan en caché las vistas previas de los enlaces. Después de cambiar og:image, usa el depurador de enlaces o el inspector de publicaciones de la plataforma para volver a leer la URL, o da a la imagen un nombre de archivo nuevo para que cambie la URL.
¿Se sube algo a un servidor?
No. La imagen se dibuja con la API Canvas en tu navegador. Tu logo y tus fotos de fondo nunca salen de tu dispositivo.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.