Open Graph Tags:
The Complete Guide With Examples
Every link you share on LinkedIn, every tweet with a preview image, every Slack message with the little card that shows a thumbnail — all of that is controlled by six lines of HTML in your page head. Most sites get at least two of those lines wrong. Some get all of them wrong. This guide covers every tag, what it does, and exactly what happens when you get it wrong.
- What Open Graph is and why it exists
- The essential OG tags (and what they do)
- The og:image specification — sizes, formats, caching
- Twitter Card tags
- Platform-specific quirks
- Complete implementation example
- The 7 most common OG mistakes
- How to test your Open Graph tags
- FAQ
1. What Open Graph is and why it exists
Facebook introduced the Open Graph protocol in 2010. The problem they were solving: when someone shared a link on Facebook, the platform had to guess what image to use, what title to show, and what description to display. The results were unpredictable — sometimes a random image from the page, sometimes no image, sometimes a title pulled from a script tag or an ad rather than the actual headline.
The solution was simple: a set of meta tags in the HTML head that explicitly tell platforms what to show. Facebook called it Open Graph because it was designed to turn web pages into “rich objects in a social graph” — giving them a defined type, properties, and relationships. The protocol was open, meaning any platform could implement it, and they did. LinkedIn, Twitter, Slack, Discord, WhatsApp, and most other platforms that show link previews all read og: tags.
2. The essential OG tags
These four are required for any page that gets shared on social media. Everything else is optional or type-specific.
og:title
The title of your page as it should appear in a social share. This does not have to match your HTML <title> tag — and often shouldn't. Your HTML title is optimized for search results and includes your brand name. Your og:title can be more punchy, more social, and doesn't need the brand suffix. Aim for 60–90 characters.
<meta property="og:title" content="Open Graph Tags: The Complete Guide" />og:description
A brief description shown below the title in the link card. This is your one shot to give someone scrolling through their feed a reason to click. Write it like a subheadline, not like a meta description. It gets cut off around 200 characters on most platforms — front-load the compelling part.
<meta property="og:description" content="Every OG tag, every platform quirk, how to test them, and the mistakes that make your links look broken on social." />og:image
The image shown in the link preview. This is the single most impactful tag — a striking image dramatically increases click-through rate on shared links. Must be an absolute URL (starting with https://). Must be publicly accessible — no auth, no blocking by robots.txt. Recommended: 1200×630px JPEG or PNG.
<meta property="og:image" content="https://seocheckpilot.com/blog/open-graph-guide/og-image.jpg" />og:url
The canonical URL of the page. This is what platforms use to deduplicate shares (multiple people sharing the same article pool their social engagement stats when og:url is consistent). Always use your canonical URL — no UTM parameters, no trailing session IDs.
<meta property="og:url" content="https://seocheckpilot.com/blog/open-graph-tags-complete-guide" />og:type — the page type
The og:type tag tells platforms what kind of object the page is. Most pages should use website. Blog posts and articles should use article. The type determines which additional og: properties are valid. An article can have article:published_time, article:author, etc. Other common types include product, video.movie, and music.song.
3. The og:image specification
The image tag is where most sites get things wrong. Here are the exact requirements:
Beyond size, there are rules that catch people out regularly:
- Must be absolute URL:
https://yourdomain.com/image.jpgnot/image.jpg. Relative paths are not supported. - Must be publicly accessible: The image must be fetchable by the social platform's crawler without authentication, cookies, or JavaScript. If your image URL returns 403, 404, or requires login, the preview will be empty.
- Not blocked by robots.txt: Some sites have
Disallow: /assets/in robots.txt which blocks image fetching by crawlers. - Must serve over HTTPS: HTTP image URLs are often blocked by modern browsers when the page is served over HTTPS (mixed content), resulting in no image in the preview.
- og:image:width and og:image:height: Including these companion tags helps platforms display the image correctly without waiting to download it first. Always add them.
<meta property="og:image" content="https://seocheckpilot.com/images/blog-cover.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Descriptive alt text for accessibility" />og-image.jpg?v=2.4. Twitter Card tags
Twitter/X uses the Open Graph tags as a fallback, but it has its own tag namespace that gives you more control — particularly over the card format:
<!-- Twitter Card (X) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Open Graph Tags: The Complete Guide" />
<meta name="twitter:description" content="Every OG tag explained with examples, platform quirks, and testing methods." />
<meta name="twitter:image" content="https://seocheckpilot.com/images/blog-cover.jpg" />
<meta name="twitter:image:alt" content="Open Graph tags guide header" />
<meta name="twitter:site" content="@yourtwitterhandle" />
<meta name="twitter:creator" content="@yourtwitterhandle" />The most important tag here is twitter:card. It has four possible values:
summary— Small square thumbnail on the left with title and description. Good for profile pages.summary_large_image— Full-width image above the title and description. This is what you want for blog posts and content pages — it's dramatically more eye-catching.app— For linking to a mobile app. Not relevant for web content.player— For embedding video or audio. Requires Twitter approval.
For almost every content page, use summary_large_image. It converts better in most content categories.
5. Platform-specific quirks
| Platform | Title limit | Desc limit | Image min | Image preferred |
|---|---|---|---|---|
| 200 chars | 300 chars | 200×200 | 1200×630 | |
| 70 chars | 200 chars | 1200×627 | 1200×627 | |
| Twitter / X | 70 chars | 200 chars | 144×144 | 1200×628 |
| Slack | Full og:title | Full og:description | Any | 1200×630 |
| 130 chars | 155 chars | 300×200 | 1200×630 | |
| Discord | 256 chars | 2048 chars | Any | 1200×630 |
LinkedInis strict about image dimensions and crops aggressively if the image doesn't match 1.91:1 exactly. It also caches previews for up to 7 days and doesn't provide an easy cache-clearing tool. If you launch with a wrong image, you may need to change the og:url or wait.
Slack uses og: tags for previews in messages. It respects og:image:width and og:image:height to avoid layout shifts. Notably, Slack also reads og:site_name which appears above the title in the unfurl card.
WhatsApp fetches OG tags through their scraper and is known for slow cache refreshes. If an OG image changes, expect the old version to persist in WhatsApp shares for days.
6. Complete implementation example
Here's a complete, production-ready set of OG and Twitter Card tags for a blog article:
<!-- Required Open Graph -->
<meta property="og:type" content="article" />
<meta property="og:url" content="https://yourdomain.com/blog/your-article" />
<meta property="og:title" content="Your Article Title (60–90 chars)" />
<meta property="og:description" content="Compelling first sentence that makes someone want to read more. (150–200 chars)" />
<meta property="og:image" content="https://yourdomain.com/images/article-og.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 for accessibility" />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:locale" content="en_US" />
<!-- Article-specific Open Graph -->
<meta property="article:published_time" content="2026-06-07T00:00:00Z" />
<meta property="article:modified_time" content="2026-06-07T00:00:00Z" />
<meta property="article:author" content="https://yourdomain.com/about" />
<meta property="article:section" content="Technical SEO" />
<meta property="article:tag" content="Open Graph" />
<meta property="article:tag" content="Social Media" />
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourtwitterhandle" />
<meta name="twitter:title" content="Your Article Title" />
<meta name="twitter:description" content="Compelling description optimized for Twitter." />
<meta name="twitter:image" content="https://yourdomain.com/images/article-og.jpg" />
<meta name="twitter:image:alt" content="Description of the image" />7. The 7 most common OG mistakes
No og:image at all
Most platforms will show no image in the preview, or pick a random image from the page. On Twitter, a text-only card is dramatically less engaging. Always define og:image.
Using a relative image URL
og:image="/images/cover.jpg" doesn't work. Social crawlers don't have the context of your domain when parsing the tag. Use the full absolute URL: https://yourdomain.com/images/cover.jpg.
Image too small
Images below 200×200 pixels are not shown by Facebook. Between 200×200 and 600×315, they're shown as small thumbnails. Below 1200×630, LinkedIn shows poor quality. Always create OG images at 1200×630.
og:title the same as <title>
Your HTML title needs "Brand Name | Keyword" for SEO. Your og:title should be the punchy, shareable version without the brand suffix. They serve different purposes — use them differently.
Missing og:url or using the wrong URL
When the same article can be reached at multiple URLs (with and without www, HTTP vs HTTPS, with tracking parameters), og:url disambiguates. Without it, social platforms may count shares to the same article separately, splitting your social engagement metrics.
Blocking the OG image URL
An image URL that returns 403, is behind authentication, or is blocked by robots.txt will silently fail — the platform's crawler can't fetch it, so no image is shown. Check your server access logs for social crawler user agents if images aren't appearing.
Not testing after deployment
OG tags are easy to implement incorrectly without realizing it. Always test with the platform's debug tool (Facebook Sharing Debugger, LinkedIn Post Inspector, Twitter Card Validator) before sharing important content.
8. How to test your Open Graph tags
SEOCheckPilot OG Checker — The OG Checker tool validates all og: and twitter: tags, checks image dimensions and HTTPS, and shows you a live preview of how the link will appear when shared.
Facebook Sharing Debugger— developers.facebook.com/tools/debug — Shows you exactly what Facebook sees when it scrapes your URL, with any warnings or errors. The “Scrape Again” button forces a cache refresh for the previewed URL.
LinkedIn Post Inspector — linkedin.com/post-inspector — Shows the LinkedIn preview and lists any issues. Note: LinkedIn caches for up to 7 days, so the cache clear button here is valuable.
Twitter Card Validator — cards-dev.twitter.com/validator — Shows exactly how your card will render on X (Twitter), including which card type is active.
FAQ
If I have both og:title and a <title> tag, which one does Google use?
Google uses the HTML <title> tag for search results. og:title is only used by social platforms. They serve separate purposes. Both should be present and both should be thoughtfully written for their respective contexts.
Can I have different OG tags on different pages?
Yes, and you should. Each page should have unique og:title, og:description, og:image, and og:url values that accurately describe that specific page. Using site-wide default OG tags for all pages results in the same image and description appearing for every shared link, which is both confusing and less clickable.
Do OG tags work on dynamic JavaScript-rendered pages?
Partially. Social platform scrapers are typically simple HTTP fetchers that don't execute JavaScript. If your OG tags are added to the DOM via JavaScript after page load, many scrapers won't see them. OG tags must be present in the server-rendered HTML. For Next.js, use the metadata export; for other frameworks, use SSR or SSG.
What is og:locale and should I use it?
og:locale specifies the language and region of your content using a language_TERRITORY format (e.g., en_US, fr_FR, de_DE). It's used by Facebook to serve content in the right language in international contexts. It's recommended for sites targeting specific locales and essential for sites with multiple language versions using og:locale:alternate.