Open Graph 与社交媒体
Open Graph（OG）协议让网页在社交媒体平台（如微信、微博、Facebook、Twitter）上分享时能显示丰富的预览信息，包括标题、描述、图片等。良好的 OG 配置能显著提高分享的点击率。本节将详细介绍 og:title、og:description、og:image 等核心属性，以及 Twitter Cards 的配置方法。
前置知识
阅读本节前，建议先了解：meta 标签 SEO 配置
Open Graph 概述
Open Graph 是 Facebook 于 2010 年发布的协议，现已成为社交媒体分享预览的事实标准。通过在 HTML <head> 中添加 og: 前缀的 meta 属性，控制链接分享时的预览卡片。
核心 OG 属性
基本属性
html
<head>
<!-- 页面标题（分享时显示的标题） -->
<meta property="og:title" content="HTML5 教程 - 完整中文学习指南" />
<!-- 页面描述（分享时显示的摘要） -->
<meta property="og:description" content="全面的 HTML5 教程，从基础到高级。" />
<!-- 页面 URL（规范链接） -->
<meta property="og:url" content="https://example.com/html5-tutorial" />
<!-- 分享图片（最重要的视觉元素） -->
<meta property="og:image" content="https://example.com/images/og-image.jpg" />
<!-- 页面类型 -->
<meta property="og:type" content="article" />
<!-- 网站名称 -->
<meta property="og:site_name" content="前端学院" />
</head>属性说明
| 属性 | 说明 | 示例 |
|---|---|---|
og:title | 分享标题 | 与 <title> 类似但可不同 |
og:description | 分享描述 | 1-2 句话的页面摘要 |
og:image | 分享图片 | 推荐尺寸 1200x630px |
og:url | 页面 URL | 页面的规范 URL |
og:type | 页面类型 | website、article、product 等 |
og:site_name | 网站名称 | 品牌或网站名 |
og:locale | 语言地区 | zh_CN、en_US |
og:width | 图片宽度 | og:image 的宽度 |
og:height | 图片高度 | og:image 的高度 |
og:type 页面类型
| 类型 | 说明 | 额外属性 |
|---|---|---|
website | 网站 | 无 |
article | 文章 | article:published_time、article:author、article:tag |
product | 产品 | product:price:amount、product:price:currency |
profile | 个人主页 | profile:first_name、profile:last_name |
video.other | 视频 | video |
music.song | 音乐 | music |
book | 书籍 | book |
文章类型配置
html
<!-- 文章类型的 OG 配置 -->
<meta property="og:type" content="article" />
<meta property="og:title" content="2024年前端性能优化完全指南" />
<meta property="og:description" content="深入分析前端性能优化的核心策略..." />
<meta property="og:url" content="https://example.com/blog/performance-optimization-2024" />
<meta property="og:image" content="https://example.com/images/perf-og.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:locale" content="zh_CN" />
<!-- 文章特有属性 -->
<meta property="article:published_time" content="2024-01-15T10:00:00+08:00" />
<meta property="article:modified_time" content="2024-01-20T15:30:00+08:00" />
<meta property="article:author" content="https://example.com/authors/zhangsan" />
<meta property="article:section" content="前端开发" />
<meta property="article:tag" content="性能优化" />
<meta property="article:tag" content="前端" />
<meta property="article:tag" content="Web开发" />Twitter Cards
Twitter 有自己的分享预览格式（Twitter Cards），独立于 Open Graph：
html
<!-- Twitter Card 类型 -->
<meta name="twitter:card" content="summary_large_image" />
<!-- 标题（如果未设置，使用 og:title） -->
<meta name="twitter:title" content="HTML5 教程 - 完整中文学习指南" />
<!-- 描述 -->
<meta name="twitter:description" content="全面的 HTML5 中文教程" />
<!-- 图片 -->
<meta name="twitter:image" content="https://example.com/images/twitter-card.jpg" />
<!-- Twitter 用户名 -->
<meta name="twitter:creator" content="@zhangsan" />
<meta name="twitter:site" content="@frontend_academy" />Twitter Card 类型
| 类型 | 说明 | 图片尺寸 |
|---|---|---|
summary | 小型卡片，图片在左侧 | 120x120px |
summary_large_image | 大图卡片 | 1200x630px |
app | 应用下载卡片 | N/A |
player | 视频/音频播放器 | N/A |
微信分享优化
微信使用 Open Graph 标签获取分享信息：
html
<head>
<!-- 微信分享使用 og 标签 -->
<meta property="og:title" content="文章标题" />
<meta property="og:description" content="文章描述" />
<meta property="og:image" content="https://example.com/images/wechat-share.jpg" />
<meta property="og:url" content="https://example.com/article" />
</head>微信分享图片要求
| 要求 | 说明 |
|---|---|
| 推荐尺寸 | 900x500px 或更大 |
| 格式 | JPG、PNG |
| 大小 | 不超过 300KB |
| 比例 | 约 16:9 |
OG 图片最佳实践
图片规范
| 平台 | 推荐尺寸 | 最小尺寸 |
|---|---|---|
| 1200x630px | 200x200px | |
| Twitter（大图） | 1200x630px | 300x157px |
| 1200x627px | 200x200px | |
| 微信 | 900x500px | 300x300px |
图片设计建议
html
<!-- OG 图片最佳配置 -->
<meta property="og:image" content="https://example.com/images/og-1200x630.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="HTML5 教程封面图" />
<!-- 提供多种尺寸 -->
<meta property="og:image" content="https://example.com/images/og-1200x630.jpg" />
<meta property="og:image:secure_url" content="https://example.com/images/og-1200x630.jpg" />完整配置示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO meta -->
<title>2024年前端性能优化完全指南 | 技术博客</title>
<meta name="description" content="深入分析前端性能优化的核心策略和最佳实践。">
<!-- Open Graph -->
<meta property="og:type" content="article" />
<meta property="og:title" content="2024年前端性能优化完全指南" />
<meta property="og:description" content="深入分析前端性能优化的核心策略和最佳实践。" />
<meta property="og:url" content="https://example.com/blog/performance-2024" />
<meta property="og:image" content="https://example.com/images/og/performance-2024.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="技术博客" />
<meta property="og:locale" content="zh_CN" />
<meta property="og:locale:alternate" content="en_US" />
<!-- 文章属性 -->
<meta property="article:published_time" content="2024-01-15T10:00:00+08:00" />
<meta property="article:author" content="张三" />
<meta property="article:tag" content="前端" />
<meta property="article:tag" content="性能优化" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@tech_blog" />
<meta name="twitter:title" content="2024年前端性能优化完全指南" />
<meta name="twitter:description" content="深入分析前端性能优化的核心策略和最佳实践。" />
<meta name="twitter:image" content="https://example.com/images/og/performance-2024.jpg" />
</head>
<body>...</body>
</html>验证和调试
Facebook Sharing Debugger
访问 developers.facebook.com/tools/debug/ 输入 URL 检查 OG 配置。
Twitter Card Validator
访问 cards-dev.twitter.com/validator 输入 URL 检查 Twitter Card。
微信分享调试
使用微信开发者工具或清除缓存后重新分享测试。
注意事项
- og:image 必须可公开访问：私有图片无法被抓取
- 使用 HTTPS：图片 URL 使用 HTTPS 协议
- 清除缓存：修改 OG 标签后需要清除平台缓存
- 图片要醒目：分享图片直接影响点击率
- title 和 description 要简洁：社交媒体卡片空间有限
最佳实践
- 每个页面配置完整的 OG 属性
- og:image 使用 1200x630px 的高质量图片
- 同时配置 Open Graph 和 Twitter Cards
- 提供多语言版本的 og:locale
- 为文章配置 article 相关属性
- 使用平台调试工具验证分享效果
- og:title 和 og:description 要有吸引力
下一节
继续学习：结构化数据（JSON-LD）