文章正文写好了，分享出去时却发现标题不够清楚、描述重复，封面也没选对。这个免费的 Meta 标签在线预览工具，把网页信息编辑、搜索摘要模拟与社交分享卡片放到一起：一边改文字，一边看组合效果，确认后再复制标签代码，少走一次发布后返工的流程。
如何使用Meta标签预览工具
- 填写网页信息：在「网页地址 / canonical」中输入完整 HTTP(S) 地址，填写网页标题、描述和站点名称。预览会随输入更新，标题与描述旁边显示字符数。网页地址只用于显示域名、生成标签和解析相对图片路径，不会自动抓取这个网址的内容。
- 切换预览方式：选择「搜索摘要」「OG 分享」或「X / Twitter」，比较同一组信息的展示。勾选「窄屏卡片预览」可收窄卡片；文字过长时会按当前版式截断，适合检查前半句话是否已经表达了重点。
- 单独调整社交信息：展开「独立设置社交标签」，可以另填 OG 标题、描述、网页地址，以及 X 标题、描述、图片和卡片类型。留空时，OG 标题与描述沿用网页信息，X 标题与描述沿用 OG；X 图片默认使用分享图片。卡片类型支持大图和摘要两种。
- 按需查看图片：填写图片地址后不会马上发送图片请求。切到社交预览，再点击「加载当前卡片图片」，才会向图片服务器请求资源。加载后显示原图尺寸，预览按卡片容器裁切；切换卡片或修改字段后，需要重新点击加载。相对图片路径需要先填写完整网页地址，建议正式发布时使用公开可访问的图片地址。
- 提取已有页面的标签：展开「粘贴 HTML 提取标签」，粘贴网页源代码或 head 片段，点击「提取并替换字段」。提取会替换当前字段，缺失信息留空；重复标签取第一个并给出提示。源代码上限为 50 万字符，只解析工具支持的字段，不执行其中脚本，也不加载其中的图片或样式。
- 复制或下载：查看「检查提示」，确认没有遗漏标题、描述或有效地址，再点击「复制代码」。浏览器不允许自动复制时，工具会选中代码，按 Ctrl+C 或长按复制即可。也可下载包含 head 代码的最小 HTML 模板；它不含原网页正文，不能替代网站备份。
「加载示例」会替换现有字段，方便先熟悉操作；「清空」会清除输入，索引指令恢复为 index,follow，卡片类型恢复为大图。工具不保存输入，刷新后恢复示例。除主动加载图片外，填写的文本与粘贴的 HTML 都在当前浏览器内处理，无需账号，也不调用外部字体或统计服务。
网页标题、描述与分享标签各管什么
网页标题通常放在 title 元素中，描述则通过 name 为 description 的 meta 标签提供。按照 MDN 的 meta 属性说明，description 用于简短、准确地概括页面内容。写描述时，与其重复整段标题，不如补充读者能在页面里找到的具体内容。
社交卡片的信息还涉及 Open Graph。Open Graph 协议定义了 og:title、og:type、og:image 和 og:url 等属性，分别描述分享对象的标题、类型、图片和地址。本工具生成 website 类型，并可输出站点名称、描述和图片替代文本。它还生成 twitter:card、twitter:title、twitter:description 等标签，便于为 X 卡片准备信息。
一个常见用法是让搜索标题突出页面主题，分享标题更适合脱离正文阅读。两者可以不同，但都应如实描述同一页面。工具中的字段沿用只是减少重复输入的便利设计，不代表所有平台都按相同顺序读取标签。
预览能检查版式，不能代替平台抓取
这款工具适合发布前检查标题是否一眼能读懂、描述是否补充了信息、分享图片是否裁掉关键内容，也适合接手页面时从 HTML 中快速整理已有标签。检查提示会提醒缺失字段、无效网址、图片替代文本，以及 robots 中的 noindex 指令。
标题超过 30 字符、描述超过 78 字符时，工具会给出精简提示，这是本工具的编辑参考线，不是搜索平台统一规定的字符上限。中英文宽度不同，设备和版式也会影响截断；平台还可能根据查询词与页面内容改写展示文字，因此模拟卡片不能保证线上显示完全一致。
生成代码时，含有尖括号、与号或引号的内容会转义；无效网页或图片地址会被省略。相对图片路径按填写的网页地址解析，不应用粘贴 HTML 中的 base 标签。robots 指令按输入保留；若包含 noindex，发布前应确认这确实是你的索引意图。
最后，把生成内容放进页面 head 前，先检查现有主题或 SEO 插件是否已经输出同名标签，替换或统一管理，避免叠加。HTML 提取只覆盖本工具支持的字段，不会完整保留原来的 head；结构化数据、文章专属 OG 属性、图标和其他标签仍需单独处理。发布后还应核对正式页面源代码、图片可访问性与目标平台的实际展示，预览本身不等于已经收录，也不承诺排名变化。