What Is the Open Graph Protocol?

Every time you paste a URL into Slack, Twitter, or LinkedIn and a rich preview card appears — complete with a title, image, and description — you're seeing the Open Graph protocol at work. Developed originally by Facebook in 2010, Open Graph is now a widely adopted web standard that gives website owners control over how their content appears when shared across the social web.

At its core, Open Graph is a set of HTML <meta> tags placed in the <head> of a webpage. These tags declare structured metadata about the page — its title, type, image, and URL — in a format that crawlers and social platforms can reliably parse.

The Essential Open Graph Tags

To implement a basic Open Graph profile for any page, you need at minimum four properties:

  • og:title — The title of the content as it should appear in the preview.
  • og:type — The type of object (e.g., website, article, video.movie).
  • og:image — An absolute URL to an image that represents the content.
  • og:url — The canonical URL of the page.

A minimal implementation looks like this:

<meta property="og:title" content="My Article Title" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://example.com/images/preview.jpg" />
<meta property="og:url" content="https://example.com/my-article" />

Optional But Valuable Properties

Beyond the required four, several optional tags significantly improve how your content is displayed:

  • og:description — A short summary (typically 2–4 sentences) displayed beneath the title.
  • og:site_name — The name of your overall website, distinct from the page title.
  • og:locale — The locale of the content (e.g., en_US), important for international sites.
  • og:article:author and og:article:published_time — Article-specific metadata used by platforms like Facebook.

Image Best Practices

The og:image tag is arguably the most impactful for click-through rates. Follow these guidelines for optimal results across platforms:

  1. Use a minimum image size of 1200 × 630 pixels for high-resolution displays.
  2. Keep the file size under 8 MB — platforms may skip oversized images.
  3. Use absolute URLs, not relative paths. Crawlers need the full address.
  4. Prefer JPEG or PNG formats for maximum compatibility.
  5. Add og:image:width and og:image:height tags so renderers don't have to download the image just to get dimensions.

Twitter Cards and Open Graph

Twitter (now X) uses its own twitter: meta tag namespace, but it falls back to Open Graph tags when Twitter-specific tags are absent. If you want full control over Twitter previews, add at minimum:

  • twitter:card — Set to summary_large_image for a prominent image preview.
  • twitter:site — Your @username on the platform.

Validating Your Open Graph Tags

Before publishing, always validate your markup. The Meta Sharing Debugger (Facebook's tool) lets you enter any URL and see exactly how it will render, including any warnings about missing tags or invalid images. LinkedIn and Twitter offer similar debugging tools in their developer portals.

Keeping your Open Graph metadata accurate and up-to-date is a small investment that pays dividends every time someone shares your content — making it one of the highest-ROI items in any web developer's checklist.