免费转换器

OG 标签 生成器

为Facebook、Twitter和LinkedIn生成Open Graph元标签。免费OG标签生成器,带实时社交卡片预览。

0/95
0/200

Facebook预览

YOURWEBSITE.COM
页面标题(最多95个字符)
页面简短描述(最多200个字符)

生成的HTML

<!-- Open Graph Tags -->
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="" />
<meta property="og:locale" content="en_US" />

<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />

关于此工具

开放图谱 (OG) 标签控制页面在社交平台上共享时的显示方式。 Facebook、LinkedIn、Slack、Discord 和许多其他公司读取 OG 标签来构建预览卡。如果没有正确的 OG 标签,共享链接看起来就会损坏——通用图标、图像丢失、标题被截断。有了它们,分享看起来很精致,点击率也显着提高。

标准 OG 标签:og:title(预览中显示的标题)、og:description(文本片段)、og:image(预览图像,理想情况为 1200×630)、og:url(规范 URL)、og:type(通常为“网站”或“文章”)。 Twitter 卡标签位于顶部:twitter:card、twitter:title、twitter:description、twitter:image。当 Twitter 特定标签不存在时,大多数工具都会回退到 OG。

该生成器根据您的输入生成一整套 OG 和 Twitter 卡标签。将生成的 HTML 粘贴到页面的 <head> 中。结果是在所有主要社交平台上正确预览渲染。

为什么使用 OG 标签生成器

没有 OG 标签的页面在共享时看起来很糟糕。空图像、通用标题、缺少描述——预览与提要中正确标记的页面竞争很差。对于内容营销和链接共享来说,这直接影响点击率。

手写 OG 标签是重复的。每个页面都需要自己的集合。从一些输入生成正确标签的生成器可以避免破坏社交预览的拼写错误和丢失属性。

使用方法

填写输入,获取标签。

  1. 输入标题和描述: 这些是共享预览中显示的内容。将标题控制在 60 个字符以内,将描述控制在 200 个字符以内,以便跨平台清晰显示。
  2. 提供图像 URL: 1200×630像素是标准尺寸。使用绝对 URL (https://example.com/og-image.png)。图像必须可公开访问——经过身份验证的图像会破坏预览。
  3. 设置规范 URL: 页面本身的 URL。用作 og:url 并帮助平台识别规范资源,即使是通过重定向 URL 共享时也是如此。
  4. 选择页面类型: 一般页面的网站、博客文章和新闻的文章、电子商务的产品。影响某些平台呈现预览的方式。
  5. 复制生成的标签: 该工具生成 HTML 链接标记,可以粘贴到页面的 <head> 中。通过 CMS、模板引擎或直接在 HTML 中应用。

常见用例

技术细节

OG 标签使用元属性(不是名称):<meta property="og:title" content="..." />。 property属性是OG所必需的;一些解析器接受名称作为后备,但属性是正确的。

图片要求:视网膜渲染1200×630像素,长宽比1.91:1。 og:image:width 和 og:image:height 标签帮助平台正确缓存图像。 og:image:alt 提供可访问性文本。

Twitter 卡标签使用名称属性:<meta name="twitter:title" content="..." />。当 Twitter 特定的内容不存在时,Twitter 会退回到 OG 标签,因此设置良好的 OG 通常就足够了。添加 twitter:card 显式选择卡片类型(summary_large_image 是最常见的)。

最佳实践

常见问题

我可以自定义生成的输出吗?
是的。该工具提供了各种自定义选项,可以根据您的特定需求定制输出。在生成之前调整设置,或使用不同的选项重新生成。
生成的内容可以免费使用吗?
是的。您使用此工具生成的所有内容都可以用于个人、教育或商业目的,没有任何限制或归属要求。
这个需要账号吗?
不需要。该工具无需注册、无需电子邮件、无需注册即可立即使用。只需打开页面并开始生成。
我的输入数据是否保密?
是的。所有处理都发生在您的浏览器中。您的输入数据和生成的输出永远不会发送到任何外部服务器。
我可以为每个页面使用相同的 OG 图像吗?
可能但不是最理想的。页面特定图像的点击率优于通用站点范围图像。使用默认值进行后备,但为重要内容生成每页图像。
是否需要声明图片尺寸?
有帮助,但不是严格要求。 og:image:width 和 og:image:height 让平台缓存图像而无需重新获取以确定尺寸。加速后续共享。
我的数据上传了吗?
不会。生成发生在您的浏览器中。
如何测试 OG 标签?
Facebook 共享调试器、Twitter 卡验证器和 LinkedIn Post Inspector 分别进行获取和验证。部署新的 OG 标签后使用它们。