Do I need both OG tags and Twitter card tags?

Technically no — most platforms fall back to og: tags if twitter: tags are missing. But Twitter/X won't show the large image format without twitter:card set to summary_large_image, so add it anyway.

What image size should I use for og:image?

1200×630px is the standard recommendation. Slack requires at least 600px wide to show any image at all. Under 200×200px and most platforms skip it entirely.

My tags are correct but the preview is still broken. What now?

Platforms cache OG data aggressively. Use the Facebook Debugger (developers.facebook.com/tools/debug) or LinkedIn Post Inspector to force a fresh scrape. For Slack, add a query parameter to break the cached URL.

Can I set different OG tags per page in a single-page app?

Yes, but it requires server-side rendering or a prerendering service. Client-side JavaScript changes to meta tags don't get picked up by most crawlers — they fetch the raw HTML before JS runs.

不喜欢广告？去无广告今天 

Open Graph标签 Stop Your Links Looking Terrible on Slack

更新于 5 月 15, 2026

You spent weeks building the app. The link preview in Slack shows "Untitled" and a broken icon. That is an Open Graph problem. Here is how to fix it in 10 minutes.

Open Graph Tags: Stop Your Links Looking Terrible on Slack 1

广告移除？

You spent three weeks building the app. The link preview in Slack shows “Untitled” and a thumbnail of your footer logo. This is an Open Graph problem and it takes about 10 minutes to fix.

What are Open Graph tags?

Open Graph (og:) is a protocol Facebook introduced in 2010 that every major platform now uses to generate link previews. When Slack, Twitter, LinkedIn, or iMessage unfurls your URL, they fetch the page, look for <meta> tags with the og: prefix, and use those to build the card.

No tags → they guess. They usually guess wrong.

The tags that actually matter

Tag	是否必需？	What it does
`og:title`	是的	The headline shown in the preview card
`og:description`	是的	The subtitle / summary text (keep under 200 chars)
`og:image`	是的	The preview image. Must be an absolute URL.
`og:url`	是的	The canonical URL for the page
`og:type`	Recommended	使用 `website` for most pages, `article` for posts
`twitter:card`	Recommended	Controls the Twitter/X card size. Use `summary_large_image`.
`twitter:title`	选修的	Falls back to `og:title` on most clients
`twitter:description`	选修的	Falls back to `og:description`
`twitter:image`	选修的	Falls back to `og:image`

The one that trips people up most often is og:image. It must be an absolute URL (no relative paths), ideally 1200×630px, and under 8MB. Slack in particular will silently skip images that don’t meet its size requirements. Aim for at least 600px wide or your image just won’t appear.

A complete set of OG tags

Drop this in the <head> of your page. Replace the placeholder values:

<!-- Primary Open Graph tags -->
<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A clear, specific description under 200 characters. No fluff." />
<meta property="og:image" content="https://yourdomain.com/images/og-image.png" />
<meta property="og:url" content="https://yourdomain.com/your-page" />
<meta property="og:type" content="website" />

<!-- Twitter/X card (falls back to og: tags if omitted) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="A clear, specific description under 200 characters." />
<meta name="twitter:image" content="https://yourdomain.com/images/og-image.png" />

For a blog post or article, change og:type 到 article and add the author and publish date:

<meta property="og:type" content="article" />
<meta property="article:author" content="https://yourdomain.com/about" />
<meta property="article:published_time" content="2026-04-25T00:00:00Z" />

How to verify your tags without deploying

The fastest way: paste your URL into IO Tools Open Graph Checker. It fetches the page, parses the tags, and shows you exactly what Slack (or any other platform) will see — including a preview of how the card will render. No login needed, no extension to install.

If you want to check a localhost URL or a staging environment that isn’t publicly accessible, the checker won’t be able to reach it. In that case, view source on your page and manually verify the tags are present in the <head>. Once deployed, run the checker again to confirm the live version matches.

Platform-specific validators (for when you need to force a cache refresh):

Facebook/Meta: developers.facebook.com/tools/debug — also clears Facebook’s cache of your OG tags
LinkedIn: linkedin.com/post-inspector — useful when your preview is stale after an update
Twitter/X: cards-dev.twitter.com/validator — slower to update but good for confirming the card format

Slack caches aggressively. If you fix your tags and the old preview keeps showing up, you can force a re-fetch by adding a query string (e.g. ?v=2) to the URL before sharing — not ideal for production links, but fine for QA.

Generating the tags

If you want to generate a full set of meta tags interactively rather than hand-coding them, the IO Tools HTML Meta Tag Generator covers OG tags, Twitter cards, and standard meta tags in one shot. Copy the output into your <head>.

Common mistakes worth avoiding

Relative image URLs. /images/og.png does not work. Every platform fetches OG tags from an external server that has no context for your base URL. Always use the full https:// path.
Using the same image for everything. A 300×300 avatar as your OG image will technically show up — as a tiny, ugly thumbnail. Make a proper 1200×630 image for each key page.
Not setting og:url. Without it, some platforms use the URL they fetched from, others make up their own canonical. Set it explicitly.
Forgetting to invalidate caches. Most platforms cache OG tags for 24–72 hours. If you update tags on a live page, use the platform validators above to force a fresh fetch.
Mixing property 且 name attributes. OG tags use property=. Twitter tags use name=. Mixing them up causes some parsers to ignore the tag entirely.

Open Graph tags are one of those things that take five minutes to add and look embarrassing when missing. Fix them once, verify with the Open Graph 检查器, and move on.