Why Social Previews Matter
When you launch a product, the vast majority of your initial traffic will come from social media shares (Twitter, LinkedIn) and dark social (Discord, Slack, iMessage).
If you drop a link in a Slack channel and it just renders as plain blue text with no image, your click-through rate plummets. A well-configured Open Graph setup transforms that plain link into a massive, eye-catching billboard inside the chat or feed.
The Essential Tags You Need
To get a perfect social preview across all platforms, you only need to add these meta tags to the <head> of your website:
Standard Open Graph (Facebook, LinkedIn, Discord)
<meta property="og:title" content="Your Catchy Title" /> <meta property="og:description" content="A brief description of what the page is about." /> <meta property="og:image" content="https://yoursite.com/og-image.jpg" /> <meta property="og:url" content="https://yoursite.com" /> <meta property="og:type" content="website" />
Twitter Cards (X)
Twitter uses its own tags, but it will gracefully fall back to Open Graph if Twitter tags are missing. However, to guarantee a large image format, you must include the card type.
<meta name="twitter:card" content="summary_large_image" />
Frequently Asked Questions
What is Open Graph (OG)?
Open Graph (OG) is a protocol introduced by Facebook that allows any web page to become a rich object in a social graph. It is used by almost all major social platforms (Facebook, LinkedIn, Discord) to display a preview image, title, and description when a URL is shared.
What are Twitter Cards?
Twitter Cards are similar to Open Graph but specific to Twitter (X). The most common is the 'summary_large_image' card, which tells Twitter to display a large, prominent image preview instead of a small thumbnail.
What size should my og:image be?
The standard and most widely supported size for an og:image is 1200 x 630 pixels. This 1.91:1 aspect ratio looks perfect on LinkedIn, Facebook, Twitter, and most messaging apps.
Why isn't my social preview showing up?
If your preview isn't showing, it's usually because: 1) The og:image URL is relative instead of absolute (it must start with https://), 2) The image is too large (over 5MB), or 3) The social platform has heavily cached an older version of your page.