When someone shares a link on Twitter/X, Facebook, LinkedIn, or Slack, you see a preview card with a title, description, and image. Those cards are powered by Open Graph meta tags — small HTML snippets in your page's
Getting them right is one of the highest-leverage quick wins in web development. A good social preview dramatically increases click-through rate.
The Core Tags
At minimum, every page needs these four:
``html
`
Four tags. That's it. They get you a functional preview on every major platform.
Extended Tags Worth Adding
`html
<!-- Use "article" for blog posts, "product" for e-commerce -->
<!-- Appears below the title on some platforms -->
<!-- Makes Twitter use a large image preview instead of a small thumbnail -->
`
The twitter: tags are separate because Twitter/X has its own spec. In practice, Twitter falls back to og: tags when twitter: tags are absent — but specifying both gives you more control over the Twitter card format.
The og:image Tag: Most Common Mistakes
Wrong size: og:image should be at least 1200 × 630 pixels. Smaller images appear blurry or get cropped.
Relative URL: The og:image value must be an absolute URL (https://...<code>). Relative paths (/images/preview.jpg) don't work for social crawlers.
Slow load: Social platform crawlers time out quickly. Your og:image should load fast and be under 300 KB. JPEG works best for photographic images.
Aggressive caching: Facebook and LinkedIn cache og:image heavily. After changing it, use their debugging tools (Facebook Sharing Debugger, LinkedIn Post Inspector) to force a re-scrape.
Verifying Your Tags
Every major platform has an official scraping tool:
- Facebook: developers.facebook.com/tools/debug/
- LinkedIn: linkedin.com/post-inspector/inspect/
- Twitter/X: Paste in Twitter cards validator
- Slack: Just paste the URL into a Slack message — it unfurls automatically
These show you exactly what the platform sees, including which tags it picks up and what the preview will look like.
Dynamic OG Tags in Common Frameworks
Next.js (App Router):
<code>js
<p>export const metadata = {</p>
<p>title: 'My Page',</p>
<p>openGraph: {</p>
<p>title: 'My Page',</p>
<p>description: 'Page description',</p>
<p>images: [{ url: 'https://yourdomain.com/og-image.jpg' }],</p>
<p>},</p>
<p>};</p>
</code>
WordPress: Yoast SEO generates OG tags automatically from your page title and featured image.
Static HTML: Add the tags manually to each page's .
Generating the Tags
Rather than writing the HTML by hand, SnappyTools has a free Open Graph Meta Tag Generator that lets you fill in a form, previews the card for Twitter/X, Facebook, and LinkedIn, and outputs the complete tag block to paste into your . No login, runs in your browser.
tl;dr: Four tags get you functional social previews everywhere. Add twitter:card: summary_large_image` for a large Twitter preview. Make your og:image 1200 × 630px, absolute HTTPS URL, under 300 KB.