EN
PT
ES
Vista previa de Open Graph
Mira cómo se verá un enlace al compartirse en Facebook, LinkedIn, X/Twitter, WhatsApp y Slack — y copia un snippet de meta tags listo para tus páginas.
¿Qué es Open Graph?
Open Graph es el protocolo que Facebook publicó en 2010 para que los sitios declaren metadatos estructurados sobre una página — título, descripción, imagen, tipo, URL canónica — para que los enlaces compartidos en redes sociales se rendericen como tarjetas ricas en lugar de URLs sin formato. Casi todas las plataformas lo consumen hoy: Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram, iMessage. X/Twitter tiene su propio namespace twitter:* pero cae a Open Graph cuando faltan los tags de Twitter, así que un set de tags og: cubre la mayor parte del ecosistema.
Cómo usar este previewer
Pega una URL para obtener sus tags actuales, o llena los cuatro campos centrales a mano para diseñar la tarjeta antes de publicar. La vista previa se actualiza en vivo y aproxima cómo Facebook, LinkedIn y Slack renderizan la tarjeta. Cuida la imagen: cualquier cosa más angosta de 1200px o con una proporción muy lejos de cuadrada se va a recortar o reducir. Cuando la tarjeta se vea bien, copia el snippet del final y pégalo en el <head> de la página.
Por qué tu imagen de compartir no se actualiza
Facebook, LinkedIn y la mayoría de las plataformas cachean los metadatos scrapeados de forma agresiva — a veces durante días. Una vez que la URL se compartió, cambiar solo el og:image normalmente no refresca la tarjeta. Las soluciones son: (1) usar el Sharing Debugger de Facebook para forzar un re-scrape, (2) cambiar el nombre de archivo de la imagen (card-v2.png) para invalidar la caché, o (3) publicar en una URL nueva. Planifícalo en el checklist de lanzamiento, no lo descubras bajo presión de fecha.
Referencia de tags
| Tag | Función | Tip |
|---|---|---|
og:title | Mantén bajo 60 caracteres para evitar truncado. | Titular que se muestra en la tarjeta. |
og:description | Entre 110 y 200 caracteres se ven bien en la mayoría de las plataformas. | Subtítulo / línea de resumen. |
og:image | PNG o JPEG 1200×630 por HTTPS, < 5 MB. | Imagen de la tarjeta. |
og:url | Usa la URL canónica, no la versión etiquetada. | URL canónica a la que resuelve el enlace compartido. |
twitter:card | summary_large_image calza con el estilo de la tarjeta OG. | Tipo de Twitter card. |
Preguntas frecuentes
¿Necesito tags de Open Graph y de Twitter card?
twitter:*, X/Twitter usa los og:* como fallback. Los tags de Twitter solo importan si quieres una imagen o copy distintos en X versus Facebook/LinkedIn. Para la mayoría de las páginas, un bloque OG limpio alcanza.¿Cuál es el tamaño correcto de la imagen?
¿Por qué la vista previa no se ve idéntica a la tarjeta de Facebook?
¿La herramienta consulta URLs por un servidor?
¿Puedo usar un video como og:image?
og:video para eso, junto con un og:image estático como fallback. Casi todas las plataformas muestran la imagen estática en la tarjeta y solo reproducen el video tras el clic.¿Qué hace og:type?
website, article, book, profile, etc. Facebook antes renderizaba layouts distintos por tipo; hoy afecta sobre todo a funciones de descubrimiento. Pon article en posts de blog y website en el resto y vas bien.