<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Awesome Page</title> <meta name="description" content="A short description of this page for SEO and search engine results."> <meta name="keywords" content="vue, nuxt, tools"> <meta name="robots" content="index, follow"> <link rel="canonical" href="https://example.com/page">
关于 Meta 标签生成器
当链接被分享到微信、Twitter、Facebook、Slack 等平台时，平台会读取页面 <head> 里的 Open Graph 与 Twitter Card 标签来生成带标题、描述和缩略图的预览卡片。本工具在浏览器本地根据你填写的标题、描述、图片、URL 和类型，一次性生成 og:、twitter: 及基础 SEO meta 标签代码，复制即可粘贴到模板中。所有标签都在本机拼装，你输入的页面信息不会被发送或保存到服务器。所有处理均在浏览器本地完成，无需安装任何软件，它适合在发布落地页、活动页或博客时一次性补齐社交分享所需的 head 标签，避免卡片显示异常。所有标签在本机拼装，你输入的页面信息不会被发送或保存，适合发布前的本地自检。
网页分享到社交平台时显示的标题、描述与缩略图，并不是由页面正文决定的，而是由一组元信息标签声明。没有这些标签时，平台会自行猜测：从正文里抓一段文字、挑一张尺寸未必合适的图片，结果常常与预期相差很远。生成这些标签的价值就是把「让别人猜」变成「我说了算」。 标签体系可以分成三组。基础组决定搜索与浏览器展示：页面标题与描述。开放图谱组决定社交平台展示：标题、描述、图片地址、页面类型与规范地址。卡片组是另一套并行的社交标签，很多平台两者都读，因此两套都需要写且内容一致。除内容之外，缩略图有明确的尺寸与比例要求，使用不符合要求的图片会被裁剪或直接不展示，这一点比文案更容易被忽略。 使用要点：把规范地址写成绝对地址，相对地址在部分平台上无法解析；同一份内容在多个页面上复用时，务必为每页设置独立的规范地址，否则平台可能把它们视为重复而合并展示。描述长度要按目标平台的截断习惯控制，过长会被截断成难以理解的半句话。如果页面内容会随语言变化，还应为不同语言版本设置对应的标签，并考虑用语言区域属性指明适用语言。 边界与限制：这些标签只影响展示，不改变搜索排名，把它们当作排名的直接手段是误解；它们的作用是提高点击率而非排名。另外平台解析方式会变化，某些平台会忽略部分标签转而用自身算法判断，因此不要依赖单一标签决定最终效果，图片与标题都要经得起单独展示。最后，标签过多会稀释页面头部体积，只保留真正会被消费的几项即可。 数据与隐私：元信息会公开暴露在页面源码中，因此不要在其中写入内部地址、未公开的项目代号或带鉴权的参数。本工具在浏览器内生成标签文本，不上传输入内容，可离线使用。
误用主要有两处。一是把元信息标签当成排名手段——它们只影响分享卡片的展示，不参与搜索引擎排序，把精力投在这里而忽略内容质量是本末倒置。二是多个页面复用同一套标签，平台以地址判断唯一性，可能视为重复并合并展示，出现「分享 A 页却显示 B 页标题」。
实现原理
元信息标签声明的是「这个页面是什么」，供平台在分享与索引时读取，因此它们不参与排名，只影响展示。两类标签并行存在（开放图谱与卡片），多数平台两者都读，因此需要同时写且内容一致；缩略图与规范地址都有硬性格式要求，写错会被忽略而非报错。
把规范地址写成相对路径多数平台无法解析 → 卡片回退到平台自身推断，结果与预期不符；应写绝对地址使用方法
- 打开「Meta 标签生成器」
- 输入或粘贴待处理的内容
- 根据需要调整输出选项
- 点击「运行」按钮，结果实时显示
- 复制或导出结果
使用场景
- 优化分享卡片 — 为文章页生成 og:title、og:image，让链接在社交平台显示精美预览。
- 统一站点元信息 — 为新页面批量产出 description、og 标签，保持站内规范一致。
- 适配多平台 — 同时输出 Open Graph 与 Twitter Card 标签，覆盖不同分享渠道。
- 电商落地页 — 为促销页配置带商品图与价格描述的预览，提高点击率。
- 调试预览异常 — 对照生成的标准标签，排查抓取器抓不到图或标题的问题。
常见问题
og:image 有什么尺寸要求？
多数平台推荐 1200×630 像素（约 1.91:1），文件不宜过大。图片需用可公开访问的绝对 URL，否则抓取器拿不到会显示空白卡片。
改了标签为什么分享预览没更新？
平台会缓存抓取结果。修改后需用对应的调试器（如 Facebook 分享调试工具）强制重新抓取，或等待缓存自然过期。
Open Graph 和普通 meta description 冲突吗？
不冲突，二者用途不同：description 主要服务搜索引擎摘要，og:description 服务社交分享卡片，建议都填且内容可略有侧重。
一定要 twitter: 标签吗？
Twitter/X 在缺少 twitter: 标签时会回退读取 Open Graph 标签，但显式设置 twitter:card 能更精确控制卡片样式（如大图或摘要图）。
这些标签会影响搜索排名吗？
og 标签本身不是直接排名因素，但更好的分享预览能提升点击与传播；title 和 description 则会影响搜索结果展示，间接影响点击率。
标签都写对了，分享出去还是没有缩略图？
先确认图片地址是绝对地址且可被外网直接访问：相对地址多数平台无法解析，而内网地址或需要鉴权的图片地址会被拒绝抓取。其次确认图片格式与尺寸符合要求，过小的图片常被忽略。最后注意平台会缓存抓取结果，改动之后需要重新抓取或换一个链接验证，否则看到的仍是旧卡片。
同一套标签用在多个页面上会有问题吗？
会。多数平台以地址为标识判断内容唯一性，多个页面共用同一套标签（尤其是同一张图和同一个规范地址）时，平台可能视为重复内容并合并展示，出现「分享 A 页面却显示 B 页面标题」的情况。正确做法是每个页面都有独立的标题、描述与规范地址，图片可以复用但地址应指向该页的专属素材。
生成的 meta 标签该放在 HTML 哪个位置？
必须放在 <head> 内，且在 <title> 之后。放错位置（body 内）浏览器会忽略或告警，搜索引擎也可能不识别。OG 标签（og:title 等）同样在 head 内，调试时用 Facebook 分享调试器或微信开发者工具验证实际抓取效果。