Vista previa de Open Graph
Ve cómo se ve un enlace en Facebook, X y LinkedIn antes de publicar, a partir de tu og:title, og:description, og:image y og:url.
Vistas previas de enlaces
example.com
-
-
X (Twitter)
-
-
example.com
-
example.com
La proporción de la imagen es incorrecta
Cómo funciona
Una herramienta de vista previa de Open Graph genera una simulación visual en tiempo real de cómo aparecerá una página web como tarjeta de enlace al compartirla en Facebook, X/Twitter y LinkedIn, utilizando los valores og:title, og:description, og:image y og:url que proporciones. No se envía nada a un servidor: las tarjetas se construyen en tu navegador a partir de los campos de la izquierda.
- Ingresa tus valores de Open Graph
Pega los mismos og:title, og:description, og:image y og:url que planeas publicar o que una página en vivo ya tiene en su sección head.
- Revisa las tres tarjetas
Facebook, X y LinkedIn recortan los títulos y descripciones de forma ligeramente diferente. Una URL de imagen rota muestra el mismo reemplazo que muestran las plataformas reales.
- Copia las etiquetas
Copia las metaetiquetas generadas en el head de tu página y luego verifica la página en vivo con la herramienta de depuración de cada plataforma.
Open Graph en la práctica
Open Graph (OG) es un protocolo de metadatos, creado originalmente por Facebook, que permite que cualquier página web se convierta en un objeto enriquecido al compartirse. Cuando alguien comparte tu URL, el rastreador de la plataforma lee tus metaetiquetas OG y las usa para construir la tarjeta que se muestra arriba. Sin ellas, las plataformas suponen tu contenido y a menudo generan una vista previa deficiente.
Tamaño de la imagen
El tamaño recomendado para og:image es de 1200 por 630 píxeles, con una relación de aspecto de 1,91:1, lo que garantiza una visualización nítida en Facebook, LinkedIn y X en distintas densidades de pantalla. Por debajo de 600 por 315 píxeles, Facebook muestra una miniatura pequeña en lugar de una tarjeta de ancho completo.
Almacenamiento en caché
Las plataformas sociales almacenan los datos de Open Graph en caché de forma agresiva, a veces durante días. Después de cambiar tus etiquetas, usa la herramienta de depuración de cada plataforma para forzar una nueva lectura: el Depurador de contenido compartido de Facebook, el Inspector de publicaciones de LinkedIn o el Validador de tarjetas de X.
og:title no es el título de la página
La etiqueta title de HTML está destinada a los motores de búsqueda y a las pestañas del navegador. og:title solo es leída por las plataformas sociales y puede ser más corta o informal que tu título SEO. Usa el generador de metaetiquetas para crear ambos al mismo tiempo.
Preguntas frecuentes
¿Qué es Open Graph y cómo funciona?
Open Graph (OG) es un protocolo de metadatos creado por Facebook que permite que cualquier página web se convierta en un objeto enriquecido en las redes sociales. Cuando un usuario comparte tu URL, el rastreador de la plataforma lee tus metaetiquetas OG (og:title, og:description, og:image, og:url) y las utiliza para generar una tarjeta de enlace visual. Sin estas etiquetas, las plataformas intentan deducir el contenido de tu página, lo que a menudo genera vistas previas poco atractivas o inexactas.
¿Qué tamaño de imagen debo usar para las etiquetas de Open Graph?
El tamaño recomendado para og:image es de 1200 x 630 píxeles, que se visualiza bien en Facebook, LinkedIn y X/Twitter con distintas densidades de pantalla. El tamaño mínimo para evitar una miniatura pequeña en Facebook es de 600 x 315 píxeles. Usa formato JPEG o PNG, mantén el archivo por debajo de 8 MB y evita colocar texto importante o logotipos en el 10 % exterior de la imagen, ya que algunas plataformas recortan los bordes en ciertos tamaños de tarjeta.
¿Por qué no se actualiza mi imagen de Open Graph después de cambiarla?
Las plataformas sociales almacenan en caché los datos de Open Graph de forma agresiva, a veces durante días o semanas. Después de actualizar tus etiquetas OG e implementarlas, debes borrar manualmente la caché usando la herramienta de depuración de cada plataforma: el Depurador de contenido compartido de Facebook, el Inspector de publicaciones de LinkedIn o el Validador de tarjetas de X. Ingresa tu URL y activa una nueva extracción. La vista previa anterior persistirá en las publicaciones ya compartidas, independientemente de si se borra la caché.
¿Afectan las etiquetas de Open Graph al posicionamiento SEO?
Las etiquetas de Open Graph no influyen directamente en el algoritmo de clasificación de Google. Sin embargo, impactan indirectamente en el SEO al mejorar las tasas de clics desde los enlaces compartidos en redes sociales; una og:image y un og:title atractivos generan más clics, lo que aumenta el tráfico y los posibles vínculos de retroceso. Considera la optimización OG como un SEO social: controla tu tasa de clics en redes sociales del mismo modo que las etiquetas de título y las descripciones controlan el CTR en los resultados de búsqueda.
¿Cuál es la diferencia entre og:title y la etiqueta title de HTML?
La etiqueta de título HTML (que se muestra en las pestañas del navegador y los resultados de búsqueda) está destinada a los motores de búsqueda y navegadores. La etiqueta og:title es específica para plataformas de redes sociales y controla el titular que aparece en las vistas previas de tarjetas de enlaces en Facebook, LinkedIn y X/Twitter. Lo ideal es tener ambas. Puedes usar el mismo texto o escribir un og:title más adecuado para redes sociales, con un tono más directo o conversacional que el título de tu página optimizado para SEO.