Las etiquetas Open Graph (OG) son metadatos HTML del protocolo creado por Facebook en 2010 que controlan cómo se muestra una página web al compartirla en redes sociales y apps de mensajería. Definiendo propiedades como og:title, og:description, og:image y og:url, los desarrolladores controlan la tarjeta de vista previa que aparece en Facebook, LinkedIn, Twitter/X, WhatsApp, Telegram, iMessage y Slack.
¿Qué son las etiquetas Open Graph?
Las etiquetas Open Graph son elementos <meta> que se colocan en el <head> de tu HTML. Cuando alguien comparte un enlace, la plataforma social hace una petición a la URL, lee estas etiquetas y genera una tarjeta visual con título, descripción e imagen. Sin ellas, las plataformas intentan extraer contenido automáticamente, con resultados impredecibles: títulos cortados, imágenes incorrectas o descripciones vacías. Las cuatro etiquetas obligatorias son og:title, og:type, og:image y og:url.
¿Cuál es el tamaño ideal de imagen OG?
El tamaño recomendado es 1200×630 píxeles con un ratio de aspecto 1.91:1, compatible con Facebook, LinkedIn y la mayoría de plataformas. Para Twitter/X, el tipo summary_large_image funciona mejor con 1200×628px (ratio 2:1). Las imágenes deben estar en formato JPG o PNG, pesar menos de 5 MB y tener el contenido importante centrado, ya que algunas plataformas recortan los bordes. Usa og:image:width y og:image:height para que las plataformas rendericen la tarjeta sin esperar la descarga completa de la imagen. ¿Necesitas validar datos JSON? Prueba nuestro formateador JSON.