Open Graph: cómo controlar la vista previa de tu enlace en redes
Open Graph define el título, la descripción y la imagen que se ven cuando compartes tu web. Qué etiquetas usar, qué dice Meta y cómo actualizar la vista previa.
Le mandas a un cliente el enlace de tu página de servicios y en el chat aparece un cuadro gris, con el título “Inicio” y ninguna imagen. Nadie hace clic en eso. La página era buena, pero la primera impresión la dio una vista previa descuidada.
¿Qué es Open Graph y para qué sirve?
Open Graph es un protocolo de etiquetas meta que le dice a las plataformas qué título, descripción e imagen mostrar cuando alguien comparte tu enlace. Se pegan en el head de cada página y, según el protocolo oficial, convierten una página web en un objeto con identidad propia dentro de las redes.
Sin ellas, la plataforma adivina. Meta lo dice en su documentación para webmasters: sin las etiquetas, su rastreador usa reglas internas para elegir título, descripción e imagen. Tú pierdes el control de lo que ven tus clientes.
¿Qué etiquetas necesito como mínimo?
Necesitas cuatro: og:title, og:type, og:image y og:url. Son las que el protocolo marca como obligatorias en cada página. Además conviene sumar las recomendadas.
| Etiqueta | Qué hace |
|---|---|
| og:title | El título de la página tal como se verá al compartirla |
| og:type | El tipo de contenido, por ejemplo website o article |
| og:image | La dirección de la imagen que representa la página |
| og:url | La URL canónica, su identificador permanente |
| og:description | Una o dos frases que resumen la página (recomendada) |
| og:image:alt | Describe lo que se ve en la imagen (recomendada si hay og:image) |
El protocolo también define og:image:width, og:image:height y og:image:type. Meta pide declarar el ancho y el alto de la imagen para que cargue bien desde el primer momento en que se comparte.
¿Qué imagen debo usar?
Usa una imagen propia por página, nítida y declarada con su ancho y su alto. Meta indica en sus buenas prácticas de contenido compartido que, para verse bien en pantallas de alta resolución, las imágenes deben tener al menos 1080 píxeles de ancho. Esa misma guía explica que declarar las dimensiones permite que el rastreador muestre la imagen de inmediato, en lugar de descargarla y procesarla después.
En el formato de archivo, la documentación de Meta lista como tipos aceptados para og:image:type: image/jpeg, image/gif e image/png.
Un detalle de lenguaje que ayuda a las personas con discapacidad visual: el protocolo indica que, si defines una imagen, debes definir también su texto alternativo con og:image:alt.
¿Por qué mi enlace sigue mostrando la imagen vieja?
Porque la plataforma guarda la imagen en caché según su URL y no la cambia mientras la URL sea la misma. Meta lo explica así: las imágenes se guardan según la URL y no se actualizan a menos que la URL cambie. Si reemplazas el archivo portada.webp por otro con el mismo nombre, la vista previa seguirá mostrando el anterior.
Error común: sobrescribir la imagen con el mismo nombre de archivo y esperar que las redes la actualicen solas. Sube la nueva imagen con otro nombre y actualiza el valor de og:image.
Esto mismo pasa con las páginas que cambian de título o de foto después de campañas. Si estás por lanzar una promoción, deja las etiquetas listas antes de empezar a compartir. En la guía sobre títulos y meta descripciones que Google sí muestra ves el equivalente para el buscador.
¿Cómo reviso y actualizo la vista previa?
Pega la URL en el Sharing Debugger de Meta: te muestra las etiquetas que lee y los errores o advertencias que encuentra. Según la documentación, esa herramienta además fuerza una nueva lectura de tu página, así que sirve para refrescar la vista previa después de corregir.
Una rutina corta para revisar tus páginas:
- Abre las cinco páginas que más compartes: inicio, servicios, contacto y tus guías más vistas.
- Revisa que cada una tenga las cuatro etiquetas básicas y og:description.
- Confirma que la imagen existe y que declaras su ancho y su alto.
- Pasa cada URL por el Sharing Debugger y corrige las advertencias.
- Verifica que tu servidor soporte compresión gzip o deflate: Meta lo exige para que el rastreador pueda leer tu sitio.
Si compartes mucho por mensajería, ayuda además tener enlaces limpios y con mensaje listo: mira cómo crear un enlace y QR de WhatsApp con mensaje prellenado. Y si tu web está en varios idiomas, cada versión necesita sus propias etiquetas; la guía de hreflang para sitios en varios idiomas te ayuda a ordenarlo. Para medir cuántas visitas llegan desde esos enlaces, revisa cómo usar UTM en GA4.
En resumen
Volviendo al enlace con el cuadro gris: la solución no es rediseñar tu página, es declarar cuatro etiquetas, sumar una descripción y una imagen propia con sus medidas. Cuando cambies la imagen, cambia también su URL y revisa el resultado en el Sharing Debugger. Si quieres que tu web salga con todo esto resuelto de fábrica, mira nuestro servicio de desarrollo web.
Preguntas frecuentes
¿Qué etiquetas Open Graph son obligatorias?
Según el protocolo en ogp.me, cuatro: og:title, og:type, og:image y og:url. og:description es opcional pero recomendada.
¿Por qué mi enlace muestra una imagen vieja?
Meta explica que las imágenes se guardan en caché según la URL y no se actualizan hasta que la URL cambie. Sube la nueva imagen con otro nombre de archivo.
¿Cómo veo qué lee Facebook de mi página?
Con el Sharing Debugger de Meta: pegas la URL y te muestra las etiquetas que lee, los errores y las advertencias, y además fuerza una nueva lectura.
¿Qué tamaño debe tener la imagen?
Meta recomienda imágenes de al menos 1080 píxeles de ancho para verse bien en pantallas de alta resolución, y declarar og:image:width y og:image:height.
¿Open Graph mejora mi posición en Google?
Su función es controlar cómo se ve tu enlace cuando alguien lo comparte, no darte posiciones en Google. Para el buscador, cuida el título y la meta descripción.
No te quedes con la teoría: aplícalo a tu negocio
Implementamos Desarrollo web de punta a punta, con tu operación real. La primera conversación no tiene costo.
