Generador de tarjetas para redes
Social Card Generator
Compone una imagen de 1200×630 con título, subtítulo, línea de marca y logo opcional sobre la plantilla que elijas, y escribe las etiquetas meta que la acompañan.
Compone una tarjeta para compartir de 1200 × 630 a partir de un título, un subtítulo, una línea de marca y un logotipo opcional, y emite las metaetiquetas para pegar junto a ella. El texto se dibuja directamente en un canvas con la fuente coreana del propio dispositivo, cortando el hangul por sílaba y el latino por palabra, y el título se encoge solo en lugar de desbordar.
Vista previa (1200 × 630)
Contenido
Suelta una imagen de logo (opcional)
Un PNG o SVG cuadrado es lo que mejor encaja. Si no pones ninguno, va un bloque del color de acento.
Aspecto
Etiquetas meta para la página
Por qué 1200 × 630, y sobre la fuente
Open Graph, X (summary_large_image), KakaoTalk y Slack recortan todos a algo cercano a 1,91:1, así que este tamaño es el que menos pierde. El texto se dibuja directamente en el canvas con la fuente coreana del propio dispositivo —Pretendard si está instalada, si no Apple SD Gothic Neo, Malgun Gothic o Noto Sans KR— y el hangul se parte por sílabas, que es la razón de que los mismos ajustes se vean algo distintos en otra máquina. Exportar a 2× da 2400 × 1260, que se mantiene nítido en una pantalla de alta resolución.
Para ver cómo se despliega la tarjeta de verdad, el depurador de vistas previas de enlaces va a buscar la página; y para una textura de fondo, el generador de patrones hace una.
Cómo se usa
Escribe el título como se leerá
Una tarjeta para compartir se lee a tamaño de miniatura en un muro, así que un título corto en letra grande gana a una frase completa en letra pequeña. La línea bajo la vista previa dice cuántas líneas ocupó y si el tamaño se redujo para que cupiera.
Añade la línea de marca y el pie
Se recuerdan entre visitas, porque son las partes que se mantienen iguales en todas las tarjetas que haces. El título y el subtítulo no.
Elige una plantilla y los dos colores
Degradado, sólido, dividido o contorno. El color de fondo y el acento hacen todo el trabajo; el conmutador de texto claro está ahí porque un fondo de tono medio puede ir en cualquiera de los dos sentidos y debería decidirlo el ojo, no un umbral.
Añade un logotipo si tienes uno cuadrado
Un PNG o SVG cuadrado encaja mejor. Sin uno, lo sustituye un bloque del color de acento, que a menudo basta a tamaño de miniatura.
Exporta el PNG y copia las metaetiquetas
Las etiquetas llevan el ancho y el alto además de la URL, que es lo que permite a un rastreador maquetar la tarjeta antes de que la imagen haya cargado. Cambia la URL de ejemplo por donde pongas realmente el archivo.
Preguntas frecuentes
¿Por qué 1200 × 630?
Porque Open Graph, el summary_large_image de X, KakaoTalk y Slack recortan todos a algo cercano a 1,91:1, y este tamaño es el que menos pierde en todos ellos. Hacerlo más grande no ayuda —todos los consumidores lo reescalan hacia abajo— y hacerlo más pequeño significa una tarjeta borrosa en una pantalla retina.
La tarjeta se ve un poco distinta en la máquina de mi colega.
El texto se dibuja con la fuente coreana que tenga ese dispositivo —Pretendard si está instalada, y si no Apple SD Gothic Neo, Malgun Gothic o Noto Sans KR—, así que los mismos ajustes producen letras y saltos de línea ligeramente distintos en máquinas distintas. El PNG exportado queda fijo una vez que lo descargas; solo la vista previa varía.
Mi título se hizo más pequeño solo.
Pasó de cuatro líneas al tamaño que fijaste, así que el tamaño se redujo hasta que cupo, y la línea bajo la vista previa lo dice. Un texto que desborda sería peor: se cortaría en silencio en la exportación. Acorta el título si quieres recuperar el tamaño grande.
¿Cómo compruebo que la tarjeta se muestra de verdad?
Sube primero el archivo a la URL de las metaetiquetas y luego usa la herramienta de vista previa de OG, que descarga la página y muestra lo que cada plataforma construirá a partir de sus etiquetas. Esta página solo dibuja la imagen: no puede saber si las etiquetas están en la página ni si la URL resuelve.
Puede recibir de
Depurador de vistas previas de enlaces
Link Preview Debugger
Lee las etiquetas de Open Graph y de tarjeta de Twitter de una URL y dibuja cómo se verá el enlace al compartirlo.
Generador de patrones de fondo
Background Pattern Generator
Genera patrones SVG que se repiten sin costura —rayas, puntos, cuadrículas, ruido— con control de color y escala.
Maquetas de dispositivo
Device Mockup
Coloca una captura dentro de un marco de teléfono, tableta, portátil o navegador, con fondo y sombra.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Maquetas de dispositivo
Device Mockup
Coloca una captura dentro de un marco de teléfono, tableta, portátil o navegador, con fondo y sombra.
Depurador de vistas previas de enlaces
Link Preview Debugger
Lee las etiquetas de Open Graph y de tarjeta de Twitter de una URL y dibuja cómo se verá el enlace al compartirlo.
Generador de patrones de fondo
Background Pattern Generator
Genera patrones SVG que se repiten sin costura —rayas, puntos, cuadrículas, ruido— con control de color y escala.
Compresor de PNG
PNG Compressor
Reduce la paleta de colores y reescribe el flujo comprimido para bajar el peso de un PNG sin cambiar sus dimensiones.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Calculadora de proporción
Aspect Ratio Calculator
Calcula la medida que falta para una proporción dada y enumera los tamaños estándar que coinciden.