Meta 标签 / Open Graph 生成器

填写页面的标题、描述、URL 和分享图片,即可获得一段完整、可直接粘贴的 <head> 代码片段——包括 meta 描述、canonical 链接、面向 Facebook 和 LinkedIn 的 Open Graph 标签,以及面向 X 的 Twitter Card 标签——不用再手动逐个拼装,也不必到处找好几个单一用途的生成器。

1. 页面基本信息

0 个字符

0 个字符

2. 分享图片

3. 更多选项

内容类型

生成的代码片段

<meta name="robots" content="index, follow" />

<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary" />

常见问题

生成的代码片段里实际包含什么?

一个 '<title>' 标签、一条 meta 描述、一个自引用的 canonical 链接、一个 robots 标签、核心 Open Graph 标签集合(og:type、og:title、og:description、og:url、og:site_name、og:image、og:image:alt、og:locale)、Twitter Card 标签集合(twitter:card、twitter:title、twitter:description、twitter:image、twitter:site),以及你填写了的话会有的 theme-color 标签。任何留空的字段都会直接从输出中省略,而不会生成一个空的或格式错误的标签。

meta 描述和 Open Graph 描述有什么区别?

meta 描述是搜索引擎可能在搜索结果中你的页面下方展示的摘要;Open Graph 描述(og:description)则是页面在 Facebook、LinkedIn 等平台被分享时显示的内容。实际使用中,同一段写得好的一两句话通常两边都适用,这也是为什么本工具会把你填写的那一个描述字段同时复用到两个标签上——不过如果你希望它们的措辞略有不同,完全可以在粘贴代码片段之后自行修改。

为什么我的标题会出现长度警告?

大约 60 个字符的建议值,大致反映了搜索引擎在用省略号截断标题之前,通常会在搜索结果中显示多少文字——这并不是一个硬性的技术限制,更长的标题在其他地方依然可以正常使用。如果你在意标题在搜索结果中显示的具体措辞,把标题中重要的部分控制在这个大致长度以内,可以避免它被截断。

Open Graph 图片应该用什么尺寸?

1200×630 像素(大约 1.91:1 的比例)是最常被推荐的尺寸,因为 Facebook、LinkedIn 和 X 的大图卡片布局大致就是按这个比例设计的。更小或形状不同的图片通常也能显示,但平台可能会以你无法控制的方式对其进行裁剪,所以接近这个比例的图片往往更容易按你的预期呈现。

这真的会改变我线上网站的内容吗?

不会——这只是一个文本生成工具。它在你的浏览器中构建代码片段,不会在任何地方自动发布或更改任何内容。你仍然需要自己把结果粘贴到页面真正的 HTML '<head>' 中,或者粘贴到你的 CMS 或建站工具为该页面提供的 SEO/meta 字段里。

为什么 Twitter Card 的类型会自动改变?

只要提供了图片链接,twitter:card 就会被设为 summary_large_image,否则设为 summary——这与 Twitter/X 自身卡片类型的设计用途相符:summary_large_image 会展示一张大而醒目的预览图,而 summary 则是为没有强视觉图片可展示的卡片准备的较小缩略图。

我的内容会被发送到别处吗?

不会。你输入的每一个字段以及生成的代码片段本身,都完全保留在你的浏览器中——任何时候都不会上传到服务器。

如果我只填写了部分字段会怎样?

代码片段依然会干净、有效地生成——任何你留空的字段(图片、Twitter 用户名、主题色等)都会直接从输出中省略,而不会产生空的或格式错误的标签。你可以根据页面实际情况填写多少就填多少。

除了普通网站,我还能把它用于文章或产品页面之类的内容吗?

可以——内容类型选择器涵盖了 website、article、product 和 profile,用于设置 og:type 的值,平台在解析页面时会将其作为分类提示(Facebook 和 LinkedIn 的爬虫会读取它;它并不属于 Twitter Card 规范本身,Twitter Card 依赖的是自己独立的 twitter:card 标签)。选择真正符合你页面内容的类型,是一个虽小但真实的信号,用来表明这是哪一类内容。

我是不是仍然需要单独添加结构化数据 / schema 标记?

如果你需要的话,是的——本工具覆盖的是 meta 标签、Open Graph 和 Twitter Card 标签,而 JSON-LD 结构化数据是 Google 用于富结果、知识面板等功能的另一套独立机制,Open Graph 标签并不能提供这些。本站的 Schema 标记生成器和 AI 结构化数据生成器工具专门覆盖这一部分;一个页面通常会在 '<head>' 中同时包含这段代码片段和一段 JSON-LD 脚本,两者各司其职。

og:locale 到底是做什么用的?

它告诉平台页面内容所使用的语言和地区——比如 en_US 或 zh_CN 这样的代码——Facebook 尤其会用它来决定在分享链接周围显示哪种本地化的界面文字(比如"查看更多"按钮所用的语言)。本工具默认设置为 en_US;如果你的页面确实使用其他语言,请修改它,并让它与页面实际内容的语言保持一致,以获得最准确的效果。

我应该复用页面真实的标题和描述,还是专门为社交分享另写一套文案?

对大多数页面来说,两者复用同一段写得好的标题和描述会更简单,也更容易保持一致——只维护一个信息来源,而不是让两段文案随时间逐渐脱节。有些网站确实会刻意为社交分享单独撰写更抓眼球或更轻松随意的文案,这也是一种合理的选择——本工具默认采用更简单的共用字段方式,但你完全可以在生成结果之后单独修改 Open Graph 相关的那几行,让两者有所区别。

如果我的标题或图片以后发生变化,我可以回来重新生成代码片段吗?

可以——上一次访问的内容不会被保存,因此不存在需要处理的过期状态。只需在页面标题、描述或图片发生变化时,重新填写表单并复制新生成的代码片段即可。

相关工具