¿Qué es una imagen OpenGraph?

Las imágenes OpenGraph son imágenes utilizadas para las etiquetas OpenGraph, que se muestran en las vistas previas de Twitter, Facebook y Open Graph.

Las imágenes OpenGraph pueden ser estáticas o dinámicas. Esto depende de si se generan utilizando un generador OpenGraph u otras herramientas.

Las imágenes generadas con un generador OpenGraph son típicamente estáticas porque se generan basándose en los metadatos que proporcionas, que generalmente son estáticos. Por ejemplo, si proporcionas metadatos para una entrada de blog, el generador OpenGraph creará una imagen OpenGraph estática basada en esos metadatos.

Las imágenes generadas con otras herramientas pueden ser dinámicas. Por ejemplo, si utilizas un framework de renderizado del lado del servidor para generar imágenes OpenGraph, estas imágenes podrían generarse basándose en el comportamiento del usuario, la hora, el clima u otra información dinámica.

Crear imágenes OpenGraph usando herramientas

Código HTML de OpenGraph

<meta property="og:url" content="https://example.com/article">
<meta property="og:title" content="My Article Title">
<meta property="og:description" content="This is my article description">
<meta property="og:type" content="article">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="OpenGraph">

Con este código HTML, la página mostrará la imagen https://example.com/og-image.png en OpenGraph.

Efectos de vista previa

Después de crear una imagen OG, muchos sitios web proporcionan herramientas de vista previa y depuración en línea para ayudarte a diagnosticar problemas. Aquí hay algunas herramientas comunes: