使用步骤
- 输入网址(不写协议时默认 https)。
- 点「查询」,查看三种预览效果。
- 按「检查结果」补全或修改页面的 meta 标签,改完再查一次确认。
参数说明
- 读取范围
- 只读取网页的 <head> 部分,最多 1 MB;自动识别 UTF-8、GBK 等编码。
- 长度建议
- 标题不超过 60(汉字按 2 计),描述 50~160。搜索引擎按显示宽度截断,这只是近似值。
- 访问限制
- 只能访问公网地址的 80、443、8080、8443 端口,最多跟随 5 次跳转。
预览用到哪些标签
三种预览中的每一段文字,都取自按下面顺序最先出现的标签:
| 预览部分 | 取自,找到的第一个 |
|---|---|
| 标题 | og:title,其次 twitter:title,再其次页面标题 |
| 描述 | og:description,其次 twitter:description,再其次 meta description |
| 图片 | og:image,其次 twitter:image |
「检查结果」列表会标出缺少 og:title、og:description、og:image 或 twitter:card,og:image 不是绝对的 http 或 https 地址,以及标题或描述不在长度建议范围内的情况。下面这组最精简的标签可以通过所有检查,放在页面的 head 里:
<meta property="og:title" content="Page title">
<meta property="og:description" content="One or two sentences about the page.">
<meta property="og:image" content="https://example.com/share.png">
<meta property="og:url" content="https://example.com/page">
<meta name="twitter:card" content="summary_large_image">
Open Graph 协议(ogp.me)把 og:title、og:type、og:image 和 og:url 定义为基本属性。twitter:card 的取值有 summary(小卡片)和 summary_large_image(文字上方显示大图)。
常见问题
为什么改了标签,微信或社交平台里还是旧的卡片?
各平台会缓存分享卡片,通常要等几小时到几天才会刷新。Facebook、LinkedIn、X 都提供了官方的调试工具,可以手动让它们重新抓取。
og:image 用多大的图片?
常用 1200×630 像素(约 1.91:1),文件小于 5 MB,使用完整的 https 地址。正方形的小图在大卡片里会被裁切或显示成小卡片。
页面是前端渲染的,为什么查不到标签?
这里和大多数社交平台的抓取程序一样,只读取服务器返回的 HTML,不执行 JavaScript。标签需要在服务端渲染或静态生成时就写进 HTML。
微信里的分享卡片也是按这些标签显示的吗?
微信内置浏览器打开的网页,自定义分享卡片需要接入微信 JS-SDK;直接粘贴链接时显示的标题和图片以微信自己抓取的结果为准,这里的聊天卡片只是近似预览。
隐私说明
这个工具需要服务器完成:你输入的内容或文件通过 HTTPS 发送到我们的服务器,处理完立即丢弃,不做保存。服务器访问日志会记录 IP 地址和请求地址,仅用于防止滥用。