Imágenes OG para páginas de producto

Una imagen OG para una página de producto es la vista previa social que muestra el nombre del producto, el precio y una miniatura cuando se comparte la página. FastOG la renderiza dinámicamente a 1200×630 y la almacena en caché en el edge, de modo que cada producto obtiene una tarjeta con la marca sin que un diseñador toque una plantilla.

Por qué las páginas de producto de ecommerce necesitan imágenes OG dinámicas

Cuando un cliente comparte un enlace de producto en WhatsApp, Slack o Discord, la tarjeta de vista previa es un mini-anuncio. Una tarjeta con el nombre real del producto, el precio y la valoración convierte mucho mejor que la imagen genérica del logotipo de la tienda. Crear una tarjeta única por producto manualmente no escala — para eso está la API.

Cómo generar una imagen OG de producto

Firma una URL con template=ecommerce, el título del producto, el precio, la valoración y una URL de imagen. La API renderiza la tarjeta bajo demanda y la almacena en caché.

tsx

// Next.js — app/products/[slug]/page.tsx
export function generateMetadata({ params }) {
    const product = await getProduct(params.slug);
    return {
        openGraph: {
            images: [generateOgImageUrl({
                template: "ecommerce",      // product card
                title: product.name,
                subtitle: product.tagline,  // optional
                price: product.price,       // e.g. "$29.99"
                rating: product.rating,     // e.g. "4.9"
                image: product.imageUrl,    // product photo
            })],
        },
    };
}

Campos de la plantilla de comercio electrónico

Campo	Qué muestra	¿Opcional?
`title`	Nombre del producto (titular)	Obligatorio
`subtitle`	Eslogan o categoría	Opcional
`price`	Etiqueta de precio, p. ej. `$29.99`	Opcional
`rating`	Valoración de reseñas, p. ej. `4.9`	Opcional
`image`	URL de la imagen del producto / avatar	Opcional

Preguntas frecuentes

¿Carga FastOG la imagen de mi producto en la tarjeta?

Sí. Pasa la URL de la imagen del producto en el parámetro image y la plantilla de ecommerce la compone dentro de la tarjeta.

¿El precio se muestra en vivo y es editable?

El precio es el que pases en el momento de la firma. Cambia el precio → cambia la URL → un nuevo renderizado.

¿Qué pasa con los precios de descuento / rebajas?

Pasa el precio actual como price. Algunos vendedores actualizan la tarjeta cuando cambia la oferta para que la vista previa compartida muestre el precio en vivo.

Pruébalo gratis: no se requiere registro

Previsualiza y prueba imágenes OG dinámicas en segundos.

Abrir el probador gratuito de imágenes OG

Tema