Meta 标签生成器
在浏览器里为任意页面生成一整套 HTML Meta 标签。填入标题、描述、规范链接、分享图片和站点名称，工具就会组装出搜索标签、面向 Facebook 与领英的 Open Graph 标签，以及面向 X 的 Twitter Card 标签。右侧实时预览这个链接在 Google 结果里的样子，以及作为社交卡片展开的效果，让你在上线前先把文案和配图调好。结果可直接复制成可粘贴的 head 片段，或下载为 HTML，你输入的内容不会离开本页。
- 一次生成标题、描述、Open Graph 与 Twitter Card 标签
- 边输入边预览 Google 结果，以及 Facebook、X 的卡片
- 设置规范链接、分享图片、语言区域、主题色和收录规则
- 复制 head 片段或下载为 HTML，全程在浏览器本地完成
这里以一段简短易读的概括显示你的 Meta 描述。
功能简介
几个字段就能组成一段完整的 head 片段——搜索、Open Graph 和 Twitter Card 标签集中在一起——并配有实时预览，让你在上线前先看清页面被搜索和分享时的样子。
- 01
完整的 head 片段
一次生成标题、Meta 描述、规范链接、Open Graph 和 Twitter Card 标签，按分组排列并带注释，可以直接粘贴进任意页面的 head。
- 02
丰富分享的 Open Graph
设置 og:title、og:description、og:image、og:url、og:type、og:site_name 和 og:locale，让 Facebook、领英、Slack 等平台展示完整卡片，而不是一条干巴巴的链接。
- 03
支持 Twitter Card
选择摘要卡片或大图卡片，填好标题、描述、图片以及站点与作者账号，让链接在 X 上渲染成卡片。
- 04
搜索与社交实时预览
在 Google、Facebook 和 X 三种预览之间切换，提前看到标题、描述、域名和图片大致的排布方式，再决定怎么调整。
- 05
长度提示
标题和描述带有字数提示，一旦超过搜索引擎和社交卡片通常会截断的长度就会变色，帮你把关键信息留在可见范围内。
- 06
规范链接、收录与主题色
可以加上规范链接来合并重复页面，在允许收录和禁止收录之间切换，并为移动端浏览器界面设置主题色。
- 07
安全转义的输出
含有 & 号、尖括号或引号的内容会按 HTML 属性规则转义，带标点的标题不会破坏标签或页面。
- 08
本地复制或下载
可以把片段复制到剪贴板，也可以下载成 HTML 文件。整个过程都在浏览器标签页内完成，本页不会把内容上传到服务器。
如何使用
在左侧填写字段，右侧的预览和片段会即时更新。一直调整到搜索结果和社交卡片读起来符合预期为止。
- 01
填写页面标题和描述，留意旁边的字数提示。
- 02
补上规范链接、站点名称，并填一张分享图片地址来获得丰富的社交卡片。
- 03
为页面选择合适的 Open Graph 类型和 Twitter 卡片样式。
- 04
展开高级，设置语言区域、主题色、作者、关键词、账号或禁止收录规则。
- 05
在 Google、Facebook 和 X 预览之间切换，确认链接展示的效果。
- 06
复制 head 片段或下载成 HTML，再粘贴到页面的 head 里。
功能说明
并非每个标签都同等重要。一个简短准确的标题和描述，加上一张过硬的分享图，就完成了大部分工作；其余只是针对各个平台的微调。
- 始终写清楚标题和描述，它们同时决定搜索摘要和社交卡片的文字。
- 准备一张约 1200 × 630 像素的分享图，大图卡片才不会被裁切或显得模糊。
- 把规范链接设为页面首选地址，避免重复网址分散权重信号。
- 加上 og:site_name 和 Twitter 账号，让分享内容明确归属到你的品牌。
- 文章页用 article 类型，落地页和首页用 website 类型。
- 对预发布、致谢或内容单薄、不想被搜索收录的页面，设置禁止收录规则。
适合哪些场景
Meta 标签决定了页面被发现或分享那一刻的呈现，因此几乎对所有面向公众的站点或应用都重要。
-
博客和文章页
为每篇文章定制标题、描述和分享图，让它在搜索结果里和作为社交卡片时都读起来得体。
-
营销落地页
精确控制活动链接被粘贴到聊天、发到社交平台或出现在搜索里时的呈现方式。
-
产品与价格页
配上准确的 Open Graph 标题和图片，让分享出去的产品链接显示成干净的卡片，而不是裸链接。
-
文档与更新日志
在大量页面上设置规范链接和一致的描述，让搜索引擎收录正确的版本。
-
单页应用
生成静态的 head 标签放进外壳页面，让爬虫和链接解析器读到真实的元数据。
-
快速自查社交卡片
发布前预览链接在 Google、Facebook 和 X 上的展开效果，再调整标题或图片。
延伸阅读
Meta 标签和站点 head 的其余部分天然搭配。要生成浏览器和书签显示的图标，可以用 Favicon 网站图标生成器 导出 ICO 和清单文件。要把页面标题转成作为规范链接的干净网址，先经过 Slug 生成器 处理。挑选主题色时，可以用 对比度检查 检查可读性。如果标题或描述里有想确认的特殊字符， HTML 编码解码 会显示它们各自的编码形式。
使用建议
出色的元数据真实、具体而一致。几个习惯能让搜索摘要和社交卡片在站点壮大后依然准确。
- 为每个重要页面写独立的标题和描述，而不是全站共用同一组。
- 标题控制在约 60 个字符以内、描述控制在约 160 个字符以内，避免被截断。
- 分享图片用绝对 https 地址，相对路径在社交平台上常常加载失败。
- 让标题和描述贴合页面真实内容，误导性的元数据会损害信任和点击率。
- 上线后用各平台自带的调试工具重新检查，因为有些平台会缓存它首次抓取的版本。
边界与注意事项
工具只负责生成标签，它无法抓取你的页面，也无法左右各个第三方平台最终如何渲染。
- 预览只是近似展示；每个平台都有自己精确的版式、截断和图片规则，而且会随时间变化。
- 加标签并不会触发重新抓取；搜索引擎和社交平台按自己的节奏更新，可能仍缓存旧卡片。
- 分享图片必须放在公开可访问的地址上，本地或私有路径在分享时无法加载。
- meta 关键词已被主流搜索引擎基本忽略，这里保留只为极少数仍会读取它的系统。
- 良好的元数据有助于呈现，但不是排名捷径，内容质量和页面体验仍是关键。
常见问题
关于 Open Graph、Twitter Card、分享图片，以及这些预览与各平台实际渲染之间关系的常见问题。
Open Graph 和 Twitter Card 标签是什么？
Open Graph 标签是以 og: 为前缀的 meta 标签，告诉 Facebook、领英、Slack 等平台在分享链接时该显示的标题、描述、图片和网址。Twitter Card 标签对 X 起同样作用。两者一起把裸链接变成丰富的卡片。
分享图片该用多大尺寸？
1200 × 630 像素是大多数平台大图卡片的稳妥选择。请用绝对 https 地址，并让重要文字远离边缘，因为各平台的裁切方式可能略有不同。
为了 SEO 还需要 Meta 描述吗？
需要。搜索引擎常把 Meta 描述用作结果中标题下方的摘要。一段清晰、准确、贴合页面的描述能让结果读起来更好、有助于提升点击率，即便它并不是直接的排名因素。
为什么我分享的链接还是显示旧的预览？
多数平台会在首次抓取链接时缓存元数据。更新标签后，用平台自带的分享调试工具或链接检查器强制刷新，新的标题、描述和图片才会被重新读取。
规范链接是做什么用的？
当同一内容可以通过多个地址访问时，规范链接告诉搜索引擎哪个网址是这个页面的首选版本。它把排名信号合并到一个网址上，避免重复内容造成的混淆。
我输入的内容会被上传到服务器吗？
不会。生成器完全在你的浏览器标签页内运行。你填写的内容、预览、生成的片段以及下载的文件，本页都不会上传到服务器。