标准答案
- Open Graph 是一组社交分享元信息，常见字段有 og:title、og:description、og:image、og:url 和 og:type。
- Twitter Card 用于控制 X/Twitter 等平台的卡片展示，常见字段有 twitter:card、twitter:title、twitter:description、twitter:image。
- 它们不替代页面 title 和 meta description，而是补充分享场景的展示控制。
- 分享图最好使用绝对 URL、稳定尺寸和可公开访问的图片。
- 内容页、工具页、产品页和文章页都应该按页面内容生成对应的分享元信息。
题目解析
这题关注的是链接被分享后的预览体验。没有这些元信息时，平台可能随意抓标题、正文和图片。
OG 图片是用户第一眼看到的视觉入口，不能用不可访问或过小的图片。
代码示例
OG 和 Twitter Card 通常同时配置。
HTML
<meta property="og:title" content="前端面试题" />
<meta property="og:description" content="HTML、CSS、JavaScript、Vue、React 面试题整理。" />
<meta property="og:image" content="https://example.com/og/interview.png" />
<meta name="twitter:card" content="summary_large_image" />常见误区
- 只写普通 meta description，忽略社交分享卡片。
- og:image 使用相对路径或需要登录才能访问的图片。
- 所有页面共用同一张分享图和同一段描述。