Cuando compartimos una URL en Facebook, LinkedIn, WhatsApp, X u otras aplicaciones, la plataforma intenta decidir qué título, descripción e imagen debe mostrar en la vista previa del enlace.
La forma más habitual de controlar esa información es mediante Open Graph, un conjunto de meta tags que se coloca dentro del <head> de la página. A estas etiquetas se suman las Twitter Cards, que a pesar del cambio de nombre de Twitter a X todavía utilizan propiedades con el prefijo twitter:.
En esta guía veremos cuáles son las etiquetas que realmente importan, cómo usar og:image, og:title, og:url y og:type, qué diferencias hay entre plataformas y cómo diagnosticar una vista previa incorrecta.
¿Qué son las meta tags Open Graph?
Open Graph Protocol define metadatos que permiten describir una página web como un objeto capaz de ser interpretado por otras plataformas.
La especificación oficial considera cuatro propiedades básicas:
og:title: título que queremos asociar a la página.og:type: tipo de contenido, por ejemplowebsiteoarticle.og:image: URL absoluta de la imagen representativa.og:url: URL canónica que identifica ese contenido.
En la práctica, 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.
La especificación completa está disponible en The Open Graph Protocol.
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 deberían ser absolutas. Es decir, es preferible utilizar https://ejemplo.com/imagen.jpg y no simplemente /imagen.jpg.
¿Para qué sirve cada propiedad OG?
| 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, descriptivo y sin depender del meta description 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 | article para artículos; website para páginas generales |
og:site_name | Nombre del sitio | Útil para reforzar la identidad de la fuente |
og:image:width / height | Dimensiones de la imagen | Ayudan al crawler a conocer el tamaño sin descargarla primero |
og:image:alt | Descripción de la imagen | Describir el contenido visual, no repetir una lista de keywords |
og:type: article o website
Una consulta bastante habitual es qué valor utilizar en og:type.
Para una homepage, landing institucional o página general, normalmente se utiliza:
<meta property="og:type" content="website" />Para un post del blog o contenido editorial:
<meta property="og:type" content="article" />Cuando utilizamos 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" />Esto permite conservar 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, casi siempre conviene empezar 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 y un código HTTP 200;
- no estar bloqueada para crawlers;
- tener dimensiones suficientes para una tarjeta grande;
- mantener el texto y logos importantes lejos de los extremos, porque cada plataforma puede recortar 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 los previews grandes. LinkedIn, por ejemplo, recomienda 1200 × 627 px para sus vistas previas.
No significa que todas las redes garanticen exactamente el mismo recorte. 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 continúa siendo la base para describir cómo debería presentarse una URL compartida.
Si Facebook muestra información vieja, una imagen anterior o datos inesperados, el primer paso es revisar el HTML que recibe su crawler y después utilizar el Sharing Debugger de Meta para volver a solicitar la URL.
Un error frecuente es cambiar la imagen en WordPress y asumir que Facebook la actualizará inmediatamente. Las plataformas almacenan vistas previas en caché, por lo 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. En la práctica, un conjunto correcto de etiquetas Open Graph es la base más importante para que encuentre el título, descripción e imagen adecuados.
No existe una etiqueta especial como whatsapp:image. Para mantener compatibilidad, conviene concentrarse en que og:title, og:description y especialmente og:image sean correctos y accesibles públicamente.
Si WhatsApp continúa 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 explícitamente el uso de og:title, og:image, og:description y og:url para generar las vistas previas de páginas compartidas.
Para la imagen recomienda una relación de 1,91:1 y dimensiones mínimas de 1200 × 627 px para la presentación grande.
Si modificaste la imagen o los metadatos de una URL ya compartida, podés utilizar el LinkedIn Post Inspector. LinkedIn aclara que el refresco afecta a nuevas publicaciones; las previews ya publicadas no se reescriben retroactivamente.
X: por qué las etiquetas todavía se llaman twitter:
Aunque Twitter pasó a llamarse X, las etiquetas utilizadas históricamente para 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 ya tenemos Open Graph bien configurado, suele ser conveniente utilizar el mismo título, descripción e imagen para ambas capas salvo que exista un motivo editorial para diferenciarlas.
No debemos confundir sintaxis: Open Graph utiliza property="og:...", mientras que las Twitter Cards tradicionalmente utilizan name="twitter:...".
Pinterest y Rich Pins
Pinterest continúa utilizando metadatos para sus Rich Pins. Actualmente documenta tres tipos principales: artículos, productos y recetas.
Para artículos y productos, Pinterest admite Open Graph y también datos estructurados Schema.org. Por ejemplo, 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 son importantes porque precio, moneda y disponibilidad forman parte de la información que Pinterest puede interpretar.
¿Existen meta tags especiales para Instagram?
Esta pregunta aparece con frecuencia en las búsquedas, pero conviene separar conceptos.
No necesitamos agregar un conjunto de “Instagram meta tags” equivalente a Open Graph para conseguir una tarjeta de enlace normal en el feed de Instagram. Instagram no funciona como Facebook, LinkedIn o WhatsApp para enlaces arbitrarios dentro de publicaciones normales.
Open Graph sigue siendo útil para nuestro sitio y para otros productos del ecosistema Meta, pero agregar algo como instagram:image no forma parte del estándar y no crea por sí solo una vista previa especial en Instagram.
Open Graph no es lo mismo que Schema.org
Ambos describen información sobre una página, pero tienen objetivos diferentes.
| Open Graph | Schema.org | |
|---|---|---|
| Uso principal | Compartir contenido y previews sociales | Datos estructurados para buscadores y otros consumidores |
| Formato habitual | Meta tags en el <head> | JSON-LD, Microdata o RDFa |
| Ejemplo | og:image | image dentro de Article/Product |
| ¿Se reemplazan? | No. Pueden coexistir y cumplir funciones complementarias. | |
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, descripción, URL e imagen destacada de cada página.
La recomendación más importante es utilizar un único sistema responsable de Open Graph. Si el tema, un plugin SEO y otro plugin social generan simultáneamente og:image o og:title, podemos terminar con etiquetas duplicadas y resultados impredecibles.
Después de guardar los cambios, abrí el código fuente de la página publicada y buscá og:. Eso permite comprobar exactamente qué recibe un crawler, independientemente de lo que muestre el editor de WordPress.
Cómo agregar Open Graph manualmente
Si estamos desarrollando una aplicación o tema propio, podemos generar 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 nuestro enlace, conviene revisar el problema en este orden:
- Abrir el código fuente real. Buscar
og:title,og:imageyog:url. - Comprobar duplicados. Si aparecen dos
og:imageo dosog:titlegenerados por plugins diferentes, corregir primero eso. - Abrir directamente la imagen. Debe ser pública, cargar rápido y devolver HTTP 200.
- Revisar HTTPS y redirects. Evitar cadenas innecesarias o imágenes protegidas.
- Verificar dimensiones. Una imagen demasiado pequeña puede mostrarse como miniatura o directamente no ser elegida.
- Vaciar cachés propias. WordPress, CDN y caché de página deben servir el HTML nuevo.
- Solicitar un nuevo rastreo social. Usar Sharing Debugger en Meta o Post Inspector en LinkedIn cuando corresponda.
- Recordar la caché externa. Aunque nuestro sitio ya esté correcto, la aplicación que comparte el enlace puede conservar una versión anterior durante un tiempo.
Errores frecuentes con meta property=”og:…”
- 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
websiteindiscriminadamente en contenido editorial cuando correspondearticle. - Dejar
og:urlapuntando a una URL diferente de la versión canónica deseada. - Cambiar una imagen sin considerar que Facebook, LinkedIn o aplicaciones de mensajería pueden haberla almacenado en caché.
- Suponer que una imagen destacada de WordPress garantiza por sí sola que exista un
og:imagecorrecto.
Preguntas frecuentes sobre Open Graph
¿Qué significa meta property=”og:image”?
Indica la URL de la imagen que representa la página dentro de Open Graph. Es una de las propiedades principales que utilizan las plataformas para intentar construir una vista previa visual del enlace.
¿Qué es og:site_name?
Es el nombre general del sitio o publicación. Por ejemplo, en un artículo de Duplika el og:title puede ser el título específico del post y og:site_name puede ser simplemente Duplika.
¿og:url debe ser igual a canonical?
En la mayoría de los casos es conveniente 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 una etiqueta de ranking de Google equivalente a un factor SEO directo. Su función principal es controlar y mejorar cómo se describe una URL cuando otros servicios la interpretan y comparten. Una mejor presentación puede facilitar la distribución y los clics, pero eso es diferente 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 permite indicar explícitamente a X el tipo de tarjeta deseado. Podemos reutilizar el mismo título, descripción e imagen para evitar mantener dos versiones innecesariamente.
Una buena preview empieza por metadatos simples y consistentes
No necesitamos docenas de etiquetas para conseguir una buena vista previa social. 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 por twitter:card, cubre los casos más importantes.
Lo fundamental es que esos valores correspondan realmente con la página, que la imagen sea accesible y que exista una sola fuente encargada de generarlos.
Si administrás WordPress y preferís delegar este tipo de ajustes técnicos, podés conocer nuestro servicio de mantenimiento de WordPress.