> ## Documentation Index
> Fetch the complete documentation index at: https://docs.convertly.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# Social & Open Graph images

> Generate 1200×630 OG cards, Twitter summaries, and LinkedIn previews from one hero with presets and text overlays.

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](/docs/image-cdn/presets-and-signing).

## Quick OG image

```html theme={"system"}
<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](/docs/image-cdn/smart-cropping):

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

Or persist analyze output once:

```html theme={"system"}
<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:

```html theme={"system"}
<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](/docs/image-cdn/transforms/text-overlays) for fonts, alignment, and stroke options.

## React helper

```tsx theme={"system"}
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",
        }
      : {}),
  });
}
```

```tsx theme={"system"}
// 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](/guides/responsive-images#art-direction-with-picture) 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](/guides/image-cdn-setup) and build:

```html theme={"system"}
<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:

1. **Preferred:** upload a new file id and update meta tags.
2. **In place:** purge `asset:{fileId}` — see [Cache-tag purge](/docs/image-cdn/operations#purge-by-cache-tag).

## Related docs

* [Presets and signed URLs](/docs/image-cdn/presets-and-signing)
* [Smart cropping](/docs/image-cdn/smart-cropping)
* [Responsive images](/guides/responsive-images)