Respuesta directa
Ajusta imágenes para vistas previas de enlaces al lienzo inicial 1200×630 o a 1200×628. Recorta o añade márgenes localmente y revisa la vista previa en la plataforma de destino. Usa recortar para cubrir todo el marco 1.91:1 sin bordes, o ajustar con relleno en blanco, color personalizado o transparencia.
Cómo usar esta herramienta
Arrastra tu diseño de vista previa o cabecera
Selecciona hasta 20 imágenes JPG, PNG o WebP. La herramienta abre el lienzo 1200×630.
1200×630 / 1200×628
Ajusta imágenes para vistas previas de enlaces al lienzo inicial 1200×630 o a 1200×628. Recorta o añade márgenes localmente y revisa la vista previa en la plataforma de destino.
Configura recorte para llenar o ajuste con relleno
Usa el recorte para cubrir todo el marco 1.91:1 sin bordes, o ajustar con relleno en blanco, color personalizado o transparencia.
Descarga e incorpora las etiquetas meta og:image
Guarda la imagen optimizada y declara og:image, og:image:width y og:image:height en el HTML de tu sitio.
Tamaños y encuadre de imágenes Open Graph
Esta herramienta ofrece lienzos de 1200×630 y 1200×628 para imágenes de vista previa de enlaces. Sus proporciones son aproximadamente 1,91:1. Open Graph define metadatos de imagen, no un tamaño obligatorio universal. Comprueba cómo muestra la imagen la plataforma de destino.
Ejemplos prácticos
Recortar un banner 16:9 (1920×1080) a tarjeta Open Graph 1200×630
Entrada: Banner horizontal JPEG de 1920×1080 (proporción 16:9, 2.1 MB)
Salida: JPEG de 1200×630
El modo de recorte ajusta el ancho y descarta los extremos superior e inferior para encajar en 1200×630.
Ajustar un logotipo cuadrado (1000×1000) a 1200×630 con márgenes
Entrada: Logotipo PNG de 1000×1000 (proporción 1:1)
Salida: PNG de 1200×630 con logotipo centrado de 630×630 y laterales rellenos
El modo de relleno evita recortar el logotipo y completa los laterales con fondo blanco o de marca.
Generar tarjeta de enlace 1200×628 para redes sociales
Entrada: Ilustración PNG de 2400×1256 (proporción 1.91:1)
Salida: PNG o WebP de 1200×628 optimizado
Reduce la resolución manteniendo los detalles para acelerar la carga en redes sociales.
Limitaciones
- Las plataformas almacenan en caché las imágenes og:image; para renovarlas suele ser necesario usar sus herramientas de depuración de URL.
- El relleno transparente requiere formato PNG o WebP; en JPEG se solicitará un color de fondo sólido.
- Sin ampliar, Ajustar y rellenar mantiene las imágenes pequeñas a su tamaño original dentro del lienzo. Recortar se bloquea si el original o el recorte es demasiado pequeño. Activa la ampliación para agrandar; no recupera detalle perdido.
Preguntas frecuentes
¿Cuál es el tamaño recomendado para imágenes Open Graph?
Ajusta imágenes para vistas previas de enlaces al lienzo inicial 1200×630 o a 1200×628. Recorta o añade márgenes localmente y revisa la vista previa en la plataforma de destino.
¿Por qué incluir las etiquetas og:image:width y og:image:height?
og:image:width y og:image:height describen las dimensiones en píxeles. Informan a la plataforma que lee los metadatos, pero no garantizan una vista previa desde el primer envío.
¿Se verá mi imagen Open Graph igual en todas las redes sociales?
No. 1200×630 es un ajuste de esta herramienta. Cada plataforma controla la vista previa y puede recortar la imagen de otra forma; comprueba el resultado publicado.
¿Se suben mis imágenes a algún servidor?
No. Todo el procesamiento de redimensionado y recorte se realiza exclusivamente en tu navegador mediante HTML5 Canvas.
Referencias y normas autorizadas
- The Open Graph Protocol: image metadata ↗ — Defines og:image and optional image width and height; no mandatory pixel dimensions.
- W3C Portable Network Graphics (PNG) Specification (Third Edition) ↗ — PNG file format, including lossless encoding and alpha transparency; resizing can change pixel detail.
- MDN: CanvasRenderingContext2D.drawImage() ↗ — Source crop rectangles and destination dimensions.
- MDN: HTMLCanvasElement.toBlob() ↗ — Browser image export; JPEG and WebP quality can introduce compression loss.