social-sharing

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

social-sharing

社交分享

When someone pastes your link into Slack, WhatsApp, LinkedIn, or X, a crawler that does not run your JavaScript reads the raw HTML and decides whether you look real. A blank card or a "Vite + React" preview is a launch-day trust hit.

当有人把你的链接粘贴到 Slack、WhatsApp、LinkedIn 或 X 中时，不会运行 JavaScript 的爬虫会读取原始 HTML，并决定你的网站看起来是否真实可信。空白卡片或“Vite + React”的预览会损害发布当天的用户信任。

Activate when

适用条件

The product will be shared publicly (launch posts, campaigns, referrals, press).
```
inspect-metadata
```
shows missing/relative/localhost
```
og:*
```
or
```
twitter:*
```
, or the preview looks broken.
Not for pages behind login that are never shared.

产品将在公开渠道被分享（发布动态、营销活动、推荐链接、媒体报道）。
```
inspect-metadata
```
显示
```
og:*
```
或
```
twitter:*
```
标签缺失、使用相对路径或指向 localhost，或者预览显示异常。
不适用于位于登录后且永远不会被分享的页面。

Inspect

检查

Run
```
node scripts/inspect-metadata.mjs --url <site>
```
(paths relative to this skill's folder). Read raw HTML as served, without JavaScript (do not pass
```
--render
```
for this check), because social crawlers do not execute scripts. If tags appear only with
```
--render
```
, that is the finding.
Check per key page (home, main product/landing pages, key content pages):
```
og:title
```
,
```
og:description
```
,
```
og:image
```
(absolute HTTPS URL, resolves 200, sensible size: about 1200×630, under a few MB; PNG/JPG/WebP, not SVG),
```
og:url
```
(matches canonical),
```
og:type
```
,
```
og:site_name
```
,
```
twitter:card
```
(
```
summary_large_image
```
when an image exists), and image
```
alt
```
(
```
og:image:alt
```
) where supported.
Placeholders and starters:
```
vite.svg
```
,
```
next.svg
```
,
```
placeholder.png
```
, template hero images, a different product's name, localhost or staging URLs.
Per-page uniqueness: article/product pages should not all share the home card unless they truly are the same.
Copy quality: derive from the page's visible headline and product facts, not from a generic tagline; keep it truthful (
```
content-trust
```
).
Image asset: exists in the repo/public folder, is not huge, and is deployed to the production host.
Optional real-world check: platform debuggers (Facebook Sharing Debugger, LinkedIn Post Inspector, X card preview) need the live URL and are the owner's to run; do not claim their results.

运行
```
node scripts/inspect-metadata.mjs --url <site>
```
（路径相对于此 skill 的文件夹）。读取服务端实际提供的原始 HTML，不执行 JavaScript（此检查不要传入
```
--render
```
），因为社交媒体爬虫不会执行脚本。如果标签仅在使用
```
--render
```
时才出现，这就是检查发现。
按关键页面逐一检查（首页、主要产品页或落地页、关键内容页）：
```
og:title
```
、
```
og:description
```
、
```
og:image
```
（使用绝对的 HTTPS URL，能够返回 200，尺寸合理：约 1200×630 且不超过几 MB；使用 PNG/JPG/WebP，不使用 SVG）、
```
og:url
```
（与 canonical 一致）、
```
og:type
```
、
```
og:site_name
```
、
```
twitter:card
```
（存在图片时使用
```
summary_large_image
```
），并在支持的情况下检查图片 alt（
```
og:image:alt
```
）。
占位内容和初始模板资源：
```
vite.svg
```
、
```
next.svg
```
、
```
placeholder.png
```
、模板 Hero 图片、其他产品的名称、localhost 或预发布 URL。
逐页唯一性： 文章页或产品页不应共用首页卡片，除非它们确实是同一个页面。
文案质量： 根据页面可见的标题和产品事实提炼文案，不要使用泛化标语；内容必须真实可信（
```
content-trust
```
）。
图片资源： 存在于仓库的 public 文件夹中，体积不大，并且已部署到生产环境主机。
可选的真实环境检查： 平台调试器（Facebook Sharing Debugger、LinkedIn Post Inspector、X Card Preview）需要使用线上 URL，并且应由所有者运行；不要声称已经获得其检查结果。

Evidence that counts

有效证据

Label each claim OBSERVED, SOURCE-INDICATED, DECLARED, INFERRED, UNKNOWN, or REVIEW REQUIRED. UNKNOWN is never a pass and never a failure.

Tags in raw served HTML: OBSERVED. Tags injected client-side: SOURCE-INDICATED for users, but effectively absent for many crawlers.
Image reachability on a local origin proves nothing about production; UNKNOWN until the deployed URL is checked.
How a specific platform renders the card is UNKNOWN unless its debugger was used.

将每项结论标记为 OBSERVED、SOURCE-INDICATED、DECLARED、INFERRED、UNKNOWN 或 REVIEW REQUIRED。UNKNOWN 既不算通过，也不算失败。

服务端原始 HTML 中的标签：OBSERVED。客户端注入的标签：对用户而言为 SOURCE-INDICATED，但许多爬虫实际上无法获取。
本地源上的图片可达性不能证明生产环境中的情况；在检查已部署 URL 之前一律为 UNKNOWN。
除非使用相应平台的调试器，否则特定平台如何渲染卡片属于 UNKNOWN。

May change

允许修改

Add or fix

og:*

twitter:*

tags through the project's metadata mechanism; create an OG image only if the owner has brand assets to derive it from (or generate a simple text-on-brand-color image using existing design tokens via the project's OG tooling such as

next/og

); use absolute URLs based on the confirmed production origin; align

og:url

with canonical. Do not use stock or AI imagery of people or invented product screenshots.

通过项目的元数据机制添加或修复

og:*

和

twitter:*

标签；仅当所有者拥有可用于生成图片的品牌素材时，才创建 OG 图片（或者使用项目的 OG 工具（如

next/og

），基于现有设计 Token 生成简单的品牌色文字图片）；使用基于已确认生产源生成的绝对 URL；让

og:url

与 canonical 保持一致。不要使用人物图库或 AI 生成的人物图片，也不要使用虚构的产品截图。

Must not claim

不得声称

That previews "will look right on every platform" or are "verified on X". Do not invent taglines, ratings, or numbers in preview copy.

不能声称预览“在所有平台上都会显示正确”或“已在 X 上验证”。不要在预览文案中编造标语、评分或数字。

Verify

验证

Re-run

inspect-metadata

(raw HTML): required tags present, absolute, image responds 200 with an image content-type at the expected host, no starter assets. Confirm the copy is truthful against the page.

重新运行

inspect-metadata

（原始 HTML）：确认必需标签存在、使用绝对 URL、图片在预期主机上以图片 content-type 返回 200，并且没有初始模板资源。确认文案与页面内容一致且真实。

Escalate

需要升级处理

Unknown production origin (ask before writing absolute URLs); brand assets missing (ask the owner for a logo or image rather than fabricating one); a preview that requires platform-specific verification.

生产源未知（写入绝对 URL 前先询问）；缺少品牌素材（向所有者索要 logo 或图片，而不是伪造）；预览需要针对特定平台进行验证。

No change is valid when

以下情况无需修改

The page is not meant to be shared, or tags are already complete, absolute, correct, and truthful. Do not rewrite good copy.

页面不适合被分享，或者标签已经完整、使用绝对 URL、内容正确且真实。不要重写优质文案。