Open Graph Meta Tags: How to Control Your Link Previews

I learned about Open Graph tags while optimizing a therapist's website for Facebook sharing. The site was a single page, but it was shared on social networks constantly — and the preview was showing a random image, a truncated URL as the title, and no description at all. A poor first impression for every share.

Open Graph tags are what give you control over that preview. Without them, Facebook, LinkedIn, and other platforms guess — and they usually guess wrong.

What are Open Graph tags

Open Graph is a protocol originally created by Facebook in 2010 that lets any web page define how it should appear when shared as a link. Today it is supported by Facebook, LinkedIn, Slack, WhatsApp, Discord, iMessage, and most other platforms that generate link previews.

The metadata is passed as the property attribute on a standard HTML <meta> tag, with values prefixed by og::

<meta property="og:title" content="Main title" />

The essential tags

These five cover the vast majority of use cases. Every page that gets shared should have all of them.

<meta property="og:title" content="Main title" />
<meta property="og:image" content="https://example.com/preview.jpg" />
<meta property="og:url" content="https://www.example.com/" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Description with keywords" />

What each one does:

• og:title — the main heading shown in the link preview. Keep it under 60 characters so it doesn't get cut off on mobile.
• og:image — the thumbnail shown alongside the preview. Must be an absolute URL, not a relative path. This is the most impactful tag — a good image dramatically increases click-through rate.
• og:url — the canonical URL of the page. Important to include because some platforms won't display the image correctly without it, and it prevents duplicate content issues when the same page is accessible at multiple URLs.
• og:type — the content type. Use website for homepage and general pages, article for blog posts, profile for user profiles. The type determines which additional optional tags are valid.
• og:description — the shorter body text shown under the title in most previews. Aim for 2–3 sentences, around 200 characters.

For article pages, add these two as well:

<meta property="og:site_name" content="Your Site Name" />
<meta property="article:published_time" content="2025-04-30" />
<meta property="article:author" content="Author Name" />

Image guidelines

The image is the single most important Open Graph tag. A few rules that save debugging time:

• Always use an absolute URL. https://example.com/image.jpg, not /image.jpg. Crawlers fetch the image directly and don't resolve relative paths.
• Recommended size: 1200 x 630px. This is the ratio Facebook and LinkedIn use for large preview cards. Smaller images fall back to a thumbnail layout.
• Keep file size under 8MB. Facebook's limit is 8MB but practically anything over 1MB will slow down the preview generation.
• Use JPEG or PNG. WebP is not universally supported by social media crawlers yet.
• Add og:image:width and og:image:height. This lets crawlers display the image without downloading and measuring it first, which speeds up preview generation.

<meta property="og:image" content="https://example.com/preview.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Description of the image" />

Twitter Cards

Twitter (now X) has its own parallel system called Twitter Cards. The tags are similar but use a name attribute instead of property. Most platforms fall back to Open Graph if Twitter Card tags are missing, but setting both is the correct approach.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Main title" />
<meta name="twitter:description" content="Description" />
<meta name="twitter:image" content="https://example.com/preview.jpg" />

The twitter:card value controls the layout. summary_large_image shows a full-width image above the title — the most visually prominent option and the one worth using for most pages.

Where to place them

Place all Open Graph tags inside the <head> element, as early as possible — ideally before any stylesheets or scripts. Social media crawlers are not full browsers; they stop parsing after a certain point, and tags buried at the bottom of a large <head> may not be read.

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Open Graph — place near the top -->
  <meta property="og:title" content="Main title" />
  <meta property="og:description" content="Description" />
  <meta property="og:image" content="https://example.com/preview.jpg" />
  <meta property="og:url" content="https://example.com/" />
  <meta property="og:type" content="website" />

  <!-- Twitter Cards -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Main title" />
  <meta name="twitter:description" content="Description" />
  <meta name="twitter:image" content="https://example.com/preview.jpg" />

  <link rel="stylesheet" href="styles.css" />
</head>

Debugging and preview tools

After adding your tags, platforms cache the old preview for a while. You need to force them to re-scrape. These tools do that and show you exactly what the preview will look like:

• metatags.io — previews how your page looks on Facebook, Twitter, LinkedIn, Slack, and others simultaneously. The fastest way to check everything at once.
• Facebook Sharing Debugger — Meta's official tool at developers.facebook.com/tools/debug. Lets you force a re-scrape of the cache and shows exactly what Facebook reads from your page. I used this constantly during the therapist site project.
• LinkedIn Post Inspector — linkedin.com/post-inspector. Same idea but for LinkedIn. Useful because LinkedIn sometimes caches aggressively and ignores updates.
• Twitter Card Validator — cards-dev.twitter.com/validator. Shows the Twitter Card preview and any validation errors.

For the full list of available Open Graph properties — including music, video, book, and profile types — the official reference is at ogp.me.

Invest the time during development to set these up correctly. Every share of your page is a small advertisement — Open Graph tags determine whether that advertisement looks professional or broken.

← All articles  ·  Portfolio