博客文章（article）
把 **og:type** 设为 article，在文章专属区域填写 **作者** 和 **发布时间**，再使用一张 1200×630 的封面图。预览会随之更新，显示卡片在每个平台上的样子。
og:type=article 会启用文章专属标签（article:published_time、article:author），部分平台（Discord、LinkedIn）会用它们来显示作者信息。Twitter 会忽略这些标签，但也不会报错。
Open Graph 预览
编写 Open Graph 和 Twitter Card 标签，实时预览社交分享效果。
最后更新
准备好真正学会编程了吗？
Coddy 让你在浏览器里编写真实代码来学习：互动课程、即时反馈，卡住时还有 AI 帮忙。
Open Graph 预览生成器是什么？
在任何现代应用里分享链接时，无论是发帖、私信还是 Slack 频道，平台都会抓取这个 URL，提取一小段元数据来渲染一张分享卡片：标题、描述、图片和网站名称。这些元数据并不是从页面的可见内容里提取的，而是来自 <head> 中一组特定的 <meta> 标签。其中大部分由 Facebook 在 2010 年推出的 Open Graph 协议定义。X（原 Twitter）又增加了几个带 twitter: 前缀的标签。LinkedIn、Discord、Slack、iMessage、WhatsApp 和 Pinterest 都读取同一套标签，只是略有差异。
每个页面只需把这些标签设置好一次，但影响却很大。没有 Open Graph 图片的页面，分享出去看起来就像坏了一样。标题太长会在词中间被截断。og:image 的宽高比不对，每个平台都会给它加上黑边。这个工具让你在实时预览中调整这些值，在页面上线之前就能发现截断和裁剪问题。
一切都在本地运行。表单内容、预览和生成的 HTML 都不会离开你的浏览器，粘贴尚未发布的 URL 和文案也不用担心泄露。
使用过程中你会学到什么
- Open Graph 标签使用
property属性（<meta property="og:title">），而标准 SEO 标签和 Twitter Card 标签使用name（<meta name="description">、<meta name="twitter:card">）。 - 如果分享带来的流量很重要，标题和描述应该在三个地方设置：标准 SEO（
title、meta description）、Open Graph（og:title、og:description）和 Twitter（twitter:title、twitter:description）。 og:image应为 1200×630，通过 HTTPS 提供，并使用绝对 URL；其他服务器抓取页面时，相对路径会失效。- X 的
twitter:card值决定卡片布局：summary是小的方形缩略图，summary_large_image是大多数品牌想要的全宽横幅。
如何一步步编写 Open Graph 标签
写一个简短有力的标题
控制在 50-60 个字符左右。Facebook 大约在 95 个字符处截断，X 大约在 70 个字符处截断。先说价值，再说品牌：“How to deploy with Cloudflare Workers”比“Coddy Blog · Deployment Guide”效果更好。
写一句话的描述
控制在 120-155 个字符左右。大多数平台在 200 个字符左右截断。请使用完整的句子：每张卡片都会在标题下方显示描述，被截断的半句话看起来像没写完。
设置规范 URL
使用页面本身的 https:// 绝对 URL，不要用跟踪链接或跳转链接。Open Graph 爬虫在合并重复分享时会依据
og:url，规范 URL 能让分享计数和预览保持一致。提供图片的绝对 URL
1200×630 是 X 上
summary_large_image卡片以及 Facebook 和 LinkedIn 标准卡片的最佳尺寸。使用 PNG 或 JPEG，大小在 5 MB 左右以内。一定要用绝对 URL，因为社交平台的爬虫是从它自己的服务器访问这个 URL 的，相对路径会失效。复制生成的标签
把 **生成的
<head>标签** 面板里的代码块粘贴到你页面的<head>中。部署之后，用各平台的调试工具（Facebook Sharing Debugger、X Card Validator、LinkedIn Post Inspector）验证；如果之后更换了图片，记得强制重新抓取。
Open Graph 和 Twitter Card 标签参考
下面的标签涵盖了如今社交平台会读取的全部内容。标有 property= 的标签属于 Open Graph 协议；标有 name= 的是标准 SEO 或 Twitter Card 版本。参考规范：Open Graph、X Cards。
| 标签 | 使用平台 | 建议值 | 说明 |
|---|---|---|---|
og:title | FB, LinkedIn, Slack, Discord | 50-60 个字符 | 缺失时回退到 <title>，但还是建议设置。 |
og:description | FB, LinkedIn, Slack, Discord | 120-155 个字符 | 缺失时回退到 meta description。 |
og:image | 所有平台 | 1200×630，< 5 MB，HTTPS，绝对 URL | 必须是绝对 URL，相对路径会失效。 |
og:image:alt | 无障碍访问 | 描述图片内容 | 供屏幕阅读器和部分平台使用。 |
og:url | FB, LinkedIn | 规范的 https:// URL | 用于合并不同查询字符串版本的重复分享。 |
og:type | FB, LinkedIn | website 或 article | article 可以启用 article:published_time、article:author。 |
og:site_name | FB, Discord | 品牌名称 | 显示为卡片上方或下方的小字署名。 |
twitter:card | X | summary_large_image | summary 是小的方形缩略图，summary_large_image 是横幅布局。 |
twitter:title | X | 与 og:title 相同 | 缺失时 X 会回退到 og:title，保险起见两个都设置。 |
twitter:description | X | 与 og:description 相同 | 缺失时回退到 og:description。 |
twitter:image | X | 与 og:image 相同 | 缺失时回退到 og:image。 |
twitter:site | X | @yourbrand | 发布者的 X 账号，部分统计分析会用到它。 |
可以试试的 Open Graph 写法
产品页或落地页
**og:type** 保持为 website。用产品名作为标题，用一句话的核心卖点作为描述，用主视觉图或截图的裁剪作为图片。
落地页不需要文章元数据。在分享出去的落地页卡片上，点击最多的元素通常是图片，所以值得花心思做一张干净的 1200×630 图片。
文档页面
标题："Concept - Section · Docs"。描述：用一句话解释这个概念。图片：通用的文档封面，或相关界面的截图。
文档页面经常在 Slack 频道和 X 话题串里被分享。统一的文档封面图，能让它们在繁忙的信息流中被一眼认出来，甚至在读到标题之前。
Open Graph 的常见错误
og:image使用了像/images/cover.png这样的相对 URL。社交平台的爬虫是从它们自己的服务器访问你的页面的，相对路径会指向社交平台自己的域名，结果就是 404。一定要使用https://开头的绝对 URL。- 忘了设置
twitter:card。没有它，X 会默认显示一张没有图片的极简卡片。加上twitter:card=summary_large_image，才能得到几乎每个品牌都想要的横幅布局。 - 省略
og:image:alt标签。它不费任何成本，能帮助屏幕阅读器用户，还有几个平台会把它作为渲染出的卡片上的替代文本。 - 让 Facebook 缓存了旧图片，然后抱怨预览一直不更新。每次修改
og:image后，都要通过 Facebook Sharing Debugger 重新抓取。 - 动态生成的分享图片需要 10 秒以上才能渲染出来。社交平台的爬虫很快就会超时，如果你的图片是实时生成的，请预先生成或做好缓存。
Open Graph 预览常见问题
Open Graph 是什么？
Open Graph 是 Facebook 在 2010 年发布的一种协议，让网页可以用一小组
<meta> 标签来描述自己，比如标题、描述、图片、类型等。如今所有主流社交和聊天平台都会读取它，因此它成了分享卡片元数据的事实标准。Twitter Card 和 Open Graph，两个都需要吗？
两个都加上。X（Twitter）在缺少
twitter: 专属标签时会回退到对应的 og: 标签，所以严格来说只用 Open Graph 也能凑合。但加上 twitter:card、twitter:site 和 twitter:creator，你就能更精细地控制卡片在 X 上的显示效果。og:image 应该用多大尺寸？
1200×630 像素（1.91:1 的比例）是最稳妥的尺寸。Facebook、LinkedIn 和 X 都能很好地显示这个比例。文件大小控制在 5 MB 左右以内，并通过 HTTPS 以绝对 URL 提供；其他服务器抓取你的页面时，相对路径会失效。
为什么我的预览在 Facebook 上不更新？
Facebook 会积极缓存分享卡片。修改 meta 标签后，把 URL 粘贴到 Facebook Sharing Debugger 中，点击“Scrape Again”。同样的方法也适用于 X 的 Card Validator 和 LinkedIn 的 Post Inspector。
Google 会用 Open Graph 标签吗？
在排名上不会。Google 自己的爬虫读取的是页面内容以及你的
<title> 和 meta description。Google 偶尔会在图片搜索和 Discover 中使用 og:image，但它不是排名信号。能自动为每个页面生成不同的图片吗？
可以，大多数框架都支持动态 Open Graph 图片。Next.js 有 OG Image Generation API，SvelteKit 和 Astro 也有类似的做法。在请求时渲染图片，并做好缓存，因为社交平台的爬虫很快就会超时。
