What Open Graph Actually Does
When you paste a URL into Slack, LinkedIn, Twitter, or iMessage and a preview card appears — with a title, description, and thumbnail image — that card is built from Open Graph tags. The platform fetches your page, reads specific <meta> tags in the <head>, and uses them to generate the preview.
Without Open Graph tags, platforms fall back to guessing: they might pull the first image they find, use the page's <title> tag, and grab whatever description feels most relevant. The results are unpredictable, often broken, and sometimes embarrassing for a live product.
Open Graph was created by Facebook in 2010 and is now supported by every major social platform and messaging app.
The Essential Tags
These four tags are the minimum for any page that will be shared:
<meta property="og:title" content="How to Debug API Requests" />
<meta property="og:description" content="A systematic approach to diagnosing 4xx and 5xx errors, CORS issues, and malformed requests." />
<meta property="og:image" content="https://example.com/images/debug-api-og.png" />
<meta property="og:url" content="https://example.com/blog/how-to-debug-api-requests" />
og:title — The headline of the card. Can differ from the page's <title> tag. Keep it under 60 characters or it gets truncated on most platforms.
og:description — One or two sentences describing the content. Twitter truncates after about 200 characters; LinkedIn after about 300. Be direct and informative.
og:image — The thumbnail. This is the most visually impactful tag. Get it right (see image specs below).
og:url — The canonical URL of the page. If your site has multiple URLs pointing to the same content, this tells the platform which one to use.
Image Specifications
The og:image is where most implementations go wrong. Different platforms have different requirements, but these settings work everywhere:
| Property | Recommended value |
|---|---|
| Dimensions | 1200 × 630 pixels |
| Minimum size | 600 × 315 pixels |
| Maximum file size | 8 MB (aim for under 300 KB) |
| Format | JPG or PNG (WebP has inconsistent support) |
| Aspect ratio | 1.91:1 |
| Text in image | Keep it readable at thumbnail size |
If you do not provide an og:image, most platforms either show no image or pick one at random from the page. Always provide one.
Use an absolute URL including the protocol and domain. A relative path like /images/og.png will not work.
<!-- Wrong: relative path -->
<meta property="og:image" content="/images/og-image.png" />
<!-- Correct: absolute URL -->
<meta property="og:image" content="https://mysite.com/images/og-image.png" />
Twitter Card Tags
Twitter has its own tag system alongside Open Graph. If both are present, Twitter prefers its own tags; if only Open Graph tags are present, Twitter falls back to them. For best results on Twitter, add both:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="How to Debug API Requests" />
<meta name="twitter:description" content="A systematic approach to diagnosing 4xx errors, CORS issues, and malformed requests." />
<meta name="twitter:image" content="https://example.com/images/debug-api-og.png" />
twitter:card — Controls the card layout. summary_large_image shows a large image above the text, which performs better for articles and product pages. summary shows a small thumbnail to the left. Use summary_large_image for content you want to drive clicks.
Twitter requires the image to be at least 300 × 157 pixels for summary_large_image. The 1200 × 630 image you create for Open Graph works here without modification.
The og:type Tag
og:type tells platforms what kind of content the page represents. The default is website. For articles and blog posts, use article:
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-05-17T09:00:00Z" />
<meta property="article:author" content="https://example.com/about" />
When og:type is article, Facebook and LinkedIn display the publication date and use the additional article tags. For product pages, use product. For videos, use video.movie or video.other.
Locale and Multi-Language Pages
If your site serves multiple languages, add the locale tag and alternate locales:
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="zh_CN" />
<meta property="og:locale:alternate" content="es_ES" />
The format is language code underscore region code: en_US, zh_CN, ja_JP. This helps platforms serve the right language to the right audience.
The Site Name Tag
og:site_name adds context to the card — it shows the brand name separately from the title:
<meta property="og:site_name" content="MyUtl" />
On Facebook and LinkedIn, this appears in a smaller font below or above the title, helping users recognize the source brand.
Testing Your Tags
After adding or updating Open Graph tags, platforms cache the previous version. You need to use their official debugging tools to clear the cache and preview the new card:
| Platform | Debugging tool |
|---|---|
| developers.facebook.com/tools/debug | |
| linkedin.com/post-inspector | |
| cards-dev.twitter.com/validator | |
| Slack | Paste URL in any channel to see live preview |
Always test on at least Facebook and Twitter before launching. Even a single broken tag can result in a blank card or placeholder image appearing on thousands of shares.
Common Mistakes
Missing og:url — Without this tag, the canonical URL in social shares is unpredictable. Always set it to the clean, canonical version of the page URL.
Using a relative image path — The platform fetches og:image independently from outside your site. Relative paths will not resolve. Always use absolute URLs.
Too-small images — A 400 × 200 image will appear blurry or cropped on high-DPI screens. Always use at least 1200 × 630.
Not refreshing the cache — After fixing your tags, the platform still shows the old card until you use its debug tool to force a refetch.
Same og:image for every page — One generic image works, but per-page images with relevant visuals or text significantly improve click-through rates on shared content.
→ Use the Meta Tag Generator to build a complete set of Open Graph and Twitter Card tags without memorizing the syntax.