Meta 标签与社交分享指南：OG / Twitter Card 全解

What Is the OG Protocol

OG (Open Graph) is a page-level metadata protocol introduced by Facebook in 2010 and now the de facto standard: when a link is shared, Facebook, X/Twitter, LinkedIn, WhatsApp, Telegram, Slack, Discord and most other platforms read the og:* tags in <head> to render the card. The core four:

<meta property="og:type" content="website">
<meta property="og:title" content="Page Title">
<meta property="og:description" content="One-line summary">
<meta property="og:image" content="https://example.com/cover.png">
<meta property="og:url" content="https://example.com/page/">

The Twitter Card system adds only one essential tag: <meta name="twitter:card" content="summary_large_image">, which declares the large-image layout. Everything else — twitter:title, twitter:description, twitter:image — falls back to the matching OG tag when absent. One OG set plus one twitter:card covers nearly every platform.

If you'd rather not hand-write them, the Meta Tag Generator takes a title, description, and image URL once and outputs a complete, paste-ready block.

og:image: The 1200×630 Spec

The image is the most visible part of the card and the easiest to get wrong. The common denominator across platforms:

• Size: 1200×630 pixels (about 1.91:1). Facebook's declared large-image standard; X's summary_large_image is designed to the same ratio; LinkedIn and WeChat handle it well. Larger is fine — platforms scale and crop;
• Minimum: images under 200×200 get demoted to a tiny thumbnail or dropped entirely;
• File size: aim for under 1 MB to be safe (Facebook allows 8 MB, X allows 5 MB, but oversized files often hit crawler timeouts);
• Format: JPG or PNG are safest; WebP support is uneven;
• URL: must be an https absolute URL, publicly reachable without login. A relative path like /assets/cover.png is the most common "image not showing" cause;
• Composition: keep key content centered — platforms crop differently, and the center is the only safe zone.

Also add og:image:width and og:image:height: they let platforms reserve layout space before the image finishes downloading, speeding first render.

Title & Description Lengths

Platforms have no hard truncation limit — text just gets an ellipsis when it doesn't fit. Plan by display width:

Remember og:title and <title> serve different audiences: the former is scanned in a social feed — short, direct, benefit-led; the latter serves search results, where keywords and a brand suffix help. Writing them independently works best.

Debugging: Validators & Cache Refresh

Don't verify by "sending it to a friend". Every major platform ships an official debugger that simulates its own crawler and lists exactly what it fetched:

1. Facebook / Meta: Sharing Debugger (developers.facebook.com/tools/debug/) — paste the URL, hit Debug, and see every fetched tag plus an image preview;
2. X / Twitter: Card Validator (requires a developer login) — previews the large-image card directly;
3. LinkedIn: Post Inspector;
4. Generic: Google's Rich Results Test as a secondary "crawler's view of the HTML".

The debugger also has a second job: re-scraping refreshes the cache. Hit "Scrape Again" in Facebook Debugger, or resubmit in Post Inspector. If you fixed the tags but shares still show old content, it's cache nine times out of ten — re-scrape first, verify second. For platforms without a debugger (like WeChat), appending a harmless query parameter (?v=2) turns the link into a "new" one and forces a fresh fetch.

Why Cards Fail to Render

When the card doesn't render, troubleshoot in this order:

1. og:image isn't an https absolute URL

content="/img/cover.png" or an http:// address. Crawlers require a complete, publicly reachable https URL; relative paths simply fail to resolve. Also check the image isn't blocked by hotlink protection, a firewall, or a login wall — the debugger's image preview exposes these instantly.

2. The platform cached old data

Tags are fixed but shares still show old content: force a re-scrape with the debuggers above, or add a URL parameter. Caching is the top cause among "I already fixed it" reports.

3. Missing tags or wrong placement

OG tags must exist statically in the <head> of the server-rendered HTML. Common pitfalls: tags injected client-side by JavaScript (most crawlers don't execute JS — watch out on SPAs), rendered into <body>, or misspelled (property vs name usually still works, but og:img instead of og:image is silently ignored). Compare the debugger's fetched tags against your source one by one.

This ranked-causes, use-the-official-tool methodology is the same one that solves static-asset issues — the Favicon Not Showing guide follows the identical playbook: confirm the file is reachable, check the reference path, then suspect the cache.

For generating the block, copying it, and pasting it back into <head>, the Meta Tag Generator does it in one pass so no field gets skipped.

FAQ