Diseño de miniaturas OGP 2025 — Legible, ligero, bien encuadrado

Introducción

En OGP importan tres cosas: que no se recorte, que se lea y que pese poco. Si mantienes constantes tipografía, cantidad de texto, márgenes y relación de aspecto, absorberás las particularidades de cada plataforma. Esta guía resume prácticas seguras para 2025 usando Creador de miniaturas OGP. Para SEO y datos estructurados, consulta SEO de imágenes 2025 — Alt, datos estructurados y sitemaps en la práctica.

TL;DR

• Relación base: 1200×630 (1.91:1). Composición centrada y contenido crítico dentro del 60% central.
• Tamaño mínimo de texto: aprox. 40–48 px para japonés/glifos complejos; limita el titular a 2 líneas.
• Márgenes seguros: al menos 8–10% en cada lado para mitigar recortes dinámicos.
• Formatos: fotos en WebP/AVIF; UI/logos en PNG o WebP sin pérdida. Objetivo 200–400 KB.

Especificaciones (base práctica)

• Tamaño base: 1200×630 px (dentro del rango recomendado por Open Graph)
• Alternativa: 1200×628 px (absorbe variaciones entre plataformas)
• Área segura: 10% por borde (mínimo 8%); texto dentro del rectángulo central del 60%
• Fotografía de fondo: coloca caras/logos y elementos clave dentro del 50% central
• Color: relación de contraste ≥ 7:1 (referencia WCAG AAA)
• Peso: 200–400 KB (OGP estático); hasta ~500 KB si se genera dinámicamente
• Formato: prioriza WebP (equilibrio compatibilidad/tamaño), prueba AVIF si mantiene calidad

El recorte automático varía ligeramente cada año. Con un margen seguro del 10% por lado, evitarás fallos en la mayoría de previsualizaciones.

Patrón de diseño

Separa 1) título, 2) subtítulo/descripción y 3) área de marca. Mantén los elementos clave dentro del 60% central. Usa espacios y altura de línea generosos para asegurar legibilidad en previsualizaciones estrechas.

Tipografía y legibilidad

Para japonés, una sans limpia (gótica) es la opción segura. Ajusta el tracking según el ancho disponible y considera diferencias de glifos al localizar. Para validar rápido la legibilidad, ayuda un control deslizante comparativo (consulta Comparador).

Generación y optimización de imagen

Crea la imagen base con Creador de miniaturas OGP y comprime la salida final a 200–400 KB con Compresor de imágenes. Sigue la guía de color/contraste en Gestión de color correcta y estrategia ICC 2025 — Guía práctica para colores web consistentes.

Flujo automatizado (Node.js/sharp)

Ejemplo mínimo para generar OGP desde una plantilla durante el despliegue.

// scripts/build-ogp.mjs
import sharp from 'sharp'
import fs from 'node:fs/promises'
import path from 'node:path'

const WIDTH = 1200, HEIGHT = 630
const OUT = 'public/ogp'
await fs.mkdir(OUT, { recursive: true })

const entries = [
  { slug: 'ogp-thumbnail-design-2025', title: 'Diseño de miniaturas OGP 2025', brand: 'Unified Image Tools' },
]

const base = sharp({ create: { width: WIDTH, height: HEIGHT, channels: 4, background: '#0b0f15' } })
for (const e of entries) {
  const svg = `<svg width="${WIDTH}" height="${HEIGHT}" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="100%" height="100%" fill="#0b0f15"/>
    <rect x="${WIDTH*0.1}" y="${HEIGHT*0.1}" width="${WIDTH*0.8}" height="${HEIGHT*0.8}" fill="none"/>
    <text x="50%" y="45%" font-size="72" text-anchor="middle" fill="#fff" font-family="'Inter','Noto Sans JP',sans-serif">${e.title}</text>
    <text x="50%" y="65%" font-size="36" text-anchor="middle" fill="#9aa4b2" font-family="'Inter','Noto Sans JP',sans-serif">${e.brand}</text>
  </svg>`
  const img = await base
    .composite([{ input: Buffer.from(svg) }])
    .webp({ quality: 82 })
    .toBuffer()
  await fs.writeFile(path.join(OUT, `${e.slug}.webp`), img)
}

Notas:

• En producción, usa plantilla SVG con variables
• Parte de WebP q≈80 y ajusta tras revisar franjas/banding
• Ajusta tracking/interlineado antes de rasterizar; intenta 2 líneas como máximo

Errores comunes

• Corte en bordes: márgenes inseguros; fíjalos en la plantilla
• Texto ilegible: tamaño mínimo o contraste insuficiente
• Archivo pesado: sin resize o con exceso decorativo; primero aplica Arquitectura de redimensionamiento en 2025 — Reducir un 30–70% el desperdicio partiendo del layout

Integración con Next.js (metadatos)

Suministra OGP de forma estable desde app/[locale]/layout.tsx (ejemplo conceptual).

// export const generateMetadata = async (): Promise<Metadata> => ({
//   openGraph: {
//     type: 'article',
//     images: [
//       { url: `/ogp/ogp-thumbnail-design-2025.webp`, width: 1200, height: 630, alt: 'Diseño de miniaturas OGP 2025' }
//     ],
//   },
//   twitter: {
//     card: 'summary_large_image',
//     images: ['/ogp/ogp-thumbnail-design-2025.webp']
//   }
// })

Notas importantes:

• Prefiere URLs absolutas para evitar fallos al compartir externamente
• Usa summary_large_image para maximizar visibilidad
• En sitios multilingües, cambia la OGP por idioma y mantenla alineada con hreflang

Recetas CLI (cwebp/avifenc)

cwebp input.png -q 82 -m 6 -mt -o ogp.webp
avifenc --min 26 --max 32 --speed 6 input.png ogp.avif

Detectar artefactos:

• Trazos finos japoneses desaparecen → sube calidad o cambia a WebP
• Banding en degradados planos → añade leve ruido o relaja parámetros de AVIF

Lista de verificación (antes de publicar)

• 1200×630 o 1200×628; relación 1.91:1
• Título/logo/rostros dentro del 10% de área segura
• Tamaño de texto ≥ 40–48 px, titular ≤ 2 líneas
• Contraste ≥ 7:1; difumina o enmascara fondos ruidosos
• 200–400 KB (dinámico ≤ ~500 KB)
• Revisión visual WebP/AVIF (franjas/dientes de sierra/banding)
• Verifica Open Graph y Twitter Card en la página real
• Comprueba en dispositivos y plataformas principales que no se recorte

Resumen

Estandariza con plantillas y salidas ligeras. Mantén un flujo único de creación a exportación para evitar retrabajos.