Open Graph: por qué tu enlace se ve mal al compartirlo
Por qué WhatsApp, X o LinkedIn muestran mal tu enlace: qué meta tags leen, en qué orden, y cómo arreglar la imagen, el título y la descripción.
Cuando pegas un enlace en WhatsApp, X, LinkedIn o Facebook, la aplicación no abre tu página: envía un bot que descarga el HTML crudo, busca un puñado de etiquetas <meta> dentro del <head> y construye la tarjeta con eso. Si la previsualización sale mal, casi siempre es porque una de esas etiquetas falta, apunta a una ruta relativa o quedó congelada en la caché del scraper. Puedes ver exactamente qué etiquetas emite tu página con el generador y lector de meta tags y comprobar cómo queda la tarjeta con el verificador de Open Graph.
Qué lee de verdad cada plataforma
Open Graph es un protocolo que Facebook publicó en 2010 y que el resto adoptó porque resolvía un problema real: dejar que la web diga cómo quiere ser mostrada fuera de sí misma. Las etiquetas viven en el <head>, usan el atributo property en lugar de name, y las cuatro imprescindibles son siempre las mismas.
- og:title — el titular de la tarjeta. No tiene por qué coincidir con tu
<title>; en el navegador cabe menos texto que en una tarjeta. - og:description — una o dos frases. Lo que sobra se corta con puntos suspensivos, y cada plataforma corta por un sitio distinto.
- og:image — la causa número uno de previsualizaciones rotas. Debe ser una URL absoluta con
https. - og:url — la URL canónica del contenido. Sirve para que la misma página compartida con distintos parámetros de campaña se contabilice como una sola.
A partir de ahí cada red añade sus matices. Facebook es la implementación de referencia y también la más estricta: si algo falta, su depurador te lo dice con nombre y apellidos. LinkedIn lee las mismas og: y cachea con especial insistencia. WhatsApp se queda en lo mínimo —título, descripción e imagen— y es el más sensible al peso del archivo: una og:image de varios megabytes suele acabar en una tarjeta sin foto. X tiene su propio juego de etiquetas twitter:, pero con respaldo: si no las encuentra, usa las og:.
El orden de resolución (y por qué importa)
Ninguna plataforma se rinde a la primera. Todas tienen una cadena de respaldo, y entenderla explica la mayoría de las tarjetas raras que has visto:
- Título:
twitter:title(solo en X) →og:title→<title>→ el nombre de dominio a secas. - Descripción:
twitter:description→og:description→<meta name="description">→ el primer párrafo que el scraper encuentre, o nada. - Imagen:
twitter:image→og:image→ alguna imagen del documento elegida por heurística → tarjeta sin imagen.
Por eso una página sin ninguna etiqueta Open Graph normalmente no aparece vacía: aparece con el <title> completo, incluida esa coletilla de marca que añadiste pensando en Google, y con una imagen cualquiera del cuerpo. No está rota, está improvisada. Y por eso también conviene revisar el <title> real de la página: es la red de seguridad de todas las plataformas a la vez.
Las cinco causas reales de una previsualización rota
1. La og:image es una ruta relativa. /og/portada.png funciona en tu navegador porque el navegador conoce el dominio actual. El scraper recibe la cadena suelta y no tiene contexto: necesita https://tudominio.com/og/portada.png. Es el fallo más común y el más fácil de arreglar.
2. La imagen no cumple los mínimos. El estándar de facto es 1200 × 630 píxeles, proporción 1,91:1. Por debajo de unos 600 píxeles de ancho, varias plataformas degradan la tarjeta a formato pequeño con la imagen como miniatura cuadrada, y ahí tu diseño horizontal se recorta sin piedad. Usa PNG o JPG: los formatos modernos como AVIF o WebP se renderizan bien en navegador pero no todos los scrapers los procesan, y SVG directamente no se acepta.
3. La caché del scraper. Cada plataforma guarda lo que leyó la primera vez y no vuelve a mirar durante horas o días. Cambiaste la imagen, la subiste, la ves en tu web, y el enlace sigue mostrando la anterior. No estás loco: estás mirando una copia guardada.
4. Las etiquetas las pone JavaScript. Si tu aplicación inyecta las meta tags al montar el componente en el cliente, para el scraper no existen. Los bots de previsualización descargan el HTML tal como sale del servidor y, en general, no ejecutan JavaScript. Con renderizado en servidor o generación estática el problema desaparece.
5. El bot no puede entrar. Contenido detrás de login, una regla de robots.txt que bloquea al agente de Facebook, un cortafuegos que responde 403 a lo que huela a bot, una redirección encadenada que se pierde por el camino. Si el scraper no lee el HTML, no hay etiqueta que valga.
Cómo depurarlo en el orden correcto
Empieza por tu propio HTML antes de tocar nada más. Abre el verificador de Open Graph, pega el <head> de la página y comprueba qué etiquetas hay realmente y qué valor tienen. La mitad de los casos se resuelven aquí: aparece la ruta relativa, o descubres que hay dos og:image distintas porque el tema y el plugin añaden cada uno la suya.
Con las etiquetas correctas, ve a los depuradores oficiales. El Sharing Debugger de Facebook (que gobierna también la previsualización de Instagram) te muestra lo que su scraper vio y tiene un botón para volver a rastrear. El Post Inspector de LinkedIn hace lo mismo y es la única forma práctica de invalidar su caché. X retiró su antiguo validador de tarjetas, así que allí se depura probando: publica el enlace en un mensaje directo a ti mismo antes de publicarlo en el timeline. Y WhatsApp no tiene herramienta pública: si Facebook lo ve bien y la imagen no pesa demasiado, WhatsApp lo verá bien.
Lo que Open Graph no arregla
Conviene ser claro con los límites. Estas etiquetas no influyen en tu posicionamiento en Google: el buscador construye su resultado con el <title> y la meta description, no con las og:. Tampoco te dan control sobre el recorte final —cada plataforma decide dónde corta el texto y cómo encaja la imagen en su rejilla, y eso cambia entre versiones de la app—, ni impiden que alguien comparta tu enlace con su propia imagen si la red le deja subirla. Y no protegen nada: una og:image es un archivo público en tu servidor, indexable y descargable por cualquiera.
El objetivo razonable es más modesto y más útil: que tu enlace se vea siempre igual, en todas partes, y que el título de la tarjeta diga lo que el contenido promete. Con cuatro etiquetas bien puestas y una imagen de 1200 × 630 ya estás por delante de la mayoría de los sitios que compiten por el mismo clic.
Preguntas frecuentes
¿Qué medida debe tener la imagen de Open Graph?
1200 × 630 píxeles es la recomendación estándar y la que mejor se comporta en Facebook, LinkedIn y X con tarjeta grande. Es una proporción de 1,91:1, así que si tu imagen tiene otro aspecto la plataforma la recortará por su cuenta, normalmente por arriba y por abajo. Declara también og:image:width y og:image:height para que la tarjeta se dibuje antes de descargar el archivo.
Cambié la imagen y sigue apareciendo la antigua, ¿por qué?
Porque el scraper de cada plataforma guarda en caché lo que leyó la primera vez, y esa caché dura de horas a días. Cambiar el HTML no la invalida: hay que forzar un nuevo rastreo desde el depurador oficial de cada red (Sharing Debugger en Facebook, Post Inspector en LinkedIn). Un truco complementario es publicar la nueva imagen en una URL distinta, porque una ruta nueva no tiene caché previa.
¿Necesito etiquetas twitter: si ya tengo las og:?
Solo una: twitter:card. X usa las etiquetas og: como respaldo para el título, la descripción y la imagen, pero sin twitter:card no sabe qué formato de tarjeta dibujar y suele mostrar una versión mínima o ninguna. Con twitter:card definido como summary_large_image ya obtienes la tarjeta con imagen ancha sin duplicar el resto de etiquetas.
¿Por qué WhatsApp no muestra ninguna previsualización de mi enlace?
Las causas habituales son tres: la og:image está declarada con una ruta relativa en lugar de una URL absoluta con https, la imagen pesa demasiado para que el cliente la cargue, o el HTML solo genera las etiquetas mediante JavaScript en el navegador. Los scrapers descargan el HTML tal cual llega del servidor y no ejecutan tu JavaScript, así que lo que se pinta en cliente no existe para ellos.
¿Sirven las meta tags de Open Graph para posicionar en Google?
No son un factor de posicionamiento. Google usa el title y la meta description para construir su resultado, no las og:. Lo que sí afectan es el porcentaje de clic cuando alguien comparte tu URL en redes o mensajería, que es tráfico real aunque no venga de la búsqueda orgánica.
¿Cada página necesita su propia imagen de Open Graph?
No es obligatorio, pero es lo que marca la diferencia. Una imagen genérica del sitio funciona como red de seguridad; una imagen por artículo, con su título encima, convierte mucho mejor. Muchos sitios la generan automáticamente a partir del título para no diseñar una a mano por cada publicación.
Comprueba tus meta tags ahora
Analiza el head de tu página y genera las etiquetas que falten. Todo en tu navegador, sin subir nada.
Abrir verificador de Open Graph →Herramientas relacionadas
- Verificador de Open Graph — Comprueba qué tarjeta se dibuja con tus etiquetas actuales.
- Generador de meta tags — Genera el bloque completo de og: y twitter: listo para pegar.
- Vista previa en Google — El otro lado del mismo trabajo: cómo se ve tu title en la búsqueda.
- Comprimir imagen — Baja el peso de tu og:image para que WhatsApp la muestre.
También te puede interesar: Tamaños de imagen para redes sociales y las mejores herramientas SEO gratuitas.