Open Graph Meta Tag 生成器 - 在线生成 SEO 与社交分享标签

在线生成 SEO、Open Graph 和 Twitter Card 页面元标签，适合优化网页标题、描述、分享卡片和搜索结果摘要。

功能特点

  • 生成 title、description、canonical 等基础 SEO Meta 标签
  • 生成 Open Graph 标签，优化微信、社交平台和链接预览效果
  • 生成 Twitter Card 标签，统一页面在不同平台的分享信息
  • 适合上线前检查页面元信息、品牌展示和分享摘要

使用方法

  1. 填写页面标题、描述、URL、站点名称和分享图片信息
  2. 生成 SEO、Open Graph 和 Twitter Card Meta 标签
  3. 将结果放入页面 head 区域并在发布后检查分享预览

示例输入

  • 文章分享卡片

    og:title：ToolByte
og:description：在线开发者工具
og:image：https://example.com/cover.png
og:url：https://example.com/article

    适合生成社交平台分享标题、摘要、封面和规范 URL。

  • Twitter Card

    twitter:card：summary_large_image
twitter:title：API 调试指南
twitter:image：https://example.com/og.png

    适合检查 Twitter/X 使用的补充元标签和图片尺寸。

  • Canonical 与分享 URL 不一致

    canonical：https://example.com/docs
og:url：https://example.com/docs?utm_source=x

    适合排查搜索规范 URL 与社交分享 URL 指向不一致的问题。

  • HTML 特殊字符转义

    title：A & B <Docs>
description：Use "staging"
url：https://example.com/a?x=1&y=2

    生成器会把标题、描述、URL 和图片中的 &、<、>、双引号转义为 HTML 实体，不负责验证 URL 可访问性。

示例输出

  • 文章分享卡片

    <meta property="og:title" content="ToolByte">
<meta property="og:description" content="在线开发者工具">
<meta property="og:image" content="https://example.com/cover.png">

  • Twitter Card

    <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="API 调试指南">

  • Canonical 与分享 URL 不一致

    警告：og:url 带跟踪参数且与 canonical 不一致；建议统一到 https://example.com/docs

  • HTML 特殊字符转义

    HTML 转义：A &amp; B &lt;Docs&gt;；"staging" → &quot;staging&quot;；查询参数中的 & → &amp;

常见错误

  • Open Graph 标签必须放在 HTML head 中，放在页面正文或异步脚本生成可能无法被爬虫读取。
  • og:image 需要可公开访问、返回正确 Content-Type，并满足平台尺寸和文件大小要求。
  • og:url、canonical、页面实际 URL 不一致时，搜索和社交平台可能选择不同的规范地址。
  • 生成标签不代表社交平台已经刷新缓存，发布后通常还要使用平台调试器重新抓取。

适用场景

  • 社交分享卡片生成
  • 博客和文档 SEO 配置
  • 链接预览异常排查
  • Canonical 与 Open Graph 一致性检查

实操检查

  • 核对固定标签集合

    固定输入：title=ToolByte、description=在线开发者工具、url=https://example.com/tools、image=https://example.com/cover.png；步骤：填入四个字段并点击“生成 Meta Tags”；预期结果：输出恰好包含 title、description、og:title、og:description、og:url、og:image、og:type=website 和 twitter:card=summary_large_image 八类标签；失败判断：缺少任一固定标签、字段值没有 trim，或额外声称生成了实现中不存在的 canonical 等标签。

  • 核对 HTML 转义和空输入

    固定输入：title=A & B、description=<Docs> "staging"、url=https://example.com/a?x=1&y=2、image=https://example.com/a&b.png；步骤：生成标签并检查 &、<、>、"；再清空四个字段重新生成；预期结果：特殊字符分别输出为 &amp;、&lt;、&gt;、&quot;，空字段生成空 content 但仍保留 8 行固定标签；失败判断：特殊字符直接破坏属性、空字段触发未经实现的默认值，或清空后保留上一次字段内容。

页面专属核验

使用前与操作中

  • 先准备页面 title、description、绝对 URL 和分享图片 URL；当前页面只生成 8 行基础 title/description、og、website 与 Twitter Card 标签。
  • 把生成结果放入真实页面的 `<head>` 后再检查抓取和分享预览；当前实现不会请求 URL、验证图片尺寸/可访问性，也不会生成 canonical、site_name 或 locale。
  • 输入可能含 `&`、引号或尖括号时保留页面的 HTML 转义结果，并确认目标模板不会再次转义或把未验证 URL 注入其他上下文。

结果出来后

  • 标题、描述、URL 和图片前后空白是否被 trim，且 `&`、引号和 `< >` 是否在属性值中正确转义？
  • 输出是否同时包含 `<title>`、description、og:title、og:description、og:url、og:image、og:type=website 和 twitter:card，而没有被误认为已发布？
  • 上线页面的 canonical、社交爬虫可访问性、图片尺寸/协议、缓存和实际分享卡片是否已经用目标平台工具复核？

相关工具

工具边界

  • 工具只生成元标签，不会替你验证所有社交平台的抓取、缓存和展示结果。
  • 不同平台支持的字段、图片比例和缓存时间不同。
  • 不要把 Open Graph 标签当作结构化数据、canonical 或 robots 规则的替代品。

与相似工具的区别

  • Sitemap XML 生成 / 校验：Open Graph 控制单页在社交分享中的标题、描述和图片；Sitemap 向搜索引擎列出站点可发现 URL。

安全与兼容性

  • 标签生成在本地完成；预览图片 URL 可能由浏览器或社交抓取器请求，应避免包含签名密钥和私有资源。
  • og:image 应使用 HTTPS、稳定公开地址和正确 MIME；发布后需用各平台调试器检查缓存与抓取限制。

下一步排查

  1. 先把生成结果放入 HTML head，并确认页面源代码中能直接看到。
  2. 用 Headers、MIME 和 HTTP 状态工具检查页面及图片的可访问性。
  3. 最后通过目标平台调试器重新抓取，并核对 canonical、robots 和 sitemap。

常见问题

为什么设置了 og:image 仍然没有封面？

检查图片 URL 是否公开可访问、响应头是否为图片、尺寸和大小是否符合平台要求，并清除平台缓存后重新抓取。

Open Graph 能直接提升 Google 排名吗？

它主要影响社交分享预览，不是直接排名因素；页面内容、可抓取性、canonical 和整体 SEO 质量仍需单独处理。