社交媒体链接预览
根据标题、描述和图片，预览链接在 Facebook、X 和 LinkedIn 上分享时的大致效果，或直接从页面 URL 读取 og: 标签。
Facebook
无图片
example.com
My Awesome Article
A short summary shown when the link is shared on social networks.
X (Twitter)
无图片
My Awesome Article
来自 example.com
LinkedIn
无图片
My Awesome Article
example.com
这些是各平台当前链接卡片布局的近似模拟；实际卡片取决于应用、屏幕尺寸和平台缓存。“从 URL 加载标签”会通过 AlgoKit 服务器获取页面并读取其中的 og:/twitter: 标签。
什么是 社交媒体预览？
这个工具并排展示 Facebook、X（Twitter）和 LinkedIn 为某个 URL 显示的链接卡片的大致效果图。你可以输入标题、描述和图片 URL，也可以点击“从 URL 加载标签”，自动读取页面的 Open Graph 和 Twitter 标签。
如何使用 社交媒体预览
- 输入页面 URL；也可以点击“从 URL 加载标签”，用页面的 og: 和 twitter: 标签填充各字段。
- 编辑标题、图片 URL 和描述，尝试不同版本。
- 对比三种卡片效果图；过长的文字会按各网络通常的方式缩短。
何时使用 社交媒体预览
适合在发布之前反复调整分享标题和图片。效果图只是近似的，真实卡片取决于应用版本、屏幕尺寸和各网络的缓存，因此重要的推广活动请用官方调试工具确认。
社交媒体预览 的工作原理
预览在本地按各网络当前的卡片布局（1.91:1 的图片、主机名、标题和描述）及大致的字数限制渲染。“从 URL 加载标签”使用 AlgoKit 带 SSRF 防护的 Pages Function 获取页面并提取其 meta 标签（og:title、og:description、og:image、twitter:*，并以 HTML 标题和描述作为回退）。图片直接从你输入的 URL 显示。
常见用例
- 检查博客标题在 Facebook 上有没有被截断。
- 查看商品图片在宽卡片中如何被裁剪。
- 对比两个标题版本的预览效果。
- 验证线上页面的 og:image 设置是否正确。
常见问题
这些预览是精确的吗？
不是。它们遵循各网络当前的布局，但字体、截断和裁剪会因设备而异，也会随时间变化。
为什么“从 URL 加载标签”失败了？
该页面可能屏蔽了机器人、需要登录、位于私有网络，或已离线。你仍然可以手动输入这些值。
会读取哪些标签？
首先是 og:title、og:description、og:image 和 og:url，然后是 twitter:title/description/image，最后是页面的 <title> 和 meta 描述。