OpenGraph 与 Twitter Card 元数据
添加 og: 和 twitter: 元标签，为社交媒体链接提供丰富的预览。
OpenGraph 与 Twitter Card 元数据 是 CoddyKit 上的免费 Sveltejs Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Sveltejs Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Sveltejs Academy 课程共包含 4 节课。
为什么使用 OG 标签
开放图谱元数据可以让社交平台（Facebook、LinkedIn、Slack）在分享链接时显示丰富的预览。
必需的 OG 标签
og:title、og:description、og:image 和 og:url 最为重要。
<svelte:head>
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={imageUrl} />
<meta property="og:url" content={url} />
</svelte:head>图片尺寸
1200x630 是推荐的 OG 图片尺寸，能在各个平台上获得最佳显示效果。
Twitter 卡片
Twitter 支持 OG 标签，但也有自己的 twitter: 元数据，可提供更多控制选项。
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />卡片类型
Twitter 支持摘要卡片、大图摘要卡片、应用卡片和播放器卡片。
验证
使用 Facebook 分享调试器和 Twitter 卡片验证器预览您的标签。
绝对 URL
OG 图片 URL 必须是绝对 URL；相对路径会失败。
按页面定制
可以为文章、产品或个人资料分别设置 OG 标签，以提供符合上下文的预览。
避免重复默认值
在根布局中提供全站默认值，再按页面进行覆盖。
缓存
社交平台会缓存 OG 数据。请使用它们的调试器刷新缓存。
实际影响
丰富的预览可以显著提高社交分享的点击率。
快速检查
为什么 OG 图片 URL 必须是绝对 URL？
回顾
在 <svelte:head> 中添加 OG 和 Twitter 元数据，并使用绝对图片 URL 来创建丰富的社交预览。
常见问题解答
「OpenGraph 与 Twitter Card 元数据」课时是免费的吗？
是的 — 「OpenGraph 与 Twitter Card 元数据」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Sveltejs Academy 课程的其余内容，请升级到 CoddyKit PRO。 Sveltejs Academy 课程共包含 4 节课。
「OpenGraph 与 Twitter Card 元数据」这节课中我会学到什么？
添加 og: 和 twitter: 元标签，为社交媒体链接提供丰富的预览。 你通过在浏览器中直接运行的动手代码来练习 Sveltejs Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Sveltejs Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Sveltejs Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「OpenGraph 与 Twitter Card 元数据」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Sveltejs Academy 课中编写并运行代码吗？
能。每节 Sveltejs Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 使用 svelte:head 添加动态元标签
- OpenGraph 与 Twitter Card 元数据
- SvelteKit 中的 JSON-LD 结构化数据
- 规范 URL 与网站地图生成