When someone shares a link on Facebook, LinkedIn, Slack, or Discord, the platform scrapes your page for Open Graph (OG) tags to build the preview card. Without OG tags, platforms guess -- and they usually guess wrong. You get a missing image, a truncated title, or a description pulled from your navigation menu.
OG tags take ten minutes to implement and permanently improve how your content appears across every social platform.
What are Open Graph tags
Open Graph is a protocol originally created by Facebook that lets you control how your page appears when shared. The tags are HTML meta elements placed in your page's <head> section.
The core OG tags:
og:title-- the title shown in the share previewog:description-- the description textog:image-- the preview imageog:url-- the canonical URL for the shared pageog:type-- the content type (website, article, product)
Required Open Graph tags
og:title
The title displayed in social share cards. This can differ from your <title> tag -- use it to craft a more social-friendly version.
<meta property="og:title" content="How to write meta descriptions that get clicks" />Tips:
- Keep it under 60 characters to avoid truncation
- Make it compelling for a social media audience
- Include the core topic but skip SEO keyword stuffing
og:description
A brief summary shown below the title in share cards.
<meta property="og:description" content="Meta descriptions directly affect click-through rates. Learn the formulas and templates that work in 2026." />Tips:
- Keep it under 155 characters
- Focus on the value proposition
- Write for humans scrolling a feed, not search engines
og:image
The preview image is the single most important OG tag. Posts with images get significantly more engagement than text-only links.
<meta property="og:image" content="https://example.com/images/meta-descriptions-guide.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Guide to writing meta descriptions" />Requirements:
- Minimum size: 1200x630 pixels for best results
- Aspect ratio: 1.91:1 (landscape)
- File size: under 5MB (ideally under 1MB)
- Format: JPG or PNG
- Always use an absolute URL, not a relative path
og:url
The canonical URL for the content. This ensures all shares point to the same URL, consolidating engagement metrics.
<meta property="og:url" content="https://example.com/blog/meta-descriptions" />og:type
Defines the content type. Use "website" for homepages, "article" for blog posts, and "product" for ecommerce pages.
<meta property="og:type" content="article" />Twitter card tags
Twitter (X) uses its own card markup that supplements OG tags. If Twitter card tags are not present, Twitter falls back to OG tags.
Summary card
For standard content with a small image:
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Your title here" />
<meta name="twitter:description" content="Your description here" />
<meta name="twitter:image" content="https://example.com/image.jpg" />Summary with large image
For content where the image should be prominent:
<meta name="twitter:card" content="summary_large_image" />Use summary_large_image for blog posts, articles, and any content where a visual preview adds value. Use summary for tool pages, documentation, and utilitarian content.
Platform-specific considerations
LinkedIn uses OG tags but caches aggressively. After updating your OG tags, use LinkedIn's Post Inspector to force a cache refresh.
Slack and Discord
Both platforms support OG tags. Slack also reads twitter:card for layout decisions. Discord shows a colored sidebar that matches your site's theme color, which you can control with:
<meta name="theme-color" content="#00d4ff" />iMessage and SMS
Apple's Messages app uses OG tags to generate link previews. The og:image is especially important here since the preview is the primary visual element.
Common OG tag mistakes
Missing og:image
The most common mistake. Without an image, your shared links look broken. Always provide a fallback image, even if it is your logo on a branded background.
Relative image URLs
OG images must use absolute URLs starting with https://. Relative paths like /images/preview.jpg will not work.
Wrong image dimensions
Images smaller than 200x200 pixels may not display at all on some platforms. Images with the wrong aspect ratio get cropped awkwardly. Always use 1200x630 pixels.
Stale cache
Platforms cache OG data. If you update your tags, the old preview may persist for hours or days. Use platform-specific cache invalidation tools to force a refresh.
Duplicate tags
Multiple og:title or og:image tags confuse scrapers. Ensure each OG property appears exactly once.
Debugging your OG tags
Test your tags before and after publishing:
- Use SilverGecko's OG Debugger to preview how your page will appear on major platforms and identify missing or malformed tags.
- Facebook Sharing Debugger (developers.facebook.com/tools/debug) shows exactly what Facebook sees and lets you clear the cache.
- Twitter Card Validator previews how your card will appear on Twitter.
- LinkedIn Post Inspector checks your OG tags and refreshes LinkedIn's cache.
Implementing OG tags in common frameworks
Most modern frameworks support OG tags through their metadata APIs. In Next.js, use the metadata export or generateMetadata function. In WordPress, plugins like Yoast handle OG tags automatically. For static sites, add the meta tags directly to your HTML <head>.
Regardless of your framework, validate the output with SilverGecko's OG Debugger to ensure tags render correctly in production.
Generate OG tags automatically
Writing OG tags for every page is tedious. Use SilverGecko's Meta Generator to create OG tags alongside your title and meta description, then validate them with the OG Debugger to confirm everything displays correctly across platforms.