OpsKitty

Open Graph Tags: The Complete Guide to Social Media Previews

Learn how Open Graph tags control how your pages appear on Facebook, LinkedIn, Twitter, and Slack. Covers og:title, og:image, og:description — with sizes, examples, and a free checker.

By OpsKitty Team
seoopen-graphsocial-media

You share a link on LinkedIn and it looks amazing — bold image, compelling title, clean description. Your colleague shares a different page from the same website and it shows a broken image with a generic title. The difference? Open Graph tags.

Open Graph (OG) tags are snippets of HTML that control how your web pages appear when shared on social media platforms, messaging apps, and anywhere else that generates link previews. Getting them right means every share of your content looks intentional and polished. Getting them wrong — or skipping them entirely — means platforms guess what to display, and they usually guess poorly.

What Are Open Graph Tags?

Open Graph is a protocol originally created by Facebook in 2010. It uses meta tags in your page’s <head> section to define how the page should be represented when shared externally.

When someone pastes a URL into Facebook, LinkedIn, Twitter, Slack, Discord, iMessage, or WhatsApp, the platform’s crawler fetches the page, reads the OG tags, and renders a preview card with the specified title, description, and image.

Without OG tags, platforms attempt to auto-generate a preview by scraping the page content. This often produces poor results: truncated titles, wrong images (often a logo or random graphic from the page), and generic or missing descriptions.

The Essential Open Graph Tags

Four tags form the minimum viable set for any page:

og:title

<meta property="og:title" content="How to Monitor Website Uptime in 2026">

This controls the headline in the preview card. Keep it under 60 characters to avoid truncation on most platforms. It doesn’t need to match your page’s <title> tag — OG title can be optimized specifically for social sharing (more conversational, more curiosity-driven) while your title tag is optimized for search.

og:description

<meta property="og:description" content="Set up website monitoring in 5 minutes. Learn which checks matter, how to configure alerts, and why 29 global regions give you better coverage.">

The supporting text below the title. Keep it between 100-200 characters. Focus on what the reader will gain by clicking — this is your pitch, not a summary.

og:image

<meta property="og:image" content="https://www.example.com/images/uptime-monitoring-guide-og.jpg">

The single most important OG tag. Posts with images get dramatically more engagement than text-only shares. The image should be:

  • At least 1200 x 630 pixels — this is the recommended resolution for Facebook and LinkedIn. Anything smaller may display as a thumbnail instead of a large card.
  • Aspect ratio of 1.91:1 — fits the standard preview card format across platforms.
  • Under 8 MB — larger files may be ignored or fail to load.
  • Hosted on your own domain — use absolute URLs, not relative paths. Some platforms won’t fetch images from third-party CDNs or require HTTPS.

Design your OG images with intention. Include your article title as text overlay, use your brand colors, and ensure the image makes sense even at small sizes. Avoid relying on fine details or small text that disappears when the image is rendered at thumbnail scale.

og:url

<meta property="og:url" content="https://www.example.com/blog/uptime-monitoring-guide">

The canonical URL of the page. This tells platforms which URL to display and helps consolidate share counts when the same content is accessible via multiple URLs.

Additional Useful Tags

Beyond the core four, these tags give you finer control:

og:type

<meta property="og:type" content="article">

Defines the content type. Common values: website (for the homepage), article (for blog posts), product (for e-commerce). Most pages should use article or website.

og:site_name

<meta property="og:site_name" content="OpsKitty">

Your website or brand name. Displayed alongside the URL in some platforms’ preview cards.

og:locale

<meta property="og:locale" content="en_US">

The language and region of the content. Defaults to en_US if omitted.

Article-Specific Tags

For blog posts and articles, these add useful metadata:

<meta property="article:published_time" content="2026-03-10T08:00:00Z">
<meta property="article:author" content="https://www.example.com/team/jane-doe">
<meta property="article:section" content="Website Monitoring">
<meta property="article:tag" content="uptime monitoring">

Twitter/X Card Tags

Twitter uses its own card system that overlaps with Open Graph. If you include Twitter-specific tags, Twitter will use those. If you don’t, it falls back to OG tags.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="How to Monitor Website Uptime in 2026">
<meta name="twitter:description" content="Set up monitoring in 5 minutes.">
<meta name="twitter:image" content="https://www.example.com/images/og-image.jpg">
<meta name="twitter:site" content="@opskitty">

The twitter:card tag is the most important one. Use summary_large_image for a full-width image card (recommended for most content) or summary for a smaller thumbnail card.

Practical recommendation: Always set both OG tags and twitter:card. The OG tags handle Facebook, LinkedIn, Slack, Discord, and others. The Twitter card tag ensures optimal display on X. The content can be identical.

OG Image Best Practices

Since the image drives the most engagement, it’s worth spending extra time getting it right.

Create dedicated OG images for every important page. Don’t rely on pulling a random image from the page content. A purpose-built OG image with text overlay, brand colors, and a clear visual hierarchy outperforms generic photos every time.

Use text on the image. The title text in the OG image reinforces the preview card’s title. Even if someone is scrolling quickly, the text in the image catches their eye. Keep text to 5-8 words maximum and use a font size that’s readable at 600px wide.

Test across platforms. An image that looks perfect on Facebook may be cropped differently on LinkedIn or Twitter. Use a free checker tool to preview how your OG tags render on each platform before publishing.

Use HTTPS for image URLs. Some platforms reject or deprioritize images served over HTTP. Always use absolute HTTPS URLs.

Don’t use your logo as the OG image. Logos are too small to be effective in preview cards and waste the most valuable real estate in the share. Use the logo in a corner of a larger designed image instead.

Common Mistakes to Avoid

Missing OG tags entirely. Platforms will guess, and they’ll guess wrong. Always set at least og:title, og:description, og:image, and og:url.

Using relative image URLs. /images/og.jpg won’t work — platforms fetch from their own servers and need the full https://www.example.com/images/og.jpg path.

Images too small. Anything under 600px wide may display as a tiny thumbnail instead of a full-width card. Aim for 1200 x 630px minimum.

Not updating cached previews. Platforms cache OG data aggressively. After updating your OG tags, use Facebook’s Sharing Debugger, LinkedIn’s Post Inspector, or Twitter’s Card Validator to force a re-fetch. Otherwise, old previews may persist for days.

Duplicate OG tags. Having multiple og:image or og:title tags confuses crawlers. Ensure each tag appears exactly once per page.

HTML entities in content. Avoid &, <, or other HTML entities in your OG content values. Use plain text.

How to Validate Your OG Tags

After implementing OG tags, always validate them before the content goes live:

OpsKitty’s Open Graph Checker — Enter any URL and see exactly which OG tags are present, which are missing, and how the preview will appear. It also flags common issues like missing images, titles that are too long, and relative URLs.

Facebook Sharing Debugger (developers.facebook.com/tools/debug) — Shows how Facebook renders your page and lets you force a cache refresh.

LinkedIn Post Inspector (linkedin.com/post-inspector) — Previews how your link will appear in LinkedIn feeds.

Twitter Card Validator — Previews your Twitter/X card rendering.

Test after every significant page update, especially if you’ve changed the title, image, or description.

OG Tags and SEO

Open Graph tags don’t directly affect search engine rankings — Google uses your title tag and meta description for search results, not OG tags. But they indirectly support SEO through increased social engagement.

Content that looks polished when shared gets more clicks, more traffic, and more backlinks. A well-crafted OG image and title can double the click-through rate on a shared link compared to an auto-generated preview. That additional traffic and those additional shares send positive engagement signals that support your overall domain authority.

Think of OG optimization as the last mile of content distribution. You spent hours writing the article and optimizing it for search — spend 10 minutes making sure it looks great when people share it.

Check your Open Graph tags right now with OpsKitty’s free OG Checker — or generate perfectly sized OG images with the OG Image Generator. Both tools are free, no signup required.

← Back to all posts