¿Qué son las etiquetas Open Graph?
Las etiquetas Open Graph (OG) son meta tags en el <head> de tu página que controlan cómo se ve tu contenido al compartirlo en plataformas sociales como Facebook, LinkedIn, Slack e iMessage. Fueron desarrolladas por Facebook y ahora son un estándar web de facto adoptado por todas las plataformas principales.
Propiedades esenciales de Open Graph
og:title— el título que se muestra en la tarjeta de vista previa social. Apunta a 60–90 caracteres.og:description— una descripción corta del contenido de la página, mostrada debajo del título.og:image— la imagen de vista previa. Tamaño recomendado: 1200×630 píxeles (relación de aspecto 1.91:1).og:url— la URL canónica de la página que se está compartiendo.og:type— el tipo de contenido:website,article,video.movie, etc.og:site_name— el nombre de tu sitio web, mostrado junto a la URL.
og:image — tamaño, formato y requisitos
La imagen de Open Graph es la parte más visible de una vista previa de compartido social. Usa una imagen de 1200×630 píxeles (relación de aspecto 1.91:1) para obtener el mejor resultado en todas las plataformas. El tamaño mínimo es 200×200 píxeles — las imágenes más pequeñas pueden ser ignoradas. Facebook exige que las imágenes pesen menos de 8 MB; se soportan tanto PNG como JPG. Usa una URL absoluta (que empiece con https://), no una ruta relativa. Las etiquetas og:image:width y og:image:height ayudan a las plataformas a evitar saltos de diseño mientras obtienen la imagen.
Facebook Sharing Debugger
El Sharing Debugger de Facebook (en developers.facebook.com/tools/debug/) muestra exactamente cómo Facebook mostrará la vista previa de tu página al compartirla — incluyendo qué etiquetas OG encontró, cualquier error, y cómo se verá la tarjeta de vista previa. Fundamentalmente, también te permite forzar una actualización de caché: Facebook cachea los datos de OG de forma agresiva, así que después de actualizar tus etiquetas debes usar el debugger para limpiar la versión cacheada antes de que tus cambios aparezcan en nuevos compartidos.
Usa este verificador para confirmar que tus etiquetas OG están presentes y correctamente formateadas, y luego usa el Facebook Sharing Debugger para confirmar la vista previa visual y limpiar la caché.
Etiquetas Twitter Card
Twitter (ahora X) usa sus propias meta tags para las tarjetas de vista previa. twitter:card es obligatoria y controla el diseño de la tarjeta: summary muestra una miniatura cuadrada pequeña, summary_large_image muestra una imagen grande destacada. Twitter recurre a las etiquetas OG cuando sus propias etiquetas no están presentes, así que como mínimo define twitter:card y confía en tus etiquetas OG para el resto.
LinkedIn y otras plataformas
LinkedIn lee las etiquetas OG y las cachea de forma similar a Facebook. Usa el LinkedIn Post Inspector en linkedin.com/post-inspector/ para previsualizar y volver a rastrear una URL. Slack, iMessage y WhatsApp también usan etiquetas OG para generar la vista previa de enlaces (link unfurling). La mayoría cachea entre 24 y 72 horas — una limpieza forzada de caché mediante el debugger de la plataforma es la única forma confiable de forzar una actualización inmediata.
Preguntas frecuentes
¿Qué es el Facebook Sharing Debugger?
El Facebook Sharing Debugger es la herramienta oficial de Facebook para previsualizar cómo se verá una URL al compartirla en Facebook. Muestra las etiquetas OG que encontró Facebook, renderiza una tarjeta de vista previa, señala cualquier error, y te permite limpiar la versión cacheada de tu página en Facebook. Puedes acceder en developers.facebook.com/tools/debug/.
¿Qué tamaño debería tener mi og:image?
Usa 1200×630 píxeles (relación de aspecto 1.91:1) para el mejor resultado en todas las plataformas. Este es el tamaño recomendado para Facebook, LinkedIn y las tarjetas de imagen grande de Twitter. El mínimo es 200×200 píxeles. Las imágenes menores a 600×315 píxeles pueden mostrarse como miniaturas pequeñas en vez de tarjetas de vista previa grandes. Mantén el tamaño del archivo bajo 8 MB y usa una URL absoluta con HTTPS.
¿Qué es og:title y en qué se diferencia de la etiqueta title de la página?
La etiqueta og:title define el título que se muestra en las tarjetas de vista previa de redes sociales. Es independiente de la etiqueta HTML <title> usada en las pestañas del navegador y los resultados de búsqueda. Puedes escribir un og:title un poco más largo o más orientado a generar clics, ya que los límites de caracteres son menos estrictos en las plataformas sociales. Cuando falta og:title, la mayoría de las plataformas recurren a la etiqueta <title>.
¿Necesito tanto etiquetas Open Graph como Twitter Card?
No siempre. Twitter recurre a las etiquetas OG cuando faltan las etiquetas específicas de Twitter — así que og:title, og:description y og:image completarán la vista previa de Twitter incluso sin twitter:title, etc. La única excepción es twitter:card, que no tiene equivalente en OG y debe definirse para controlar el diseño de la tarjeta. Para tener control total, define ambos conjuntos de etiquetas.