跳到正文
马克工具箱

网页分享卡片预览与 meta 检测

输入网址,读取网页的标题、描述和 Open Graph、Twitter Card 标签,预览它在搜索结果、社交平台大卡片和聊天分享里的样子,并指出缺少分享图片、标题过长、没有 canonical、误设 noindex 等问题。

在服务器上处理,处理完不保存

使用步骤

  1. 输入网址(不写协议时默认 https)。
  2. 点「查询」,查看三种预览效果。
  3. 按「检查结果」补全或修改页面的 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 地址和请求地址,仅用于防止滥用。

相关工具