OG Image Fallback

The app generates a branded Open Graph image automatically when a Contentstack entry has no metadata.image.

Endpoint

• /api/og?title={title}&type={type}&path={path} (full variant)
• /api/og?type={type}&variant=card (card variant)

The endpoint uses Next.js ImageResponse (next/og) and returns a 1200x630 image suitable for social sharing.

Variants

• full (default): Shows title, path, and header. Used for metadata (social sharing) and static cards.
• card: Shows content type label and a type-specific icon only. Used for linked cards (blogs, guides, livestreams, kickstarts) where the card already displays the title below the image.

Card Variant Icon Mapping

Metadata Integration

lib/contentstack/metadata.ts resolves OG images like this:

1. Use CMS image (metadata.image.url) when available.
2. If missing, build a fallback URL to /api/og with:
   • title: entry title
   • type: normalized content type label (Blog Post, Guide, Live Stream, etc.)
   • path: entry URL path
   • (Uses full variant for social sharing)

Card Integration

List cards and typeahead/search cards use the OG generator as a fallback when entry/card images are missing.

• Linked cards (linked_cards): Use variant=card — type + icon only, no redundant title.
• Static cards (cards): Use full variant — title + path (no contentType available).
• Search suggestions: Use full variant.

Behavior Notes

• Fallback OG image URLs are absolute and use getBaseUrl() from lib/contentstack/sitemap.ts.
• The renderer uses a unified teal-focused visual style across all fallback OG images.
• The OG header combines app/favicon.svg and public/Developers_Dark.svg.
• The title and path are grouped at the bottom; longer titles grow upward above the path row.
• It attempts to use local Beausite brand fonts and safely falls back to system fonts if unavailable.
• The generator clamps input length for stable rendering and safe layout.
• Existing CMS-defined OG images always take precedence.