What Is the Open Graph Protocol?
Open Graph (OG) is a protocol created by Facebook in 2010 that turns any web page into a rich object in a social graph. When you share a URL on social media, the platform reads OG tags from the page's HTML to determine what title, description, and image to display in the preview card.
Without OG tags, platforms try to extract this information automatically. The results are unpredictable: wrong images, truncated titles, missing descriptions. OG tags give you full control over your social media appearance.
The 4 Required OG Tags
According to the Open Graph protocol, these four tags are required for every page:
og:title
The title of your content as it should appear on social media. Can differ from your HTML title tag to be more engaging for social audiences.
<meta property="og:title" content="How to Validate HTML in 2026">
Keep under 90 characters. Facebook truncates at ~88 characters, LinkedIn at ~70.
og:type
The type of content. Most pages use "website" or "article".
<meta property="og:type" content="website"> <!-- homepages, tools --> <meta property="og:type" content="article"> <!-- blog posts --> <meta property="og:type" content="product"> <!-- e-commerce -->
og:image
The image shown in the social card. This is the most impactful OG tag. Posts with images get significantly more engagement than text-only cards.
<meta property="og:image" content="https://example.com/og-image.jpg">
Recommended size: 1200 x 630px (1.91:1 ratio)
Minimum size: 600 x 315px
Max file size: 5MB (some platforms reject larger files)
Format: JPG, PNG, or WebP
URL: Must be absolute (https://...), not relative
og:url
The canonical URL of the page. When someone shares a URL with query parameters, this tells platforms which URL is the "real" one.
<meta property="og:url" content="https://example.com/page">
Recommended Additional Tags
<meta property="og:title" content="Your Title"> <meta property="og:description" content="A compelling 1-2 sentence description."> <meta property="og:image" content="https://example.com/image-1200x630.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="Description of the image"> <meta property="og:url" content="https://example.com/page"> <meta property="og:type" content="website"> <meta property="og:site_name" content="Your Brand"> <meta property="og:locale" content="en_US">
og:description appears below the title in most platforms. Keep it under 200 characters. Write it for social audiences, not search engines.
og:image:width and og:image:height help platforms render the card without waiting for the image to load. Always include them.
Platform-Specific Requirements
| Platform | Image Size | Title Limit | Notes |
|---|---|---|---|
| 1200x630 | ~88 chars | Caches aggressively. Use their debugger to refresh. | |
| 1200x627 | ~70 chars | Uses OG tags. Also reads article:author for articles. | |
| Twitter/X | 1200x628 | ~70 chars | Requires twitter:card tag. Falls back to OG tags. |
| Slack | 1200x630 | No limit | Reads OG tags. Shows unfurled preview in messages. |
| Discord | 1200x630 | ~256 chars | Reads OG tags. Supports og:video for embedded players. |
Common Mistakes
Relative image URLs
og:image must be an absolute URL starting with https://. Relative paths like /images/og.jpg do not work on any platform.
Image too small
Images under 600x315px may not be displayed at all, or appear as a tiny thumbnail instead of a full card.
Missing og:image
Without an image, social cards look plain and get significantly less engagement. Always include an og:image.
Not testing after changes
Facebook and LinkedIn cache OG data aggressively. After updating your tags, you must clear their cache using their debugging tools.
Same OG tags on every page
Each page should have unique og:title, og:description, and og:image. Reusing the same tags defeats the purpose.
How to Debug OG Tags
1. Use our Open Graph Checker to see exactly which tags are detected on any URL, with a live social media preview.
2. Facebook Sharing Debugger (developers.facebook.com/tools/debug/) shows what Facebook reads and lets you clear the cache with "Scrape Again".
3. Twitter Card Validator (cards-dev.twitter.com/validator) previews how your card looks on Twitter/X.
4. LinkedIn Post Inspector (linkedin.com/post-inspector/) previews and refreshes LinkedIn's cache of your OG data.
Test Your Open Graph Tags
Enter any URL to see all detected OG tags with a live social media preview.
Semrush — All-in-One SEO Toolkit
Monitor your social visibility and SEO performance across all platforms.