Durante el primer año llevando el blog de SEOJuice, no pensé en las imágenes Open Graph en absoluto. Publicábamos artículos, los compartíamos en LinkedIn y Twitter, y seguíamos con lo siguiente. Las vistas previas me parecían correctas — o eso creía, porque en realidad nunca revisé qué veían otras personas cuando pulsaban «compartir».
Luego un cliente me mandó una captura de pantalla de uno de nuestros artículos compartido en el Slack de su empresa. La vista previa mostraba nuestro logo de 50x50 píxeles, estirado en un rectángulo gris. El título salía cortado. Se veía mal. Ese artículo me había tomado dos días escribirlo, y la vista previa en redes sociales hacía que pareciera spam.
Me pasé un fin de semana agregando imágenes Open Graph personalizadas a nuestros 20 artículos principales. En un mes, el CTR desde redes sociales de esos artículos pasó de un promedio de 1.8% a 4.1%. Es una mejora de 2.3 veces por algo que, sinceramente, lleva unos 15 minutos por artículo. (Y sí, lo aclaro porque importa: estos son nuestros propios datos de analítica de LinkedIn y Twitter, no un estudio controlado. Tus resultados variarán según la audiencia y la plataforma.)
Open Graph es un protocolo que Facebook creó en 2010 para que puedas controlar cómo aparecen tus páginas cuando se comparten en redes sociales. La imagen Open Graph es la vista previa visual — la imagen grande que aparece en la tarjeta del enlace en Facebook, Twitter/X, LinkedIn, Slack, WhatsApp, Discord o cualquier plataforma que admita vistas previas de enlaces. Sin etiquetas Open Graph, las plataformas adivinan qué mostrar. Con ellas, diseñas el anuncio de tu contenido.
Todas las plataformas leen etiquetas Open Graph, pero las muestran de forma distinta. Lo aprendí por las malas cuando una vista previa que se veía perfecta en Facebook salió recortada en LinkedIn. Esta es la tabla de referencia que tengo guardada en marcadores:
| Plataforma | Tamaño recomendado | Relación de aspecto | Formato | Tamaño máximo de archivo | Notas |
|---|---|---|---|---|---|
| 1200 x 630 px | 1.91:1 | JPEG, PNG | 8 MB | No muestra imágenes por debajo de 200x200px. 600x315 es el mínimo para una tarjeta grande. | |
| Twitter / X | 1200 x 675 px | 1.78:1 (16:9) | JPEG, PNG, GIF, WebP | 5 MB | No muestra una tarjeta grande para imágenes por debajo de 300x157px. Usa twitter:image si está definido; si no, recurre a og:image. |
| 1200 x 627 px | 1.91:1 | JPEG, PNG | 5 MB | Mínimo estricto: 1200x627. Por debajo de eso, LinkedIn no muestra la imagen en absoluto. | |
| 1200 x 630 px | 1.91:1 | JPEG, PNG | 300 KB recomendados | Le cuesta procesar imágenes de más de 300KB en conexiones móviles lentas. Procura que pese menos de 200 KB para que se muestre bien de forma fiable. | |
| Slack | 1200 x 630 px | 1.91:1 | JPEG, PNG | 5 MB | Despliega automáticamente vistas previas de enlaces en los canales. |
| Discord | 1200 x 630 px | 1.91:1 | JPEG, PNG, GIF | 8 MB | Admite GIF animados en las vistas previas. |
| iMessage | 1200 x 630 px | 1.91:1 | JPEG, PNG | N/A | Usa etiquetas Open Graph para las vistas previas de enlaces en los chats. |
La relación de aspecto ligeramente más alta de Twitter (16:9 frente a 1.91:1) significa que tu imagen Open Graph de 1200x630 podría sufrir un recorte mínimo. En la práctica, yo nunca he notado una diferencia. No crees imágenes Open Graph distintas para cada plataforma salvo que estés lanzando una campaña importante donde cada píxel importe.
Hay algo que quiero remarcar porque me hizo perder tiempo: el mínimo de LinkedIn es realmente estricto. Si tu imagen mide 1199 píxeles de ancho, LinkedIn no muestra nada. No una versión más pequeña — nada. Perdí media hora depurando esto antes de medir las dimensiones reales de la imagen.
Las etiquetas Open Graph van dentro de la sección <head> de tu HTML. Este es el conjunto completo que necesitas en cada página:
<!-- Essential OG Tags -->
<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A compelling 1-2 sentence summary" />
<meta property="og:image" content="https://yoursite.com/images/og/page-name.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://yoursite.com/your-page/" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Your Site Name" />
<!-- Twitter-Specific (falls back to OG if not set) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourhandle" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="A compelling 1-2 sentence summary" />
<meta name="twitter:image" content="https://yoursite.com/images/og/page-name.jpg" />
Detalles técnicos importantes, la mayoría de los cuales me he equivocado al configurarlos al menos una vez:
og:image. Las rutas relativas fallan en la mayoría de las plataformas. Este fue, con diferencia, mi error más común cuando configuramos esto por primera vez.og:image:width y og:image:height ayudan a las plataformas a mostrar la vista previa más rápido sin descargar primero la imagen completa.twitter:card como summary_large_image para obtener la tarjeta con imagen de ancho completo. Sin esto, Twitter muestra una miniatura cuadrada diminuta. Se me pasó en nuestra primera implementación y no entendía por qué las vistas previas de Twitter se veían tan pequeñas.WordPress: Plugins como Yoast SEO, RankMath y SEOPress añaden campos de etiquetas Open Graph al editor de cada artículo y página. Subes la imagen, completas el título y la descripción, y el plugin genera las meta tags. Si estás en WordPress, este es el camino más simple.
Next.js / React: Usa el componente next/head o la Metadata API (App Router) para definir etiquetas Open Graph por página. Si estás construyendo con App Router, exportar metadata hace que esto sea bastante directo.
Sitios estáticos: Agrega las meta tags directamente a tu plantilla HTML. La mayoría de los generadores de sitios estáticos (Hugo, Eleventy, Jekyll) admiten variables en front matter que rellenan las etiquetas Open Graph automáticamente.
Una imagen Open Graph técnicamente correcta pero visualmente mala es peor que no tener imagen. He iterado nuestra plantilla de imágenes Open Graph probablemente cinco veces, y esto es lo que he aprendido que funciona:
Cada plataforma recorta de forma ligeramente distinta. Mantén todo el contenido importante — texto, logos, elementos visuales clave — dentro del 80% central de la imagen. Eso significa dejar al menos 120px de aire desde cada borde en un lienzo de 1200x630. Aprendí esto después de que LinkedIn recortara la primera letra de un título en una de nuestras imágenes Open Graph.
Si tu imagen Open Graph incluye texto (y normalmente debería incluirlo — el título del artículo o de la página), hazlo grande. Al menos 48px en un lienzo de 1200px de ancho. Estas imágenes muchas veces se muestran a 300px de ancho en feeds móviles. Si no puedes leer el texto cuando la imagen mide 300px de ancho, es demasiado pequeño. Yo lo pruebo alejando el zoom en Figma hasta aproximadamente 25% — si todavía puedo leer el titular, va a funcionar.
Usa de forma consistente los colores, tipografías y la ubicación del logo de tu marca. Cuando alguien vea tu imagen Open Graph en un feed, debería reconocer que es tuya antes de leer el texto. Nosotros creamos una plantilla en Canva con nuestros colores de marca y la posición del logo, y la reutilizamos para cada artículo. Ahora nos toma unos 5 minutos por imagen.
Lo que no funciona: fotos de stock genéricas, tu logo solo sobre fondo blanco o una imagen que no tenga nada que ver con el contenido. He probado las tres. La gente sigue de largo cada vez.
Reviso etiquetas Open Graph como parte de cada auditoría web que hacemos en SEOJuice. Estos mismos problemas aparecen una y otra vez:
og:image explícito, las plataformas detectan automáticamente una imagen de tu página. El resultado suele ser tu logo a 100x100 píxeles o una imagen aleatoria de la barra lateral. Revisa tus páginas con nuestra herramienta de auditoría SEO — marca las etiquetas Open Graph que faltan.http://, no se mostrará.Prueba siempre tus etiquetas Open Graph antes y después de hacer cambios. Yo paso cada artículo por al menos dos de estas herramientas antes de publicarlo:
| Herramienta | Plataforma | URL | Notas |
|---|---|---|---|
| Facebook Sharing Debugger | developers.facebook.com/tools/debug/ |
También vacía la caché Open Graph de Facebook. Haz clic en "Scrape Again" después de actualizar las etiquetas. | |
| Twitter Card Validator | Twitter / X | cards-dev.twitter.com/validator |
Previsualiza cómo se mostrará tu tarjeta. También limpia la caché de Twitter. |
| LinkedIn Post Inspector | linkedin.com/post-inspector/ |
Sirve para revisar y limpiar la caché Open Graph de LinkedIn. | |
| OpenGraph.xyz | Multiplataforma | opengraph.xyz |
Previsualiza varias plataformas a la vez. También genera imágenes Open Graph. |
| Screenshot Generator | Creación | /tools/screenshot-generator/ | Genera automáticamente imágenes Open Graph con tu marca a partir de tus páginas. |
yoursite.com/page/?v=2. Quítalo una vez que la caché se actualice.
Quiero ser preciso aquí porque esto suele exagerarse: las imágenes Open Graph no afectan directamente los rankings en Google. Google no usa tu etiqueta og:image como señal de ranking. Punto.
Pero los efectos indirectos son reales, y los he visto de primera mano en nuestro propio contenido:
<img> estándar de tu página, tener una imagen Open Graph de alta calidad como respaldo no hace daño.Los datos de CTR en la industria son bastante convincentes: las páginas con imágenes de vista previa social optimizadas pueden ver hasta 70% más CTR desde plataformas sociales en comparación con páginas sin imagen o con miniaturas generadas automáticamente. Incluso las estimaciones conservadoras sitúan la mejora en 20%+ para páginas que pasan de no tener imagen Open Graph a tener una bien diseñada. Nuestros números están más o menos en la mitad de ese rango.
No. Una imagen Open Graph de 1200x630 funciona en ambas. Técnicamente Twitter prefiere 1200x675, pero la diferencia de 45 píxeles es invisible en la práctica. Solo crea imágenes específicas por plataforma si estás lanzando campañas pagadas en redes sociales donde cada detalle importa.
JPEG para fotografías e imágenes complejas (menor peso de archivo). PNG para gráficos con texto, logos o transparencia (bordes más nítidos). Para la mayoría de las imágenes Open Graph que combinan texto sobre un fondo, JPEG con calidad de 80-85% te da la mejor relación entre peso y calidad. Es lo que usamos para todas las nuestras.
Twitter admite WebP. Facebook y LinkedIn no lo hacen de forma fiable. Quédate con JPEG o PNG para máxima compatibilidad. Cuando todas las plataformas admitan WebP de forma estable, cambia — pero a marzo de 2026, todavía no estamos ahí.
Solo cuando el contenido cambie de forma significativa. Si actualizas un artículo y añades "Guía 2026" al título, actualiza también la imagen Open Graph para que coincida. No actualices imágenes Open Graph por hacerlo — tendrás que vaciar cachés en todas las plataformas y no vale la pena a menos que el contenido haya cambiado de verdad.
Revisa esto en orden: (1) ¿La URL es absoluta y usa HTTPS? (2) ¿La imagen realmente es accesible en esa URL? (3) ¿La imagen cumple con los tamaños mínimos? (4) ¿La caché de la plataforma está desactualizada? Usa las herramientas de depuración de arriba para diagnosticarlo. La causa más común, en mi experiencia, es usar una URL relativa en lugar de una absoluta.
Sí, para páginas de contenido (artículos de blog, artículos, guías). El título superpuesto sobre un fondo de marca es el formato de imagen Open Graph más efectivo. Para páginas de producto, funciona mejor una captura limpia del producto con tu logo. La única excepción: no pongas texto en imágenes donde el título ya aparece en la tarjeta del enlace — algunas plataformas muestran ambas cosas y se ve redundante.
no credit card required
No related articles found.