FreeToolsHub
Back to Blog
Explanation

Open Graph Tags Explained: The Complete Guide (2026)

SEO & Web Team (Technical SEO Specialist) June 9, 2026 7 min read

What Are Open Graph Tags?

Open Graph (OG) tags are small pieces of metadata placed in the <head> of a web page. They tell social platforms — Facebook, X (Twitter), LinkedIn, WhatsApp, Slack, Discord — exactly what to display when someone shares your link: the title, the description, and most importantly, the image.

Without OG tags, platforms guess. They might pull a random sidebar image, truncate the wrong paragraph, or show nothing at all. With correct OG tags, every share of your link becomes a well-designed advertisement card.

The protocol was created by Facebook in 2010, but today it is the universal standard across virtually all social and messaging apps.

The 4 Essential Tags

These four cover 95% of what you need:

<meta property="og:title" content="Your Page Title (60 chars max)" />
<meta property="og:description" content="A compelling 1-2 sentence summary, up to ~155 characters." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/page" />

og:title — Keep it under 60 characters or platforms will truncate it. It can differ from your SEO title tag; write it for humans scrolling a feed.

og:description — Around 110–155 characters. Facebook may hide it on small cards, but LinkedIn and Slack show it prominently.

og:image — The most impactful tag. Use a 1200 × 630 pixel image under 1 MB, with an absolute https URL.

og:url — The canonical URL of the page. This consolidates share counts when a page is reachable from several URLs.

Useful Secondary Tags

<meta property="og:type" content="website" />
<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" />
<meta property="og:image:alt" content="Description of the image" />

Use og:type of article for blog posts (which unlocks article:published_time and article:author) and website for everything else.

Twitter / X Card Tags

X reads OG tags as a fallback, but its own tags give you control over the card style:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="Your description." />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />

The summary_large_image card type shows the big banner-style preview; plain summary shows a small square thumbnail.

How Each Platform Uses OG Tags

  • Facebook: Full OG support. 1.91:1 image crop. Caches aggressively — use the Sharing Debugger to refresh.
  • WhatsApp: Reads OG tags, prefers images under 600 KB, shows a compact card.
  • LinkedIn: Uses OG tags with a 1.91:1 crop; refresh with the Post Inspector.
  • X (Twitter): Prefers twitter:* tags, falls back to OG.
  • Slack & Discord: Read OG tags directly and render previews instantly — great for quick testing.

Common Mistakes to Avoid

  1. Relative image URLs — og:image must be an absolute https URL.
  2. Forgetting the cache — fixing tags does not update previews until the platform re-scrapes your page.
  3. One generic image for every page — per-page images dramatically outperform a site-wide default.
  4. Text-heavy images — feed images are viewed at small sizes; use large, bold visuals.
  5. Never testing — tags can look correct in code and still fail in practice.

Test Before You Share

The fastest way to verify everything is our free Open Graph Checker: enter your URL, title, description, and image, and see pixel-accurate previews for Facebook, X, LinkedIn, and WhatsApp — plus a ready-to-paste meta tag block. If your image needs resizing or converting first, the Image Converter handles that in your browser.