Open Graph
What is Open Graph and why does it control how your pages appear on social media?
What is open graph?
Open Graph (OG) is a protocol originally created by Facebook that uses meta tags in the <head> of a page to control how content appears when shared on social media platforms. The four required OG properties are og:title, og:type, og:image, and og:url. Without them, platforms attempt to auto-generate a preview that is often inaccurate or visually unappealing.
Open Graph is a protocol using HTML meta tags in the page head to control how content appears when shared on social media platforms, messaging apps, and link previews. The four required properties are og:title, og:type, og:image, and og:url, and without them shared links display with missing images or irrelevant descriptions.
Why does open graph matter?
Social media shares are a significant traffic source for most websites. When your pages lack OG tags, shared links may display with a missing image, a truncated title, or an irrelevant description, dramatically reducing click-through rates. Properly configured OG tags ensure every share looks professional and compelling, maximizing the traffic you receive from social channels, messaging apps, and platforms like Slack or Discord that also use OG tags for link previews.
Key statistics
Social media posts with properly configured Open Graph images receive 150% more engagement than posts without images.
Source: BuzzSumo
How to fix it
-
1
Add the four required Open Graph tags to every page: og:title, og:type, og:image, and og:url.
-
2
Include og:description with a compelling summary (similar to but not necessarily identical to your meta description).
-
3
Provide an og:image that is at least 1200x630 pixels for optimal display across all platforms. Use absolute URLs for the image.
-
4
Add Twitter Card meta tags (twitter:card, twitter:title, twitter:description, twitter:image) for Twitter/X-specific previews.
-
5
Validate your OG tags using Facebook's Sharing Debugger and Twitter's Card Validator to preview how shares will look.
Code example
<head>
<title>Our Blog Post</title>
<!-- No OG tags — social shares will show generic or broken previews -->
</head><head>
<title>10 Accessibility Fixes That Improve SEO | eiSEO</title>
<meta property="og:title" content="10 Accessibility Fixes That Improve SEO">
<meta property="og:description" content="Discover how fixing common WCAG issues can boost your search rankings and user engagement.">
<meta property="og:image" content="https://eiseo.com/images/blog/a11y-seo-og.jpg">
<meta property="og:url" content="https://eiseo.com/blog/accessibility-seo-fixes">
<meta property="og:type" content="article">
</head>Frequently asked questions
Related topics
Title Tags
The title tag is the HTML <title> element that defines the page's title in the browser tab and, most importantly, as the clickable headline in search engine results pages (SERPs). It is widely considered the single most important on-page SEO element because it directly tells search engines and users what the page is about.
Meta Descriptions
A meta description is the HTML <meta name="description"> tag that provides a brief summary of a page's content. Search engines often display this text as the snippet beneath the title in search results. While not a direct ranking factor, the meta description is your primary tool for convincing searchers to click your result over competitors.
Image Optimization
Image optimization is the process of delivering images at the correct size, format, and compression level while providing proper HTML attributes (alt text, width, height, lazy loading). Unoptimized images are the number one cause of slow page loads on the web, directly impacting Core Web Vitals scores that Google uses as a ranking signal.
Analyze your site's SEO health
eiSEO automatically detects and helps you fix issues like this across your entire site.