What image size should I use?

1200 × 630 pixels (1.91:1) is the safe default — it satisfies Facebook, LinkedIn, Slack, and Twitter's `summary_large_image` card. Twitter's plain `summary` card uses 1:1, but most sites just use one image for both.

What's the difference between `summary` and `summary_large_image`?

`summary` shows a small square thumbnail next to the title and description. `summary_large_image` shows a full-width banner image above the title. Use the large one for content-heavy posts; the small one when the image is incidental.

Does the canonical link matter?

Yes. Crawlers use it to de-duplicate URL variants (`?utm_source=…`, trailing slashes) and route social engagement (likes, comments) to a single canonical URL.

Open Graph & Twitter Card Generator

Developer

Builds the standard preview-card metadata block every social platform and chat app looks for when someone shares your URL. Title, description, image, type, and the Twitter-specific card variant are all configurable. A small preview shows roughly how the link will appear in a social feed. Copy the result straight into your page's `<head>`.

—

BasicTitleDescriptionCanonical URLImage URLImage alt text

Open Graph

Site nameog:typeog:locale

Twitter Card

twitter:cardtwitter:site (@)twitter:creator (@)

<meta> block

<title>Site Title — Page Title</title>
<meta name="description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." />
<link rel="canonical" href="https://example.com/page" />

<!-- Open Graph -->
<meta property="og:title" content="Site Title — Page Title" />
<meta property="og:description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:image:alt" content="Cover image describing the page" />
<meta property="og:site_name" content="Example Site" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Site Title — Page Title" />
<meta name="twitter:description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." />
<meta name="twitter:image" content="https://example.com/og-image.png" />
<meta name="twitter:image:alt" content="Cover image describing the page" />
<meta name="twitter:site" content="@example" />
<meta name="twitter:creator" content="@author" />

Preview

Example Site

Site Title — Page Title

A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card.

Validate the result with Facebook's Sharing Debugger or Twitter's Card Validator after deploying.

How to use

Fill in title, description, canonical URL, and a 1200×630 cover image URL.
Pick the Open Graph `og:type` (article, website, …) and a Twitter card style (summary, summary_large_image, …).
Copy the generated block into your page's `<head>` — works in plain HTML, Astro, Next.js, etc.

Frequently asked questions

What image size should I use?: 1200 × 630 pixels (1.91:1) is the safe default — it satisfies Facebook, LinkedIn, Slack, and Twitter's `summary_large_image` card. Twitter's plain `summary` card uses 1:1, but most sites just use one image for both.
What's the difference between `summary` and `summary_large_image`?: `summary` shows a small square thumbnail next to the title and description. `summary_large_image` shows a full-width banner image above the title. Use the large one for content-heavy posts; the small one when the image is incidental.
Does the canonical link matter?: Yes. Crawlers use it to de-duplicate URL variants (`?utm_source=…`, trailing slashes) and route social engagement (likes, comments) to a single canonical URL.