Skip to content

Open Graph Tags: How to Control How Your Links Look on Social Media

When someone shares a link on Twitter, Facebook, LinkedIn, Slack or Discord, the platform generates a preview card with a title, description and image. These previews are not magic. They are controlled by Open Graph meta tags in your HTML. Getting them right is the difference between a link that gets clicks and one that gets ignored.

What is Open Graph?

Open Graph is a protocol originally created by Facebook in 2010. It defines a set of meta tags you place in the <head> of your HTML document. When a social platform crawls your page, it reads these tags to build the preview card. Without them, the platform guesses from your page content, often with poor results like truncated titles, missing images or irrelevant descriptions.

The Essential Open Graph Tags

Every page you want to share on social media should include these four core tags:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling description under 200 characters." />
<meta property="og:image" content="https://example.com/image.png" />
<meta property="og:url" content="https://example.com/page/" />

Additional useful tags include og:type (usually "website" or "article"), og:site_name (your brand), og:locale (language) and for articles, article:published_time and article:author.

Twitter Card Tags

Twitter (X) uses its own set of meta tags alongside Open Graph. If Twitter-specific tags are not present, it falls back to the equivalent og: tags. The most important Twitter-specific tag is the card type:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A compelling description." />
<meta name="twitter:image" content="https://example.com/image.png" />

The summary_large_image card type shows a large preview image above the title and description. The plain summary type shows a small square thumbnail to the left. For most content, summary_large_image generates more engagement.

LinkedIn and Other Platforms

LinkedIn reads standard Open Graph tags and does not have its own tag format. However, LinkedIn is stricter about image requirements. Images must be at least 1200 x 627 pixels and should not be SVG format. LinkedIn caches aggressively, so changes to your OG tags may not appear immediately.

Slack, Discord, iMessage and other messaging apps also read Open Graph tags. Most of them support the same core four tags. Discord additionally shows og:site_name and theme-color in its embed sidebar.

Image Requirements

The OG image is the most visible part of a social share. Getting it wrong means an ugly preview or no image at all. Here are the requirements that work across all major platforms:

  • Dimensions: 1200 x 630 pixels is the universal safe size. It works on Facebook, Twitter, LinkedIn, Slack and Discord without cropping.
  • Format: PNG or JPEG. SVG is not supported by any social platform. WebP has limited support.
  • File size: Keep it under 5 MB. Twitter recommends under 1 MB for fastest loading. Facebook allows up to 8 MB.
  • URL: Must be an absolute URL starting with https://. Relative paths will not work.
  • Aspect ratio: 1.91:1 for landscape cards. Keep important content (text, logos) away from the edges as different platforms crop slightly differently.

Debugging Your Preview

After adding OG tags, you need to verify they work. Each platform has a debugger tool:

  • Facebook: The Sharing Debugger at developers.facebook.com/tools/debug lets you paste a URL and see exactly what Facebook reads. It also lets you clear the cache.
  • Twitter: The Card Validator at cards-dev.twitter.com/validator shows how your card will appear. Note that Twitter caches cards for about 7 days.
  • LinkedIn: The Post Inspector at linkedin.com/post-inspector lets you preview and refresh LinkedIn's cache.

For a quick local check before deploying, you can use an OG preview tool that parses your meta tags and shows a mock preview for each platform side by side.

Common Mistakes

  • Missing og:image: Without an image, your link preview is a plain text box that gets very few clicks. Always include an image, even if it is a default branded card.
  • Using SVG for og:image: Social crawlers cannot render SVG files. Export to PNG at 1200 x 630.
  • Relative URLs: All OG tag values must use full absolute URLs. /images/card.png will not work.
  • Forgetting cache: Social platforms cache your OG data aggressively. After updating tags, you must explicitly clear the cache using the platform's debugger tool. Simply changing the HTML is not enough for already-shared links.
  • Title too long: Keep og:title under 60 characters. Platforms truncate longer titles with ellipsis, which looks unprofessional.
  • Description too long: Keep og:description under 200 characters for full display. Facebook shows about 155 characters, Twitter about 200.

Best Practices for Click-Through Rate

Beyond the technical requirements, good OG tags drive engagement. Use a clear, benefit-driven title that makes people want to click. Write a description that creates curiosity or promises a specific outcome. Design your OG image with large, readable text and your brand colors so it stands out in a feed full of content. Test different images and titles to see what resonates with your audience.

Try it yourself

Enter your OG tags and see a live preview of how your link will look on Facebook, Twitter, LinkedIn and Slack. No server needed.

Open OG Preview →