Indica la URL de la imagen que representa la página dentro de Open Graph. Es una de las propiedades principales que las plataformas usan para construir la vista previa visual del enlace.
Open Graph y meta tags sociales: cómo controlar la vista previa de tus enlaces
Actualizado hace 3 días
La vista previa que Facebook, LinkedIn, WhatsApp, X u otras aplicaciones muestran al compartir una URL se controla con las etiquetas Open Graph, que se colocan dentro del <head> de la página. En esta guía vas a encontrar qué etiquetas importan, cómo usarlas y cómo diagnosticar una vista previa que sale mal.
Qué son las meta tags Open Graph
Open Graph Protocol define metadatos que describen una página web como un objeto que otras plataformas pueden interpretar. La especificación oficial (https://ogp.me/) considera cuatro propiedades básicas:
og:title: el título que asociamos a la página.
og:type: el tipo de contenido, por ejemplo
websiteoarticle.og:image: la URL absoluta de la imagen representativa.
og:url: la URL canónica que identifica ese contenido.
Para una buena vista previa también conviene incluir og:description y og:site_name, además de información sobre dimensiones y texto alternativo de la imagen.
Ejemplo básico de Open Graph
Una página de artículo podría incluir algo similar a esto dentro de su <head>:
<meta property="og:type" content="article" />
<meta property="og:title" content="Guía de Open Graph para redes sociales" />
<meta property="og:description" content="Cómo configurar títulos, descripciones e imágenes al compartir una página." />
<meta property="og:url" content="https://ejemplo.com/guia-open-graph/" />
<meta property="og:site_name" content="Mi sitio" />
<meta property="og:image" content="https://ejemplo.com/social/guia-open-graph.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Guía de Open Graph para redes sociales" />Las URLs de og:url y og:image deben ser absolutas: https://ejemplo.com/imagen.jpg y no simplemente /imagen.jpg.
Para qué sirve cada propiedad
Propiedad | Función | Recomendación |
|---|---|---|
og:title | Título de la vista previa | Claro y específico para esa URL |
og:description | Resumen del contenido | Breve y descriptivo, sin depender del meta description de SEO |
og:image | Imagen principal al compartir | URL pública, HTTPS y suficientemente grande |
og:url | URL que identifica el objeto | Normalmente coincide con la canonical |
og:type | Tipo de contenido |
|
og:site_name | Nombre del sitio | Reforza la identidad de la fuente |
og:image:width / og:image:height | Dimensiones de la imagen | Permiten al crawler conocer el tamaño sin descargarla primero |
og:image:alt | Descripción de la imagen | Describir el contenido visual, no repetir palabras clave |
og:type: article o website
Para una homepage, una landing institucional o una página general, se utiliza website. Para un post del blog o contenido editorial, article:
<meta property="og:type" content="article" />Cuando usamos article, también podemos agregar propiedades específicas como:
<meta property="article:published_time" content="2026-09-24T10:00:00-03:00" />
<meta property="article:modified_time" content="2026-09-24T12:00:00-03:00" />Así se conserva por separado la fecha original de publicación y la última modificación.
og:image: la etiqueta que más problemas genera
Cuando una vista previa aparece sin imagen, con una imagen vieja o con un recorte extraño, empezá revisando og:image. La imagen debe:
tener una URL pública accesible sin iniciar sesión;
cargar mediante HTTPS;
devolver realmente un archivo de imagen con un código HTTP 200;
no estar bloqueada para crawlers;
tener dimensiones suficientes para una tarjeta grande;
mantener el texto y los logos importantes lejos de los bordes, porque cada plataforma recorta de manera diferente.
Como formato práctico entre plataformas, una imagen cercana a 1200 × 630 px y relación aproximada 1,91:1 funciona muy bien para la mayoría de las vistas previas grandes. LinkedIn, por ejemplo, recomienda 1200 × 627 px. La plataforma que recibe el enlace siempre conserva el control final sobre su presentación.
Facebook y Open Graph
Open Graph nació en Facebook y sigue siendo la base para describir cómo se presenta una URL compartida. Si Facebook muestra información vieja, una imagen anterior o datos inesperados, revisá el HTML que recibe su crawler y después usá el Sharing Debugger de Meta (https://developers.facebook.com/tools/debug/) para volver a solicitar la URL.
Un error frecuente es cambiar la imagen en WordPress y asumir que Facebook la actualizará de inmediato. Las plataformas guardan las vistas previas en caché, así que el contenido puede tardar en refrescarse incluso después de corregir el HTML.
WhatsApp: por qué aparece una imagen al pegar un enlace
WhatsApp genera automáticamente vistas previas de muchas URLs, y un conjunto correcto de etiquetas Open Graph es la base para que encuentre el título, la descripción y la imagen adecuados. No existe una etiqueta especial como whatsapp:image: conviene concentrarse en que og:title, og:description y especialmente og:image sean correctos y accesibles públicamente.
Si WhatsApp sigue mostrando una imagen antigua, puede tratarse de caché del servicio o del cliente. Antes de modificar nuevamente WordPress, verificá que el código fuente ya contenga la imagen correcta.
LinkedIn: Open Graph y Post Inspector
LinkedIn documenta el uso de og:title, og:image, og:description y og:url para generar las vistas previas de páginas compartidas, y para la imagen recomienda una relación de 1,91:1 y dimensiones mínimas de 1200 × 627 px en la presentación grande.
Si modificaste la imagen o los metadatos de una URL ya compartida, podés utilizar el LinkedIn Post Inspector (https://www.linkedin.com/post-inspector/). El refresco afecta a nuevas publicaciones: las vistas previas ya publicadas no se reescriben retroactivamente.
X: por qué las etiquetas todavía se llaman twitter:
Aunque Twitter pasó a llamarse X, las etiquetas de sus tarjetas siguen usando el prefijo twitter:. Para un artículo o landing con imagen grande, la configuración habitual es:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Guía de Open Graph para redes sociales" />
<meta name="twitter:description" content="Cómo controlar la vista previa de tus enlaces." />
<meta name="twitter:image" content="https://ejemplo.com/social/open-graph.jpg" />Si Open Graph ya está bien configurado, conviene usar el mismo título, descripción e imagen en ambas capas, salvo que exista un motivo editorial para diferenciarlas. No confundas la sintaxis: Open Graph utiliza property="og:...", mientras que las Twitter Cards utilizan name="twitter:...".
Pinterest y Rich Pins
Pinterest utiliza metadatos para sus Rich Pins y documenta tres tipos principales: artículos, productos y recetas. Para artículos y productos admite Open Graph y también datos estructurados Schema.org: un Article Pin puede aprovechar og:title, og:description, og:site_name y og:image. En una tienda WooCommerce, los datos estructurados de producto también importan porque precio, moneda y disponibilidad forman parte de lo que Pinterest puede interpretar.
Existen meta tags especiales para Instagram
No. No hace falta agregar un conjunto de "Instagram meta tags" para conseguir una tarjeta de enlace en el feed de Instagram, que no funciona como Facebook, LinkedIn o WhatsApp con enlaces arbitrarios en publicaciones normales. Algo como instagram:image no forma parte del estándar y no crea por sí solo una vista previa especial. Open Graph sigue siendo útil para tu sitio y para el ecosistema de Meta.
Open Graph no es lo mismo que Schema.org
Los dos describen información sobre una página, pero con objetivos diferentes y pueden coexistir:
Open Graph | Schema.org | |
|---|---|---|
Uso principal | Vistas previas al compartir contenido | Datos estructurados para buscadores y otros consumidores |
Formato habitual | Meta tags en el | JSON-LD, Microdata o RDFa |
Ejemplo |
|
|
Cómo configurar Open Graph en WordPress
En WordPress normalmente no hace falta escribir estas etiquetas a mano: un plugin SEO o de metadatos sociales puede generarlas dinámicamente a partir del título, la descripción, la URL y la imagen destacada de cada página.
Usá un único sistema responsable de Open Graph. Si el tema, un plugin SEO y otro plugin social generan a la vez og:image o og:title, el resultado son etiquetas duplicadas y vistas previas impredecibles.
Después de guardar los cambios, abrí el código fuente de la página publicada y buscá og:. Así comprobás exactamente qué recibe un crawler, independientemente de lo que muestre el editor de WordPress. Una imagen destacada de WordPress no garantiza por sí sola que exista un og:image correcto.
Cómo agregar Open Graph manualmente
Si desarrollás una aplicación o un tema propio, generá las etiquetas en el <head>. Un conjunto razonable para una página general sería:
<meta property="og:type" content="website" />
<meta property="og:title" content="Título de la página" />
<meta property="og:description" content="Descripción de la página." />
<meta property="og:url" content="https://ejemplo.com/pagina/" />
<meta property="og:site_name" content="Ejemplo" />
<meta property="og:image" content="https://ejemplo.com/social/pagina.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Descripción de la imagen" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Título de la página" />
<meta name="twitter:description" content="Descripción de la página." />
<meta name="twitter:image" content="https://ejemplo.com/social/pagina.jpg" />En WordPress no conviene pegar este ejemplo literalmente en todas las páginas, porque cada URL necesita sus propios valores: si los datos son dinámicos, también deberían serlo las etiquetas.
Cómo diagnosticar una vista previa incorrecta
Si una red social muestra mal tu enlace, revisá el problema en este orden:
Abrí el código fuente real de la página y buscá
og:title,og:imageyog:url.Comprobá duplicados: si aparecen dos
og:imageo dosog:titlegenerados por plugins diferentes, corregí primero eso.Abrí directamente la imagen: debe ser pública, cargar rápido y devolver HTTP 200.
Revisá HTTPS y redirecciones: evitá cadenas innecesarias o imágenes protegidas.
Verificá dimensiones: una imagen demasiado pequeña puede mostrarse como miniatura o directamente no ser elegida.
Vaciá tus propias cachés: WordPress, CDN y caché de página deben servir el HTML nuevo.
Solicitá un nuevo rastreo social con el Sharing Debugger de Meta o el Post Inspector de LinkedIn, cuando corresponda.
Recordá la caché externa: aunque tu sitio ya esté correcto, la aplicación que compartió el enlace puede conservar una versión anterior durante un tiempo.
Herramientas gratuitas para validar tus enlaces
El Sharing Debugger de Meta (https://developers.facebook.com/tools/debug/) sigue siendo el punto de partida para Open Graph: muestra exactamente lo que el crawler de Facebook obtuvo de tu página y permite forzar un nuevo rastreo después de corregir algo. Para ver la misma URL en varias plataformas a la vez, estas herramientas gratuitas complementan el trabajo:
Herramienta | Para qué sirve |
|---|---|
Previsualiza una URL tal como la mostrarían Google, Facebook, X, LinkedIn, Pinterest y Slack, y permite editar y generar el código de los meta tags. Recomienda imágenes de 1200 × 628 px. | |
Escanea cualquier URL y muestra exactamente cómo se ve su vista previa en redes sociales; además ofrece generar imágenes OG a partir de plantillas. | |
Revisa qué meta tags tiene la página, muestra la vista previa al compartir en redes y buscadores, y permite editar y exportar los tags listos para pegar en el sitio. | |
Valida los datos estructurados Schema.org de una URL o de un fragmento de código, la otra capa de metadatos que interpretan Pinterest y los buscadores. |
Las herramientas oficiales de cada red (el Debugger para Facebook y el Post Inspector para LinkedIn) son las que mejor reflejan lo que esa plataforma en particular ve de tu página.
Errores frecuentes
Utilizar una ruta relativa en
og:image.Configurar una imagen que requiere cookies, sesión o permisos.
Duplicar etiquetas desde dos plugins diferentes.
Confundir
nameconproperty.Usar
websiteen contenido editorial cuando correspondearticle.Dejar
og:urlapuntando a una URL distinta de la versión canónica deseada.Cambiar una imagen sin considerar que Facebook, LinkedIn o las aplicaciones de mensajería pueden haberla guardado en caché.
Preguntas frecuentes
¿Qué significa meta property="og:image"?
¿Qué es og:site_name?
Es el nombre general del sitio. Por ejemplo, en un artículo de Duplika el og:title puede ser el título específico del post y el og:site_name, simplemente, Duplika.
¿og:url debe ser igual a la canonical?
En la mayoría de los casos conviene que representen la misma URL principal del contenido. Open Graph utiliza og:url como identificador del objeto, mientras que la etiqueta canonical indica a los buscadores cuál es la versión canónica preferida.
¿Open Graph mejora el posicionamiento SEO?
No es un factor de ranking directo de Google. Su función principal es controlar cómo se describe una URL cuando otros servicios la interpretan y comparten. Una mejor presentación puede facilitar los clics, pero eso es distinto de afirmar que og:image mejore directamente una posición en Google.
¿Necesito Open Graph y Twitter Cards al mismo tiempo?
Es una configuración habitual. Open Graph cubre una base muy amplia de consumidores, y twitter:card indica explícitamente a X el tipo de tarjeta deseado. Podés reutilizar el mismo título, descripción e imagen para no mantener dos versiones innecesariamente.
Una buena vista previa empieza por metadatos simples y consistentes
No hacen falta docenas de etiquetas: en la mayoría de los sitios, una implementación consistente de og:title, og:description, og:image, og:url, og:type y og:site_name, acompañada de twitter:card, cubre los casos más importantes. Lo fundamental es que esos valores correspondan realmente a la página, que la imagen sea accesible y que exista una sola fuente encargada de generarlos.
Para seguir leyendo
Si todavía no tenés una página de Facebook para tu negocio, mirá Página de Facebook o perfil personal: qué conviene para tu negocio.
Si el Sharing Debugger de Meta te muestra el aviso "Faltan las siguientes propiedades obligatorias: fb:app_id", mirá Faltan las siguientes propiedades obligatorias: fb:app_id (Sharing Debugger de Meta).
¿Te fue útil?
¿Te fue útil?