Guía de vista previa social
Imágenes Open Graph: prueba el enlace antes de publicar
Las imágenes Open Graph deciden cómo se ve tu página cuando alguien comparte un enlace. Esta guía muestra tamaño práctico, etiquetas, comprobaciones de diseño, corrección de caché y lista para publicar que mantienen útiles las vistas previas.
Respuesta rápida
Elige una imagen Open Graph y prueba el enlace antes de compartir
Para la mayoría de páginas, empieza con una imagen 1200 x 630, mantén texto y logos alejados de los bordes, usa URLs absolutas HTTPS y prueba la URL final con herramientas de depuración. Este flujo simple evita la mayoría de vistas previas rotas.
Función de la vista previa
Trata la imagen Open Graph como un recurso de la página
Una imagen Open Graph no es decoración. Representa la página cuando los rastreadores crean una tarjeta de enlace para redes sociales, apps de chat y herramientas de trabajo. Debe coincidir con el título, descripción, tema visible y la imagen de datos estructurados.
Vende el clic
La imagen, el título y la descripción forman la primera impresión antes de que el visitante llegue a tu página.
Debe coincidir con el contenido
Una buena imagen de vista previa coincide con el título de la página, el tema visible y la promesa principal al usuario, en lugar de usar un gráfico genérico de la marca.
Pertenece a los datos SEO
Las imágenes Open Graph, Twitter cards, URLs canónicas e imágenes JSON-LD deben describir la misma página.
Necesita una regla de nombres
Un nombre de archivo claro y una regla de actualización evitan que cachés obsoletos y imágenes antiguas de campañas reaparezcan.
Plan de tamaño
Elige dimensiones que funcionen en vistas reales
Las plataformas recortan y almacenan en caché las vistas previas de forma distinta. Un archivo 1200 x 630 es un buen estándar para Open Graph, pero lo más seguro es diseñar con un área segura centrada y probar la URL final en las plataformas clave.
| Plataforma o uso | Plan práctico de imagen | Atento a | Comprobación antes de publicar |
|---|---|---|---|
| Open Graph general | Usa 1200 x 630 como valor práctico por defecto para una imagen grande para compartir. | Las imágenes pequeñas pueden verse borrosas o mostrarse como miniaturas más pequeñas. | Previsualiza la URL final en el depurador de la plataforma antes de compartir. |
| Facebook y LinkedIn | Usa la misma imagen estilo 1.91:1 salvo que la página necesite un recurso específico para la plataforma. | Los bordes pueden recortarse distinto según el diseño del feed y el dispositivo. | Mantén texto y logos importantes dentro del área segura central. |
| Tarjeta X grande | Usa summary_large_image y mantén el visual centrado; X soporta una imagen amplia para tarjeta grande. | El texto pequeño y detalles en los bordes pueden desaparecer al recortar o redimensionar la tarjeta. | Configura twitter:image y prueba con las herramientas de tarjetas X. |
| Apps de chat y herramientas de trabajo | Mantén el archivo pequeño y el diseño simple porque las vistas previas suelen aparecer en paneles compactos. | Capturas saturadas, titulares largos y bajo contraste se vuelven ilegibles rápido. | Pega el enlace final en las herramientas que usa tu audiencia. |
Mantén el mensaje principal en el centro de la imagen. Los bordes son zona de riesgo porque las tarjetas del feed, vistas previas de chat y diseños móviles pueden recortar distinto.
HTML
Configura las etiquetas que los rastreadores necesitan antes de publicar la página
Las etiquetas Open Graph deben ir en el head HTML. Usa URLs absolutas de imagen, declara ancho y alto, añade texto alt útil y mantén la URL canónica consistente con la que los usuarios compartirán.
<meta property="og:type" content="article">
<meta property="og:title" content="Your clear page title">
<meta property="og:description" content="A short description that matches the page.">
<meta property="og:url" content="https://example.com/guide/">
<meta property="og:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:secure_url" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Short description of the preview image">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta name="twitter:image:alt" content="Short description of the preview image">| Etiqueta | Por qué es importante | Error común |
|---|---|---|
| og:image | Indica a los rastreadores la imagen que debe representar la página. | Usar una ruta relativa o una imagen bloqueada por login, redirecciones o reglas robots. |
| og:image:width / og:image:height | Indica a las plataformas el tamaño de la imagen antes de que la descarguen e inspeccionen. | Omitir dimensiones y dejar que cada rastreador adivine cómo mostrar la vista previa. |
| og:image:alt | Describe la imagen de vista previa para accesibilidad y da más contexto a los rastreadores. | Repetir el título de la página en lugar de describir lo visible en la imagen. |
| og:url | Conecta la vista previa con la URL canónica que debe compartirse. | Usar una URL de seguimiento, staging o con cultura incorrecta como identidad permanente de la página. |
| twitter:card / twitter:image | Da a X una instrucción explícita para tarjeta grande y una imagen opcional específica para la plataforma. | Asumir que X siempre mostrará la imagen Open Graph igual que otras plataformas. |
Si usas Blazor, el Componente SEO Metadata para Blazor mantiene juntos las etiquetas Open Graph, Twitter cards, URLs canónicas y metadatos JSON-LD.
Reglas de diseño
Diseña primero para una tarjeta pequeña en el feed
La mayoría no verá la imagen completa. Ven una tarjeta comprimida en un feed, mensaje o panel de vista previa. Ganan los diseños simples: un sujeto claro, contraste legible y sin texto diminuto que solo funciona en el archivo de diseño.
Flujo de trabajo
Un flujo de trabajo sencillo para cada página importante
- 1
Escribe la promesa de la vista previa
Decide qué debe decir la tarjeta de un vistazo: tema, beneficio, producto o enfoque del artículo.
- 2
Crea la imagen con la proporción planificada
Usa 1200 x 630 para el archivo por defecto y mantén el contenido importante centrado.
- 3
Optimiza el archivo
Usa JPG o PNG para la imagen social, mantén el archivo razonablemente pequeño y evita daños visibles por compresión.
- 4
Configura metadatos y esquema
Actualiza juntas las etiquetas Open Graph, Twitter cards, URL canónica y referencias de imagen JSON-LD.
- 5
Publica con un nombre de archivo estable
Usa un nombre de archivo significativo y cámbialo al reemplazar la imagen si es probable que las cachés de la plataforma mantengan la versión antigua.
- 6
Prueba la URL final
Pasa la URL pública por las herramientas de depuración y revisa la vista previa real, no solo el código fuente.
Información emergente
Usa PixelPress tras decidir el tamaño de la vista previa
Cuando el plan de imagen nombra los archivos finales, PixelPress puede ayudar con la conversión local a WebP o AVIF. Mantén los originales intactos, revisa la salida y actualiza la URL Open Graph.
Depuración
Actualiza cachés de plataforma antes de confiar en la vista previa
Las plataformas sociales almacenan en caché datos de vista previa. Si reemplazas una imagen pero mantienes la misma URL, puede seguir mostrando la vista previa antigua. Usa las herramientas oficiales y, si es necesario, cambia el nombre del archivo o añade una URL versionada.
Lista de comprobación
Lista de comprobación de imagen Open Graph antes de publicar
Usa esta lista antes de publicar un artículo, página de producto, herramienta o landing. Detecta problemas de vista previa que son costosos de notar tras compartir el enlace.
Preguntas frecuentes
¿Qué tamaño debe tener una imagen Open Graph?
Usa 1200 x 630 como valor práctico por defecto para la mayoría de vistas previas Open Graph. Es suficientemente grande para pantallas de alta densidad y cercano a la proporción común 1.91:1. Aún así, prueba la URL final porque cada plataforma puede recortar o almacenar en caché distinto.
¿Puedo usar la misma imagen Open Graph para todas las páginas?
Puedes, pero suele ser menos efectivo. Una imagen genérica de marca es mejor que ninguna, pero artículos importantes, páginas de producto y herramientas deben tener una imagen de vista previa que coincida con la página específica.
¿Por qué sigue apareciendo mi imagen Open Graph antigua?
La razón más común es la caché de la plataforma. Usa Facebook Sharing Debugger, LinkedIn Post Inspector o herramientas de tarjetas X para actualizar la URL. Si el archivo antiguo sigue apareciendo, publica la nueva imagen con un nombre o URL versionada.
¿Cuál es la diferencia entre og:image y twitter:image?
og:image es la imagen estándar Open Graph usada por muchas plataformas. twitter:image es específica para tarjetas X. Si proporcionas twitter:image, X puede usar esa imagen en lugar de og:image.
¿Debe la imagen JSON-LD coincidir con la imagen Open Graph?
No tiene que ser idéntica, pero debe contar la misma historia de la página. Metadatos de búsqueda, etiquetas Open Graph, Twitter cards y JSON-LD no deben apuntar a imágenes no relacionadas o desactualizadas.
¿Dónde encaja PixelPress en las imágenes Open Graph?
PixelPress encaja tras decidir tamaño, nombre y función de la imagen. Ayuda a convertir archivos finales localmente sin tocar los originales. La página aún necesita metadatos correctos y pruebas de vista previa.