Open Graph Preview

The Open Graph protocol, explained

Open Graph is a protocol introduced by Facebook in 2010 and now specified at ogp.me. It turns any URL into a rich object: when a crawler hits a page with OG tags, it renders a card with title, description, image, and link instead of a plain-text URL.

The protocol defines four required properties per page: og:title, og:type (typically website or article), og:image, and og:url. Everything else — og:description, og:site_name, og:locale — is optional but strongly recommended for a polished preview.

• og:title — the headline; keep under ~60 characters to avoid truncation in cards
• og:image — absolute URL; recommended 1200×630 px, at least 200×200 minimum
• og:url — the canonical URL; used when aggregating shares and engagement
• og:type — affects which additional properties are valid (article has author, published_time, etc.)

The 1200×630 image standard

A single image at 1200 × 630 pixels (a 1.91:1 aspect ratio) renders cleanly across Facebook, X, LinkedIn, Discord, and Slack with minimal cropping. The Meta sharing documentation recommends at least 1200×630 for high-resolution displays, with an 8 MB file-size ceiling.

Twitter's summary_large_image card technically prefers a 2:1 ratio (1200×600), but in practice a 1200×630 OG image displays well there too. Keep important content away from the edges to survive any platform-specific cropping.

<meta property="og:image" content="https://devtidy.com/og/json-formatter.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="JSON Formatter — DevTidy">

Twitter Cards and the twitter: namespace

X (formerly Twitter) reads Open Graph tags as a fallback but also defines its own twitter:* namespace for finer control. Setting twitter:card to summary_large_image requests the large image card; summary requests the small square thumbnail.

When both OG and Twitter tags are present, Twitter prefers the Twitter-specific values. Most sites get away with OG tags plus a single twitter:card declaration — the rest of the OG set fills in automatically. The X Card documentation lists the minimum image dimensions (300×157) and maximum (4096×4096) for large-image cards.