You share a link to your website on Slack, Twitter, LinkedIn, or iMessage, and instead of a nice preview card with a title, description, and image, you get a bare URL. Or worse, it pulls in the wrong image: maybe your favicon stretched to 600 pixels, or an unrelated photo from the sidebar.
This happens because the page is missing Open Graph tags, or has them set up incorrectly. These tags are easy to add and they control exactly what shows up when someone shares your link anywhere that generates link previews.
What Open Graph Tags Are
Open Graph is a protocol created by Facebook in 2010 that lets you specify how a web page should be represented when shared on social platforms. It uses <meta> tags in the <head> of your HTML. These are invisible to visitors browsing the page, but any service that generates a link preview reads them.
The basic tags look like this in your HTML:
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short description of the page" />
<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:type" content="website" />When someone pastes your URL into a social media post, a Slack message, a Discord channel, or a text message (on platforms that support previews), the platform’s crawler fetches your page, reads these tags, and builds a preview card from them.
Without these tags, the platform guesses, pulling the <title> tag, maybe the first paragraph of text, and whatever image it finds first. The result is usually unattractive, inaccurate, or both.
The Tags That Actually Matter
og:title
The title displayed on the preview card. Keep it under 60-70 characters so it doesn’t get truncated. This doesn’t have to match your <title> tag exactly. Your <title> might be optimized for search (“Best Coffee Shops in Portland | FoodBlog”), while your og:title can be more conversational (“The 12 Best Coffee Shops in Portland”).
og:description
A short summary displayed below the title on most platforms. Aim for 1-2 sentences, under 200 characters. Some platforms (Twitter/X) don’t display this at all, while others (LinkedIn, Facebook) show it prominently.
og:image
This is the most impactful tag. A good preview image dramatically increases engagement. Studies consistently show that social posts with images get significantly more clicks and shares than text-only posts.
Size: Use at least 1200×630 pixels for best results across platforms. Facebook recommends this aspect ratio (1.91:1). Images smaller than 600×315 may display but won’t look good.
Format: JPEG or PNG. Avoid SVG (most crawlers don’t render it) and be careful with WebP (some platforms still don’t support it in OG tags).
URL: Must be an absolute URL (starting with https://), not a relative path. This is the most common mistake: og:image="/images/preview.jpg" won’t work; it needs to be og:image="https://yoursite.com/images/preview.jpg".
File size: Keep it under 5 MB. Platforms have varying limits, and large images slow down preview generation.
og:url
The canonical URL for the page. This tells platforms which URL to use as the “official” link, which matters if your content is accessible at multiple URLs (with or without www, with tracking parameters, etc.).
og:type
Usually “website” for general pages or “article” for blog posts and news. This affects how some platforms categorize the content but doesn’t visually change the preview in most cases.
Twitter/X Cards: A Separate System
Twitter (now X) uses its own meta tags in addition to Open Graph. If Twitter-specific tags are present, they take priority; if not, Twitter falls back to Open Graph tags.
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://yoursite.com/images/preview.jpg" />The key difference is twitter:card, which controls the preview format:
- summary: Small square image with title and description to the right
- summary_large_image: Large image above the title and description (this is what most sites use, and it’s more visually prominent)
If you only want to maintain one set of tags, use Open Graph tags; Twitter will fall back to them. But if you want full control over the Twitter preview (different image crop, shorter description), add the Twitter-specific tags too.
Common Mistakes
Relative image URLs. The most frequent issue. og:image must be an absolute URL starting with https://.
Missing og:image entirely. Without it, platforms show a text-only preview or try to find any image on the page. The result is unpredictable.
Image too small. An image under 200×200 pixels may not be used at all by some platforms. Aim for 1200×630.
Same tags on every page. If your homepage OG tags are hardcoded and every page inherits them, every shared link will show the homepage title and image, regardless of which page was actually shared. Each page should have its own OG tags.
Not testing after changes. Platforms cache preview data aggressively. After updating your OG tags, you may need to clear the cache before the new preview appears. Facebook has a Sharing Debugger, Twitter has a Card Validator, and LinkedIn has a Post Inspector, and each lets you clear the cache and force a re-crawl.
Forgetting about dynamic content. If your page is a single-page app that renders content with JavaScript, most social media crawlers won’t execute your JavaScript. They see an empty page with no OG tags. Server-side rendering or static generation is necessary for OG tags to work reliably.
Setting Up OG Tags Is Quick
For most sites, it’s a one-time setup per page template. Static site generators and CMS platforms usually have plugins or built-in support. WordPress has Yoast SEO, Next.js generates tags from page metadata, and Astro lets you set them in the <head> of your layout component.
Use the OG Preview on ToolzHQ to see exactly how your page will look when shared, or use the Meta Tag Generator to create the tag markup and paste it into your page’s <head>.