Use Case: Automating Visuals for an E-commerce Catalog

In e-commerce, the catalog is a living, breathing entity. Prices update based on supply, flash sales are triggered on weekends, and inventory levels fluctuate hourly. Manually creating promotional banners or social share images for every individual product is a logistical impossibility.

This exhaustive guide demonstrates how an online store can integrate an image generation API to render thousands of context-aware product banners on the fly. We'll explore a real-world scenario, the HTML/React implementation, and the tangible business impact of dynamic urgency badging.

Imagine SneakerStore, a mid-sized retailer with over 5,000 active SKUs. They rely heavily on word-of-mouth marketing—specifically, customers sharing links to shoes in group chats on WhatsApp, Discord, or iMessage.

SneakerStore frequently runs 48-hour flash sales. When a link is shared during a sale, the preview card historically only showed the generic shoe image. The recipient had no idea the item was discounted unless they clicked.

The Goal: The OpenGraph preview must dynamically show the current discounted price, the slashed original price, and a high-visibility "Sale Ends Soon" badge to drive psychological urgency—without anyone manually touching Photoshop.

By modifying the server-side rendering logic of their product page template, SneakerStore can instantly generate a context-aware image URL using an API like OGCraft.

Here is how the implementation looks in a Next.js or React Router product page layout:

import { type MetaFunction } from "react-router";

export const meta: MetaFunction = ({ data }) => {
  const { product, activeSale } = data;
  
  // Construct parameters based on real-time database state
  const params = new URLSearchParams({
    template: 'ecommerce-flash-sale',
    title: product.name,
    image: product.primaryImageUrl,
    price: product.currentPrice.toString(),
  });

  if (activeSale) {
    params.append('originalPrice', product.originalPrice.toString());
    params.append('badge', '⚡ FLASH SALE');
    params.append('theme', 'urgent-red');
  } else {
    params.append('theme', 'standard');
  }

  const ogImageUrl = `https://api.ogcraft.dev/api/v1/generate?${params.toString()}`;

  return [
    { title: product.name },
    { property: "og:image", content: ogImageUrl },
    { property: "twitter:image", content: ogImageUrl },
    { name: "twitter:card", content: "summary_large_image" }
  ];
};

When a messaging app scrapes the URL, the service instantly composites the transparent product photo, the formatted pricing typography, and the conditional sale badge into a single, perfectly sized 1200x630 PNG.

Conclusion

Dynamic OpenGraph images are no longer an optional luxury—they are a critical component of modern web SEO and social media marketing. Regardless of your stack, injecting custom social cards into your web pages is essential for standing out.

Ready to take your social share preview images to the next level without maintaining complex canvas code?