All Docs
FeaturesCalmony Sanctions MonitorUpdated March 11, 2026

Rich Social Previews with Open Graph Tags

Rich Social Previews with Open Graph Tags

Available from: v0.1.2

When someone shares a link to Calmony on LinkedIn, Slack, Twitter/X, or Facebook, the platform will now render a rich preview card — including the product name, a one-line description, and a branded image — instead of displaying a bare URL.

Why This Matters

During a typical B2B evaluation, a compliance manager or procurement lead will share the Calmony link with colleagues in a Slack channel or LinkedIn message. Without Open Graph metadata, that share produces no visual context — just a plain link that is easy to overlook or dismiss. A well-formed preview card increases click-through and signals product credibility.

What Was Added

openGraph Metadata Block

The root layout at src/app/layout.tsx now exports an openGraph configuration alongside the existing metadata object:

// src/app/layout.tsx
export const metadata: Metadata = {
  // ...existing fields...
  openGraph: {
    title: 'Calmony Sanctions Monitor',
    description:
      'Automated UK sanctions screening and continuous monitoring. OFSI, EU, UN & OFAC lists.',
    url: 'https://calmony.com',
    siteName: 'Calmony',
    type: 'website',
    images: [
      {
        url: 'https://calmony.com/og-image.png',
        width: 1200,
        height: 630,
      },
    ],
  },
};

Because this is defined in the root layout, every page in the application inherits these tags automatically. Individual pages can override specific fields by exporting their own metadata object.

OG Image

A 1200×630 PNG has been placed at public/og-image.png and is served at https://calmony.com/og-image.png. This matches the recommended dimensions for LinkedIn, Facebook, and Twitter/X cards.

Verifying the Tags

After deploying, you can inspect the rendered tags using any of the following tools:

Expected output in the page source:

<meta property="og:title" content="Calmony Sanctions Monitor" />
<meta property="og:description" content="Automated UK sanctions screening and continuous monitoring. OFSI, EU, UN &amp; OFAC lists." />
<meta property="og:url" content="https://calmony.com" />
<meta property="og:site_name" content="Calmony" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://calmony.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Overriding Tags on Specific Pages

To customise the preview for a specific route (e.g. a public-facing marketing page), export a metadata object from that page file:

// src/app/some-page/page.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  openGraph: {
    title: 'Custom Page Title',
    description: 'Page-specific description.',
    images: [{ url: 'https://calmony.com/og-image-custom.png', width: 1200, height: 630 }],
  },
};

Next.js merges page-level openGraph fields over the root layout values.

Related SEO Controls

ControlDescriptionStatus
SEO-03Open Graph metadata✅ Resolved in v0.1.2