Open Graph Tags: Control How Your Content Appears When Shared

March 15, 2026 · 6 min read

What Is the Open Graph Protocol?

The Open Graph protocol, originally created by Facebook in 2010, is a set of HTML meta tags that tell social media platforms how to display your web page when someone shares it. Without Open Graph tags, platforms guess what to show—often picking the wrong image, truncating the title, or displaying a generic description. With proper OG tags, you control exactly what appears.

Think about the last time you shared a link on Facebook, LinkedIn, or in a messaging app. That rich preview card with the image, title, and description? That is Open Graph in action. The difference between a well-configured OG preview and a broken one can mean the difference between someone clicking your link or scrolling past it.

The protocol has expanded beyond Facebook. Today, Twitter, LinkedIn, Pinterest, Slack, Discord, WhatsApp, Telegram, and virtually every platform that generates link previews reads Open Graph tags. Implementing them once improves your content's appearance everywhere.

For website owners and marketers, OG tags are not optional—they are essential. Pages shared on social media without OG tags look unprofessional and generate significantly lower engagement compared to properly tagged content.

Essential Open Graph Tags

Every web page should include these four core Open Graph tags at minimum:

<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A compelling description of your page">
<meta property="og:image" content="https://dl-kit.com/og-image.svg">
<meta property="og:url" content="https://yoursite.com/page">

og:title — The title that appears in the share preview. This can differ from your HTML <title> tag. Keep it under 60 characters for optimal display across platforms. Make it compelling and specific—this is what convinces someone to click.

og:description — A brief summary of the page content. Aim for 155-200 characters. This appears below the title in most share previews. Write it as a hook that entices the reader to learn more, not as a dry summary.

og:image — The preview image is the single most impactful OG tag. Posts with compelling images receive dramatically more engagement. Use an absolute URL (starting with https://), not a relative path.

og:url — The canonical URL of the page. This tells platforms which URL to associate with the shared content, preventing duplicate tracking issues.

Beyond these core four, additional useful tags include:

<meta property="og:type" content="article">
<meta property="og:site_name" content="Your Site Name">
<meta property="og:locale" content="en_US">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Including image dimensions helps platforms render the preview without waiting to download and analyze the image, resulting in faster and more reliable previews.

Optimizing Your OG Image

The Open Graph image is the most important visual element of your share previews. Getting it right dramatically impacts click-through rates.

Recommended specifications:

• Size: 1200 × 630 pixels (1.91:1 aspect ratio)
• Minimum size: 600 × 315 pixels (smaller images may not render as rich previews)
• File size: Under 5 MB (aim for 100-300 KB for fast loading)
• Format: JPEG for photos, PNG for graphics with text
• Safe zone: Keep critical content (text, logos) centered, as different platforms crop differently

Design tips for effective OG images:

• Include your brand logo subtly for recognition
• Use large, readable text if including any text overlay (remember, this image appears small on mobile)
• Choose high-contrast colors that stand out in social media feeds
• Avoid cluttered designs—simplicity wins at thumbnail size
• Create unique images for important pages rather than using a generic site-wide fallback

You can use DLKit's Screenshot Tool to capture how your pages currently look and identify pages that need custom OG images. A well-designed OG image can increase click-through rates by 2-3x compared to a generic or missing image.

Platform-Specific Considerations

While Open Graph tags work across platforms, each has nuances worth understanding:

Facebook: The original OG consumer. Facebook caches OG data aggressively—if you update your tags, use Facebook's Sharing Debugger to clear the cache. Facebook supports all OG tags and renders previews most faithfully.

Twitter: Uses its own Twitter Card tags alongside OG tags. If Twitter-specific tags are present, they take priority. If not, Twitter falls back to OG tags. For optimal Twitter previews, add:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourhandle">

LinkedIn: Reads OG tags directly. LinkedIn is particularly important for B2B content. Previews are cached for about 7 days—use LinkedIn's Post Inspector tool to refresh cached data.

Messaging apps (WhatsApp, Telegram, Slack, Discord): All read OG tags for link previews. These platforms tend to crop images differently than social networks, making the centered safe zone even more important. Discord in particular displays very detailed previews including site name and color theming.

Pinterest: While Pinterest reads OG tags, it also supports its own rich pin meta tags. For Pinterest-heavy traffic, add Pinterest-specific tags alongside your OG tags for enhanced pin previews.

Testing and Debugging Your Tags

Implementing OG tags is only half the battle—verifying they work correctly is equally important. Here is your testing workflow:

1. Inspect your tags: Use DLKit's Open Graph Fetcher to see exactly what OG tags your page currently has. The tool fetches your page and displays all meta tags in a readable format, making it easy to spot missing or malformed tags.
2. Preview on Facebook: Use the Facebook Sharing Debugger (developers.facebook.com/tools/debug) to see how your page will appear when shared on Facebook. This tool also lets you scrape fresh data if you have updated your tags.
3. Preview on Twitter: Use the Twitter Card Validator (cards-dev.twitter.com/validator) to verify your Twitter Card appearance.
4. Test on LinkedIn: LinkedIn's Post Inspector (linkedin.com/post-inspector) shows how your link will preview on the platform.
5. Real-world test: Share your link in a private message to yourself on WhatsApp, Telegram, or Slack to see how it renders in messaging contexts.

Common issues to check for:

• Image URL using HTTP instead of HTTPS (many platforms reject insecure image URLs)
• Relative image paths instead of absolute URLs
• Image too small (under 200 × 200 pixels may not generate a preview)
• Missing og:image tag entirely (the most common oversight)
• Description too long (gets truncated, potentially mid-sentence)

Frequently Asked Questions

What are Open Graph tags?

Open Graph tags are HTML meta tags placed in your page's <head> section that control how your web page appears when shared on social media platforms and messaging apps. They define the title, description, image, and URL that appear in the share preview card, giving you control over your content's presentation.

What is the ideal Open Graph image size?

The recommended Open Graph image size is 1200 × 630 pixels with a 1.91:1 aspect ratio. This size works well across Facebook, Twitter, LinkedIn, and messaging apps. Keep important content centered within the image, as different platforms crop the edges differently.

How do I test my Open Graph tags?

Use DLKit's Open Graph Fetcher to preview how your tags are configured. For platform-specific previews, use Facebook's Sharing Debugger, Twitter's Card Validator, and LinkedIn's Post Inspector. Always test by sharing the link in a private message to yourself for a real-world preview.

Do Open Graph tags affect SEO?

Open Graph tags do not directly affect search engine rankings. However, they significantly impact click-through rates from social media shares. Higher engagement and traffic from social platforms can indirectly improve SEO through increased site visits and engagement signals that search engines consider.