Redimensionador de Imágenes OG en Línea
Crea imágenes de Open Graph perfectamente dimensionadas para Facebook, Twitter/X, LinkedIn y Discord. Cambia el tamaño y recorta a 1200×630 o a cualquier tamaño de plataforma. Gratuito, sin registro.
Arrastra tu archivo aquíToca para elegir tu archivo
o
Supports M4A, WAV, FLAC, OGG, AAC, WMA, AIFF, OPUS • Max 100 MB
Cómo Crear una Imagen OG
Sube o Captura
Arrastra tu imagen a la herramienta — una captura de pantalla, foto o gráfico. O ingresa la URL de un sitio web para capturar automáticamente una captura de pantalla de cualquier página web.
Elige el Tamaño
Elige un ajuste preestablecido de plataforma — Facebook 1200×630, Twitter 1200×628, LinkedIn o Discord. La imagen se recorta en el centro para encajar exactamente con las dimensiones.
Descarga
Haz clic en Redimensiona y Descarga y obtén tu imagen OG lista para usar. Súbela a tu sitio y haz referencia a ella en tus etiquetas <meta>.
Tamaños de Imágenes OG para Cada Plataforma (2026)
Cada plataforma tiene sus propias dimensiones recomendadas para imágenes de vista previa de enlaces. Usar el tamaño incorrecto resulta en recortes, borrosidad o que la imagen no aparezca en absoluto.
| Plataforma | Uso | Tamaño (px) | Relación | Tamaño Mín | Archivo Máx |
|---|---|---|---|---|---|
| Compartir Enlace / og:image | 1200 × 630 | 1.91:1 | 600 × 315 | 8 MB | |
| Twitter / X | summary_large_image | 1200 × 628 | ~1.91:1 | 300 × 157 | 5 MB |
| Twitter / X | summary (cuadrado) | 800 × 800 | 1:1 | 144 × 144 | 5 MB |
| Enlace Compartido | 1200 × 627 | 1.91:1 | 200 × 200 | 5 MB | |
| Discord | Vista Previa de Inserción | 1200 × 630 | 1.91:1 | — | 8 MB |
| Slack | Vista Previa Desplegada | 1200 × 630 | 1.91:1 | — | — |
| Vista Previa de Enlace | 1200 × 630 | 1.91:1 | 300 × 200 | — | |
| Telegram | Vista Previa de Enlace | 1200 × 630 | 1.91:1 | — | 5 MB |
| Pin Enriquecido | 1200 × 630 | 1.91:1 | — | — | |
| Fragmento de Búsqueda | 1200 × 630 | 1.91:1 | 1200 ancho | — |
Consejo profesional: 1200 × 630 píxeles funciona en todas las plataformas. Si solo creas una imagen OG por página, usa este tamaño. Para tarjetas de resumen de Twitter específicamente, añade una imagen cuadrada separada de 800×800 a través de twitter:image.
¿Qué es og:image? (Etiquetas de Meta Open Graph)
og:image es una etiqueta de meta de Open Graph que le indica a las plataformas sociales qué imagen mostrar cuando alguien comparte un enlace a tu página. Sin ella, las plataformas intentan detectar automáticamente una imagen — a menudo eligiendo la incorrecta, usando un logo diminuto o no mostrando nada en absoluto.
Cómo Funciona Open Graph
Facebook creó el protocolo Open Graph en 2010. Cuando se comparte una URL en redes sociales, el rastreador de la plataforma obtiene la página y lee las etiquetas <meta property="og:..."> del <head>. La etiqueta og:image especifica la URL de la imagen de vista previa.
Hoy, casi todas las plataformas soportan Open Graph: Facebook, Twitter/X (con respaldo de twitter:image), LinkedIn, Discord, Slack, WhatsApp, Telegram, iMessage, Pinterest e incluso Google para resultados de búsqueda enriquecidos.
Etiquetas og:image Esenciales
| Tag | Purpose |
|---|---|
og:image | URL de la imagen de vista previa (requerido, debe ser una URL HTTPS absoluta) |
og:image:width | Ancho de la imagen en píxeles (acelera la representación — la plataforma no necesita descargar la imagen primero) |
og:image:height | Alto de la imagen en píxeles |
og:image:type | Tipo MIME: image/jpeg, image/png o image/webp |
og:image:alt | Texto alternativo para accesibilidad (lectores de pantalla, fallos de carga de imagen) |
Por Qué og:image es Importante para la CTR
Los enlaces con imágenes de vista previa adecuadas obtienen 2–3× mayores tasas de clics en redes sociales en comparación con enlaces sin imágenes. Una imagen OG faltante o rota hace que los enlaces compartidos se vean poco profesionales y reduce el engagement. Google también usa og:image para fragmentos de artículos en algunos resultados de búsqueda.
Cómo Agregar og:image a Tu Sitio Web
Etiquetas Meta HTML
Añade estas etiquetas dentro del <head> de tu página:
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:alt" content="Description of the image">
<!-- Also include these for complete previews -->
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your page description">
<meta property="og:url" content="https://example.com/page">Etiquetas de Tarjeta de Twitter
Twitter utiliza sus propias etiquetas de tarjeta pero retrocede a og:image si twitter:image está ausente:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/og-image.jpg">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Your page description">WordPress
Los complementos SEO como Yoast, Rank Math y All in One SEO manejan las etiquetas OG automáticamente. Establece el campo “Imagen Social” o “Imagen de Facebook” en el editor de publicaciones. Sube una imagen de 1200×630 específicamente para compartir — no confíes en la imagen destacada, que puede tener una relación de aspecto diferente.
Next.js (App Router)
// app/page.tsx
export const metadata = {
openGraph: {
title: 'Your Page Title',
description: 'Your page description',
images: [{
url: 'https://example.com/og-image.jpg',
width: 1200,
height: 630,
alt: 'Description of the image',
}],
},
twitter: {
card: 'summary_large_image',
images: ['https://example.com/og-image.jpg'],
},
};Verificar Tu Imagen OG
Después de añadir las etiquetas meta, prueba con estos depuradores de plataforma:
- Facebook: Sharing Debugger (developers.facebook.com/tools/debug/) — haz clic en “Scrape Again” para actualizar la caché
- Twitter: Card Validator (cards-dev.twitter.com/validator)
- LinkedIn: Post Inspector (linkedin.com/post-inspector/)
- General: opengraph.xyz — prueba todas las plataformas a la vez
Problemas Comunes de og:image (y Cómo Solucionarlos)
La Imagen No Aparece Cuando Se Comparte
Causas: falta la etiqueta meta og:image, la URL de la imagen devuelve 404, la imagen es demasiado pequeña (menos de 200×200) o tu robots.txt bloquea a los rastreadores de redes sociales. Solución: verifica que la URL de la imagen se cargue en un navegador, asegúrate de que sea una URL HTTPS absoluta y comprueba que tu servidor no bloquee el agente de usuario de la plataforma.
Aparece la Imagen Incorrecta
Las plataformas almacenan en caché las imágenes OG agresivamente (24+ horas). Después de actualizar tu og:image, usa la herramienta de depuración de la plataforma para forzar un re-rastreo. Para Facebook, abre el Sharing Debugger y haz clic en “Scrape Again”. También puedes añadir un parámetro que anule la caché a la URL: ?v=2.
La Imagen Se Recorta Mal
Las dimensiones de tu imagen no coinciden con la relación esperada por la plataforma. Solución: cambia el tamaño a 1200×630 y mantén el contenido importante (texto, logos, caras) dentro del centro 80% de la imagen. Diferentes plataformas recortan ligeramente diferente en los bordes.
La Imagen se Ve Borrosa
La imagen de origen es demasiado pequeña o está muy comprimida. Usa al menos 1200 píxeles de ancho. Para pantallas de retina, considera 2400×1260 (2x). Guarda como JPG con calidad 80+ o usa PNG para gráficos con texto nítido.
Funciona en Facebook pero No en Twitter
Twitter requiere que la etiqueta meta twitter:card esté presente. Sin ella, Twitter puede no mostrar ninguna imagen aunque og:image esté establecido. Añade <meta name="twitter:card" content="summary_large_image"> para habilitar tarjetas de imagen grande.
Lista de Verificación de Mejores Prácticas de og:image
og:image:width y og:image:height (acelera la representación)og:image:alt para accesibilidadPreguntas Frecuentes
og:image:width y og:image:height para que las plataformas puedan representar la vista previa más rápido sin descargar la imagen completa primero. og:image, la URL de la imagen devuelve un 404, la imagen es más pequeña que 600×315 píxeles, o tu robots.txt bloquea el rastreador de Facebook. Usa el Facebook Sharing Debugger (developers.facebook.com/tools/debug/) para diagnosticar el problema. Haz clic en “Scrape Again” para obligar a Facebook a volver a obtener tu página y limpiar la vista previa en caché. og:image no es un factor de clasificación directo de Google, las páginas con imágenes OG adecuadas obtienen 2–3× mayores tasas de clics cuando se comparten en redes sociales, impulsando más tráfico y señales de engagement. Google también usa og:image para fragmentos enriquecidos de artículos en algunos resultados de búsqueda. <head> de tu página: <meta property="og:image" content="https://yoursite.com/image.jpg">. También incluye og:image:width (1200) y og:image:height (630) para una representación más rápida. En WordPress, usa el campo de imagen social de Yoast o Rank Math. En Next.js, usa la exportación metadata en tu componente de página. API de OG Image Resizing
Ejecuta og image resizing mediante programación vía API REST — gratis, sin registro, respuestas JSON.
curl -X POST https://cleverutils.com/api/v1/tools/og-image-resizer \
-F "file=@your-file"