OpenGraph：og:title、og:description、og:image
控制页面分享到社交网络时的显示方式
OpenGraph：og:title、og:description、og:image 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
什么是 OpenGraph
OpenGraph 是 Facebook 推出的元数据协议，使任何页面都能描述其在社交平台分享时应呈现的样式。标签位于 <head> 中，以 <meta property="og:..." content="..."> 成对出现，并由所有主要社交网络抓取。
核心标签
实际使用中必需的四个标签是 og:title、og:description、og:image 和 og:url。缺少其中任何一个，都可能生成不美观的分享卡片，甚至完全没有预览的卡片，而用户通常会跳过这类卡片。
<meta property="og:title" content="Learn HTML">
<meta property="og:description" content="From DOCTYPE to Web Components.">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:url" content="https://example.com/learn">og:title
分享卡片上的标题。请将其控制在约 60 个字符以内，使其能显示在一行中，不被社交网络截断。请让它与页面的 <title> 保持一致，但也可以针对点击率进行优化。
og:description
显示在标题下方的一到两句摘要。目标长度为 120—160 个字符：足够吸引读者，同时又足够短，能在每个平台上完整显示。请避免标题党；诚实的描述能带来更多长期互动。
og:image
主图。请使用 1200x630 像素的 JPG 或 PNG（小于约 5 MB）。始终使用绝对 URL——相对 URL 会失效，因为抓取器无法理解“当前页面”是什么。请提供 og:image:width 和 og:image:height，以便在生成预览时跳过额外请求。
og:url
页面的规范 URL。即使页面已经有 <link rel="canonical">，也请设置它——有些抓取器更偏好 OG 标签。请移除跟踪参数，避免分享的 URL 在社交平台数据库中分裂成许多“不同”的页面。
og:type
告诉平台这是什么类型的内容：“website”、“article”、“product”、“video.movie”、“book”等。对于博客文章，Article 是最常见的选择，并且会解锁 article:published_time 和 article:author 等附加标签。
og:locale
内容的 BCP-47 区域设置（例如“en_US”、“tr_TR”）。结合 og:locale:alternate 后，它会告诉网络该页面还提供哪些其他语言版本，Facebook 就是据此决定是否翻译预览的。
og:site_name
发布网站的显示名称。有些网络会将其作为卡片上的副标题。请在每个页面中保持名称简短且一致，使品牌无论分享的是哪篇文章，呈现方式都相同。
测试卡片
请使用 Facebook 的 Sharing Debugger 和 LinkedIn 的 Post Inspector，按照抓取器所见的方式获取页面，查看解析出的标签，并刷新缓存的预览。部署新的 og:image 后必须重新抓取，否则用户可能数天内仍会看到旧图片。
常见问题
服务器渲染的标签是必需的——大多数抓取器不会执行 JavaScript，因此客户端由 React 注入的 OG 标签对它们不可见。请在初始 HTML 中渲染这些标签，最好使用 SSR 或 SSG，否则分享卡片会一直保持通用样式。
知识检查
为什么 og:image 必须使用绝对 URL，而不能使用相对路径？
总结
OpenGraph 标签（og:title、og:description、带绝对 URL 的 og:image、og:url、og:type、og:locale、og:site_name）控制每个页面分享时的呈现方式。请在服务器端渲染这些标签，将标题控制在 60 个字符以内、描述控制在约 150 个字符，并使用 1200x630 的图片，在发布前使用 Facebook Sharing Debugger 进行测试。
常见问题解答
「OpenGraph：og:title、og:description、og:image」课时是免费的吗？
是的 — 「OpenGraph：og:title、og:description、og:image」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「OpenGraph：og:title、og:description、og:image」这节课中我会学到什么？
控制页面分享到社交网络时的显示方式 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「OpenGraph：og:title、og:description、og:image」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- OpenGraph：og:title、og:description、og:image
- Twitter Card 元标签
- JSON-LD 结构化数据基础
- 面向国际化页面的 hreflang