Social & Open Graph images

Social platforms expect specific aspect ratios — usually 1200×630 (1.91:1) for Open Graph and LinkedIn, 1200×600 for Twitter large summary cards. Convertly generates every size from one stored hero with URL parameters — no separate Photoshop exports. Built-in preset og-card (alias social-preview) applies w=1200, h=630, fit=cover, JPEG q88. See Presets.

Quick OG image

<meta property="og:image" content="https://cdn.convertly.sh/{endpointNamespace}/{fileId}/p/og-card" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Path form (/p/og-card) and query form (?preset=og-card) are equivalent.

With smart cropping

Off-centre heroes benefit from gravity=smart or a stored focal point from image analysis:

<meta
  property="og:image"
  content="https://cdn.convertly.sh/{endpointNamespace}/{fileId}?preset=og-card&gravity=smart"
/>

Or persist analyze output once:

<meta
  property="og:image"
  content="https://cdn.convertly.sh/{endpointNamespace}/{fileId}?w=1200&h=630&fit=cover&fp=0.42,0.35&format=jpg&q=88"
/>

Branded cards with text overlay

Add title and subtitle on the fly — useful for blog posts and product launches:

<meta
  property="og:image"
  content="https://cdn.convertly.sh/{endpointNamespace}/{fileId}?w=1200&h=630&fit=cover&gravity=smart&format=jpg&text=Launch%20Week&textSize=56&textColor=ffffff&textPosition=bottom-left&textBg=000000aa"
/>

See Text overlays for fonts, alignment, and stroke options.

React helper

import { createConvertlyCdn } from "@convertly-sh/image";

const cdn = createConvertlyCdn({ namespace: process.env.NEXT_PUBLIC_CONVERTLY_CDN_NAMESPACE! });

export function ogImageUrl(fileId: string, title?: string) {
  return cdn.url(fileId, {
    preset: "og-card",
    gravity: "smart",
    ...(title
      ? {
          text: title,
          textSize: 48,
          textColor: "ffffff",
          textPosition: "bottom-left",
          textBg: "00000099",
        }
      : {}),
  });
}

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    openGraph: {
      images: [{ url: ogImageUrl(post.heroFileId, post.title), width: 1200, height: 630 }],
    },
    twitter: { card: "summary_large_image", images: [ogImageUrl(post.heroFileId, post.title)] },
  };
}

Multiple platforms from one source

Platform	Suggested params
Facebook / LinkedIn OG	`preset=og-card` (1200×630)
Twitter / X large card	`w=1200&h=600&fit=cover&format=jpg`
Square share (some apps)	`w=1200&h=1200&fit=cover&gravity=smart`

Use <picture> art direction when mobile shares need a different crop than link previews.

Origin-backed marketing sites

If the hero lives on your deployed site (public/hero.jpg), register an origin source and build:

<meta
  property="og:image"
  content="https://cdn.convertly.sh/{endpointNamespace}/o/site/hero.jpg?preset=og-card"
/>

Caching and updates

OG URLs are cached aggressively at the edge. When you change the hero:

Preferred: upload a new file id and update meta tags.
In place: purge asset:{fileId} — see Cache-tag purge.

Build Flows

Image CDN

AI Agents

Quick OG image

With smart cropping

Branded cards with text overlay

React helper

Multiple platforms from one source

Origin-backed marketing sites

Caching and updates

​Quick OG image

​With smart cropping

​Branded cards with text overlay

​React helper

​Multiple platforms from one source

​Origin-backed marketing sites

​Caching and updates

​Related docs

Quick OG image

With smart cropping

Branded cards with text overlay

React helper

Multiple platforms from one source

Origin-backed marketing sites

Caching and updates

Related docs