≡En resumen
- Open Graph convierte una URL en una tarjeta con título, descripción e imagen cuando alguien la comparte.
- El protocolo exige cuatro etiquetas (og:title, og:type, og:image y og:url) y admite otras opcionales como og:description, og:site_name u og:locale.
- Meta recomienda imágenes de al menos 1.200 × 630 píxeles, en proporción 1,91:1 y de no más de 8 MB, e indicar su anchura y altura.
- X usa sus propias etiquetas twitter:, pero toma el título, la descripción y la imagen de Open Graph si faltan; lo único imprescindible es twitter:card.
- Open Graph no es un factor de posicionamiento en Google: su impacto está en los clics desde redes sociales y aplicaciones de mensajería.
01 ¿Qué es Open Graph?
Facebook presentó el protocolo en su conferencia f8 del 21 de abril de 2010, junto al botón «Me gusta» para webs externas: cualquier página podía convertirse en un objeto del grafo social. Según su especificación en ogp.me, se inspiró en Dublin Core, en el enlace canónico, en los microformatos y en RDFa, la sintaxis de la web semántica que conecta este estándar con las ontologías web. Hoy lo leen muchas más plataformas que Facebook: LinkedIn, X, Pinterest, WhatsApp, Telegram, Slack o Discord generan sus vistas previas a partir de estas etiquetas.
02 Etiquetas Open Graph: obligatorias y opcionales
| Etiqueta | Obligatoria | Qué indica |
|---|---|---|
| og:title | Sí | Título del contenido, sin el nombre del sitio según Meta |
| og:type | Sí | Tipo de objeto: website, article, profile, book, video.movie… |
| og:image | Sí | URL absoluta de la imagen de la vista previa |
| og:url | Sí | URL canónica de la página, sin parámetros de sesión |
| og:description | No | Resumen de una o dos frases |
| og:site_name | No | Nombre del sitio web |
| og:locale y og:locale:alternate | No | Idioma y región, por ejemplo es_ES; por defecto en_US |
| og:image:width, og:image:height, og:image:alt | No | Dimensiones de la imagen y texto alternativo |
| og:video y og:audio | No | Archivos de vídeo o audio que acompañan al contenido |
Las etiquetas Open Graph son un tipo de meta tags, pero con una diferencia de sintaxis: usan el atributo property en lugar de name. Meta añade además fb:app_id, necesaria solo si quieres usar sus estadísticas de dominio.
<meta property="og:type" content="article"><meta property="og:title" content="Cómo elegir hosting para tu tienda"><meta property="og:description" content="Qué mirar antes de contratar y qué errores evitar."><meta property="og:url" content="https://www.ejemplo.es/hosting-tienda/"><meta property="og:image" content="https://www.ejemplo.es/img/hosting-tienda.jpg"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:locale" content="es_ES">
03 Tamaño de la imagen Open Graph
| Plataforma | Recomendado | Límites | Proporción |
|---|---|---|---|
| Facebook (Meta) | 1.200 × 630 px o más | Mínimo 600 × 315 px para la vista grande y 200 × 200 px absoluto; máximo 8 MB | 1,91:1 |
| X (summary_large_image) | 1.200 × 630 px funciona bien | Mínimo 300 × 157 px, máximo 4.096 × 4.096 px y menos de 5 MB; JPG, PNG, WEBP o GIF | 2:1 |
| X (summary) | Imagen cuadrada | Mínimo 144 × 144 px | 1:1 |
04 Open Graph y las tarjetas de X (Twitter Cards)
X tiene su propio sistema, las cards, con etiquetas que empiezan por twitter:. Si una página no las tiene, X recurre a las de Open Graph para el título, la descripción y la imagen. La única que no tiene equivalente es twitter:card, que decide el tipo de tarjeta: sin ella, el enlace puede aparecer sin imagen grande.
| Etiqueta de X | Si falta, usa | Uso |
|---|---|---|
| twitter:card | Sin equivalente | summary, summary_large_image, app o player |
| twitter:title | og:title | Título de la tarjeta |
| twitter:description | og:description | Descripción |
| twitter:image | og:image | Imagen |
| twitter:site | Sin equivalente | Cuenta de X del sitio (@usuario) |
05 Cómo comprobar y depurar Open Graph
-
1
Abre el Sharing Debugger de Meta
Pega la URL en developers.facebook.com/tools/debug para ver qué etiquetas lee el rastreador y qué errores o avisos encuentra.
-
2
Fuerza una nueva lectura
Tras cambiar las etiquetas, pulsa el botón para volver a extraerlas (Scrape Again); Meta guarda en caché lo que leyó la primera vez.
-
3
Cambia la URL de la imagen si la sustituyes
Meta cachea las imágenes por URL: si subes una nueva con el mismo nombre, puede seguir mostrando la antigua.
-
4
Revisa LinkedIn con Post Inspector
linkedin.com/post-inspector muestra la vista previa y refresca la caché de LinkedIn.
-
5
Prueba en X y en WhatsApp
Escribe un borrador con el enlace, sin publicarlo, para ver la tarjeta real en cada aplicación.
- ✓La imagen usa URL absoluta con https, no una ruta relativa.
- ✓El servidor o el cortafuegos no bloquea al rastreador de Meta (facebookexternalhit) ni a los de otras redes.
- ✓La página no redirige a un login ni a una versión distinta según el país o la cookie.
- ✓No hay etiquetas og: duplicadas o contradictorias que añadan a la vez el tema y un plugin SEO.
- ✓og:url coincide con la URL canónica de la página.
- ✓Cada página importante tiene su propio título, descripción e imagen, no los de la portada.
06 Open Graph, SEO y cómo añadirlo a tu web
WordPress
Los plugins SEO más usados, como Yoast SEO o Rank Math, generan Open Graph y permiten personalizar título e imagen por entrada.
Shopify y otras plataformas
La mayoría de temas incluyen las etiquetas; revisa que la imagen de cada producto sea la correcta.
Web a medida
Se añaden en la plantilla del head, rellenadas con los datos de cada página y una imagen por defecto de respaldo.
Si compartes contenido a diario, unas tarjetas cuidadas marcan la diferencia en la gestión de redes sociales de una marca. Y si tu web muestra vistas previas rotas o genéricas, el problema suele estar en la plantilla: en un diseño web profesional las etiquetas Open Graph se generan solas para cada página.
Preguntas frecuentes sobre Open Graph
Es un protocolo de metadatos creado por Facebook en 2010 que, mediante etiquetas og: en el HTML, define el título, la descripción, la imagen y el tipo de una página cuando se comparte en redes sociales o apps de mensajería.
Según la especificación de ogp.me, og:title, og:type, og:image y og:url. Conviene añadir también og:description, og:site_name, og:locale y las dimensiones de la imagen.
Meta recomienda al menos 1.200 × 630 píxeles, en proporción 1,91:1 y sin superar 8 MB. Ese tamaño funciona también para la tarjeta grande de X.
Cambia la etiqueta og:image, usa una URL de imagen nueva y fuerza una nueva extracción (Scrape Again) en el Sharing Debugger de Meta para refrescar la caché.
Sí, como respaldo: si faltan twitter:title, twitter:description o twitter:image, toma los valores de Open Graph. Lo que sí necesita es la etiqueta twitter:card para elegir el tipo de tarjeta.
No directamente. Google no lo usa como factor de ranking, pero mejora la tasa de clics de tus enlaces en redes y mensajería, lo que puede traer visitas y enlaces.
Suele deberse a una og:image con ruta relativa, una imagen demasiado pequeña, un servidor que bloquea al rastreador o una caché antigua. Compruébalo en el Sharing Debugger.
Fuentes consultadas
Sobre el autor
Raúl Aránega Segura
CEO y especialista SEO en appyweb
Fundador de appyweb. Más de una década posicionando webs y tiendas online en Google y, ahora, en las respuestas de la IA.
Ver perfil en LinkedIn ↗