What is the Open Graph protocol?
Open Graph (OG) is a set of meta tags created by Facebook in 2010 that's now used by virtually every platform — Facebook, LinkedIn, Slack, Discord, WhatsApp, Pinterest, and more.
When someone pastes a URL into one of these platforms, the platform fetches the page and reads its OG tags to build a preview card.
The four essential OG tags:
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling description of this page." />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/your-page" />Without these, Facebook/LinkedIn will try to scrape a title and image from the page — often grabbing the wrong image (like a logo or icon) and a random paragraph of text.
What is a Twitter Card?
Twitter (now X) uses its own tag format called Twitter Cards. The good news: Twitter falls back to Open Graph tags if Twitter Card tags aren't present. But for best results, add both.
The key Twitter Card tags:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="Description for Twitter." />
<meta name="twitter:image" content="https://example.com/twitter-image.jpg" />
<meta name="twitter:site" content="@yourtwitterhandle" />Card types:
- summary — small square image + text (used for simple links)
- summary_large_image — large horizontal image above text (best for blog posts, articles)
- app — for mobile app promotions
- player — for video/audio content
The OG image: the most important social tag
The OG image is what makes or breaks a shared link on social media. A compelling image dramatically increases click-through rates — studies consistently show that posts with images get 2-3x more engagement.
OG image requirements:
- Recommended size: 1200 × 630 pixels (works on all platforms)
- Minimum size: 600 × 315 pixels (anything smaller gets ignored by Facebook)
- Format: JPG or PNG (PNG preferred for text-heavy images)
- Max file size: Under 8MB (aim for under 1MB for fast loading)
- Use absolute URLs (full URL including https://), never relative paths
What makes a good OG image?
- Your brand/logo visible
- A clear headline or topic
- High contrast so it looks good as a thumbnail
- Relevant to the page content
Other useful Open Graph tags
Beyond the four essential tags, these are worth adding:
og:type — defaults to "website". Set to "article" for blog posts, "product" for e-commerce.og:site_name — The name of your website (not the page title).og:locale — Language/region (e.g., "en_US", "fr_FR").
For articles specifically, also add:
<meta property="article:published_time" content="2024-03-15T10:00:00Z" />
<meta property="article:author" content="https://facebook.com/authorprofile" />For product pages:
<meta property="og:type" content="product" />
<meta property="product:price:amount" content="49.99" />
<meta property="product:price:currency" content="USD" />Do social tags affect Google rankings?
Not directly — Google doesn't use Open Graph or Twitter Card data as a ranking signal. But they have an indirect impact:
- More social shares → more traffic. A link with a bad preview gets ignored; a link with a compelling image and description gets clicked and shared.
- More traffic → potential backlinks. The more people see your content, the more likely someone links to it.
- Brand awareness. Consistent, polished social previews build trust and brand recognition.
Social tags are also critical for any page that runs paid social advertising. Facebook and LinkedIn Ads use the OG tags to build the ad preview if you don't override them manually.
How to test your Open Graph tags
Each platform has a debugging tool:
- Facebook: Sharing Debugger (developers.facebook.com/tools/debug) — also lets you force-refresh cached previews
- LinkedIn: Post Inspector (linkedin.com/post-inspector)
- Twitter/X: Card Validator (cards-dev.twitter.com/validator)
You can also preview OG tags without going to each platform by using a browser extension that shows them inline.
Hawk Eye does this instantly
Hawk Eye's Social Tags module shows all Open Graph and Twitter Card tags present on the current page — including the OG image, title, description, og:type, and card type. Missing or incomplete tags are flagged immediately, so you can fix them before your next campaign goes live.
Add Hawk Eye to Chrome — FreeKey Takeaways
- Open Graph tags control what image, title, and description appear when someone shares your link on social media.
- The OG image (1200×630px) is the most important — a compelling image gets 2-3x more social engagement.
- Twitter Cards work similarly; if absent, Twitter falls back to your OG tags.
- Social tags don't directly affect Google rankings but drive traffic, which can lead to backlinks.
- Always use absolute URLs for og:image — relative paths break on external platforms.