Skip to main content
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/{namespace}/{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/{namespace}/{fileId}?preset=og-card&gravity=smart"
/>
Or persist analyze output once: 
<meta
  property="og:image"
  content="https://cdn.convertly.sh/{namespace}/{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/{namespace}/{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

PlatformSuggested params
Facebook / LinkedIn OGpreset=og-card (1200×630)
Twitter / X large cardw=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/{namespace}/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.