When someone shares your webpage on Facebook, Twitter, LinkedIn, or Slack, something magic happens behind the scenes. Social platforms don't just copy and paste your HTML -- they read special meta tags called Open Graph tags to figure out what title, description, and image to display. Without these tags, your page might show up with a broken image, a generic description, or worse, nothing at all.
This guide walks you through setting up Open Graph tags properly so your content looks professional and compelling when shared across social media.
What Are Open Graph Tags?
Open Graph (OG) is a protocol created by Facebook that tells social platforms how to represent your webpage. When someone clicks "Share" on Facebook or pastes a link into Twitter, those platforms immediately fetch your page and look for specific meta tags in the HTML head.
These tags give platforms structured information about your content -- the title, description, image, URL, and content type. Without them, platforms make their best guess, which often isn't very good.
Open Graph tags are just HTML meta tags. They look like this:
<meta property="og:title" content="My Awesome Article">
<meta property="og:description" content="Learn how to set up Open Graph tags">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/article">
The key difference from regular meta tags is the use of property instead of name. This is important -- if you use name instead of property, platforms won't recognize your OG tags.
The Essential Open Graph Tags
You need four core tags on every page. Everything else is optional, but these four should be non-negotiable.
og:title
The title that appears when your page is shared. Keep it concise and compelling -- between 40 and 60 characters works best on most platforms.
<meta property="og:title" content="7 Mistakes That Kill Your Website's Conversion Rate">
Pro tip: Your og:title can differ from your HTML title tag. On your actual page, you might use a longer title for SEO, but the OG title can be shorter and more punchy for social sharing.
og:description
The preview text that appears below the title. This is your one chance to hook someone scrolling through their feed. Aim for 150-160 characters.
<meta property="og:description" content="Most websites leave money on the table. Here's exactly what you need to fix to turn visitors into customers.">
og:image
The image that displays when someone shares your link. This is crucial -- an attention-grabbing image gets 4x more clicks than plain text.
<meta property="og:image" content="https://example.com/social-preview.jpg">
Use an absolute URL (not a relative path). The image should be high quality and readable at small sizes. More on image specifications in the next section.
og:url
The canonical URL of the page being shared. This tells platforms which page this data belongs to.
<meta property="og:url" content="https://example.com/article/open-graph-guide">
Always use the full URL, including the protocol (https://). This prevents issues where the same content lives at multiple URLs.
Image Size Requirements
Open Graph images are the most technically finicky part of social meta tags. Get this wrong and your image might not display at all, or it might get cropped weirdly.
Minimum and Recommended Sizes
For general sharing (Facebook, LinkedIn, Pinterest):
- Minimum: 1200 x 630 pixels (1.91:1 aspect ratio)
- Recommended: 1200 x 630 pixels exactly
- File format: JPG or PNG
- File size: Keep it under 5 MB (under 300 KB is better for page load speed)
For Twitter:
- Minimum: 300 x 157 pixels
- Recommended: 1200 x 630 pixels (same as other platforms for consistency)
- File format: JPG, PNG, or GIF
For LinkedIn:
- Recommended: 1200 x 627 pixels (almost identical to Facebook)
The 1200x630 size is the sweet spot because it works well across all major platforms. If you only want one image, that's the size to use.
How to Create Your Image
Your og:image should be:
- Readable at 100x100 pixels -- this is how small it might appear in feeds
- Branded -- use your logo or color scheme so it stands out
- Relevant to the content -- don't use generic stock photos
- Text-focused -- include your headline or main topic as large text
Here's an example of a well-designed OG image:
- Light background with high contrast text
- Your brand logo in the corner
- Main headline in 48-72pt font
- 1200x630px dimensions
Canva, Figma, and even simple tools like Photoshop templates make it easy to batch-create these images once you have a template.
Platform-Specific Considerations
Different social platforms handle Open Graph tags slightly differently.
Facebook reads og:title, og:description, og:image, and og:url. It caches this information aggressively, so if you change your OG tags, Facebook might show the old version for days. Use the Facebook Sharing Debugger to force a refresh (more on that later).
Facebook also looks for og:type, which defaults to "website" but can be "article" for news content:
<meta property="og:type" content="article">
Twitter / X
Twitter doesn't actually read Open Graph tags. Instead, it reads Twitter Card tags:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Your description here">
<meta name="twitter:image" content="https://example.com/image.jpg">
The twitter:card value can be:
summary(small image, text-heavy)summary_large_image(large image dominates the preview)player(for video/audio)app(for mobile app promotion)
Use summary_large_image if you have a strong visual. Otherwise, summary is fine.
Here's a complete Twitter setup:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourhandle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description">
<meta name="twitter:image" content="https://example.com/image.jpg">
LinkedIn primarily reads Open Graph tags (og:title, og:description, og:image), but respects a few additional optional tags:
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="article">
LinkedIn prefers images that are 1200x627 (slightly shorter than Facebook).
Slack
Slack reads Open Graph tags but also respects og:image:alt for accessibility. Add this:
<meta property="og:image:alt" content="Description of the image for screen readers">
Complete HTML Example
Here's what a fully-configured page looks like in the head section:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Open Graph Tags - How to Control Social Sharing | Example.com</title>
<!-- Open Graph Tags -->
<meta property="og:type" content="article">
<meta property="og:title" content="Open Graph Tags: Control How Pages Look When Shared">
<meta property="og:description" content="Complete guide to Open Graph meta tags. Learn og:title, og:description, og:image, image sizes, platform differences, and debugging.">
<meta property="og:image" content="https://example.com/images/og-tags-guide.jpg">
<meta property="og:image:alt" content="Open Graph meta tags setup guide">
<meta property="og:url" content="https://example.com/articles/open-graph-tags">
<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Open Graph Tags: Control How Pages Look When Shared">
<meta name="twitter:description" content="Complete guide to Open Graph meta tags. Learn og:title, og:description, og:image, image sizes, platform differences, and debugging.">
<meta name="twitter:image" content="https://example.com/images/og-tags-guide.jpg">
<meta name="twitter:site" content="@example">
<!-- Standard Meta Tags -->
<meta name="description" content="Learn how to set up Open Graph tags to control how your web pages appear on social media platforms.">
<meta name="keywords" content="open graph, og tags, social sharing, meta tags">
</head>
<body>
<!-- Your page content -->
</body>
</html>
Debugging Open Graph Tags
Made a mistake or want to see what your page actually looks like to social platforms? Use these debugging tools.
Facebook Sharing Debugger
Visit https://developers.facebook.com/tools/debug/ and paste your URL. This shows exactly what Facebook sees and lets you force a cache refresh if you've updated your tags.
Twitter Card Validator
Visit https://cards-dev.twitter.com/validator and enter your URL to see how Twitter will display it.
LinkedIn Post Inspector
Paste your URL into https://www.linkedin.com/feed/ and share it as a link preview to see what LinkedIn shows.
Simple Manual Check
Paste your URL into a search box on the social platform you're targeting and see what preview appears. This is the real-world test.
Common Mistakes to Avoid
Using relative URLs: Always use absolute URLs (https://example.com/image.jpg, not /image.jpg). Social platforms need to fetch your images from the internet, and they don't know your site's base URL.
Skipping og:url: Without this tag, platforms might attribute the share to the wrong URL if your content appears on multiple pages.
Using the wrong og:image dimensions: A 400x300 image will look blurry and might not display at all. Always use 1200x630.
Forgetting Twitter Card tags: Facebook and LinkedIn read OG tags, but Twitter doesn't. If you don't add Twitter Card tags, Twitter falls back to guessing.
Not refreshing the cache: Change your OG tags and immediately test on Facebook? Facebook won't show the new version for hours. Use the Sharing Debugger to force a refresh.
Inconsistent og:title and og:description: Make sure what you promise in your OG tags matches what's actually on the page. Users will click expecting one thing and get another.
Open Graph vs. Structured Data
You might wonder about the difference between Open Graph tags and JSON-LD structured data. They serve different purposes:
Open Graph tags are specifically for social media sharing. They tell Facebook, Twitter, and LinkedIn how to display your link.
Structured data (JSON-LD) helps search engines understand your content. It appears in Google search results as rich snippets, reviews, or other enhanced displays.
You should use both. OG tags handle social sharing, and structured data improves SEO and search result appearance. They don't conflict -- they work together.
Next Steps
Start by auditing your site's pages. Which ones get shared the most on social media? Prioritize those for proper Open Graph tags. For high-traffic pages, create custom og:images that match your brand.
Use a tool like the Meta Tag Generator to quickly build the correct HTML, then paste it into your page templates. Test with Facebook's Sharing Debugger to confirm everything displays correctly.
Done right, Open Graph tags are invisible infrastructure that makes your content shine when shared. Done wrong, your links look broken and unprofessional. The good news? It only takes five minutes to set up correctly.