根本原因是页面缺少open graph（og）标签；平台优先读取og:title、og:description、og:image三个标签，缺失时仅回退显示url或，导致无图无描述。
为什么分享出来只有链接，没图没描述？
根本原因是页面缺少 Open Graph（OG）标签。Facebook、LinkedIn、Twitter（现 X）、Discord 等平台抓取分享预览时，**优先读取 og:title、og:description、og:image 这三个标签**；没有它们，就只能回退到 <title></title> 和纯文本内容，甚至只显示 URL。
常见错误现象：
- 分享后预览图是空白、404 或显示网站 favicon
- 标题被截断成“Untitled”或域名本身
- 描述区域为空，或显示了无关的 HTML 注释/脚本内容
实操建议：
-
og:image必须是**绝对路径 HTTPS 地址**，相对路径或本地file://会被忽略 - 图片尺寸建议固定为
w=1200×h=630，避免平台自动裁剪变形 - 确保图片能被公开访问（无登录拦截、无 robots.txt 屏蔽、CORS 允许跨域读取）
- 不要依赖 JS 动态注入 OG 标签——爬虫不执行 JS，必须在 HTML 源码中静态存在
Twitter 卡片不生效？检查 twitter:card 和域名验证
Twitter（X）使用独立的 twitter:* 标签体系，且对 twitter:card 类型和域名授权更敏感。即使 OG 标签全对，Twitter 仍可能只显示纯链接。
关键点：
-
twitter:card必须显式声明，常用值为summary（带图小卡片）或summary_large_image（大图卡片），后者需配og:image -
twitter:site应填带@的官方账号，如@fasthtml_dev；否则部分字段（如作者信息）可能不展示 - 如果用自定义域名（如
myblog.dev），需在 Twitter Developer Portal 中完成域名验证，否则卡片降级为纯文本 - 调试务必用 Twitter Card Validator，它会返回具体失败原因（如 “Image HTTP status code was not ‘200’”）
微信和微博分享为何不显示自定义图/标题？
微信（外链）和微博不读取 OG 标签，而是依赖自己的一套 meta 规则 + 客户端解析逻辑，且对协议、域名、资源加载有隐性要求。
典型问题与对策：
- 微信外链分享只在 iOS 微信内核或 Android 微信 8.0+ 支持
og:image；老版本强制用weibo:article:image或weibo:webpage:image - 微博识别优先级：先找
weibo:article:title→ 再 fallback 到og:title→ 最后用<title></title>；同理描述和图片也有对应私有标签 - 微信分享卡片图必须满足：HTTPS、尺寸 ≥ 300×300、格式为 JPG/PNG、文件大小 ≤ 5MB；否则显示默认灰色占位图
- 国内平台普遍对非备案域名、测试域名（如
localhost、127.0.0.1）限制严格，本地开发务必用 ngrok 或 Vercel 部署真环境测试
如何一次写对所有平台的 meta 标签？
手动拼一堆 <meta> 容易漏、难维护。推荐用框架封装或生成器统一管理，比如 FastHTML 的 Socials 函数，或静态站生成器插件。
一个最小可行的通用模板（可直接复制进 ）：
<meta property="og:title" content="你的页面标题"><meta property="og:description" content="150字以内精准描述"><meta property="og:image" content="https://yoursite.com/og.png"><meta property="og:url" content="https://yoursite.com/current-page"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="你的页面标题"><meta name="twitter:description" content="150字以内精准描述"><meta name="twitter:image" content="https://yoursite.com/og.png"><meta name="twitter:site" content="@yourhandle"><meta property="weibo:article:title" content="你的页面标题"><meta property="weibo:article:description" content="150字以内精准描述"><meta property="weibo:article:image" content="https://yoursite.com/og.png">
注意：
- 所有
content值必须用encodeURIComponent处理特殊字符（尤其是中文和标点），否则微博等平台解析失败 - 动态页面中，
og:url和twitter:image必须随路由实时更新，不能写死 - 图片 URL 尽量避免带查询参数（如
?v=2），某些平台缓存策略会导致反复抓旧版
最常被忽略的是：改完 meta 后没清空平台缓存。Facebook 要用 Sharing Debugger 强制重新抓取，Twitter 和微博也需用各自验证工具刷新——不是 Ctrl+F5 刷新网页就能生效的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
