首页 / 技术分享 / 前端开发 /
什么是 Open Graph (OG)?

什么是 Open Graph (OG)?

DeepSeek

2026-01-19
24 次浏览
0 条评论

OG 是 Open Graph（开放图谱）的缩写，这是 Facebook 在 2010 年推出的一个协议。

前端开发
OG
社交分享
分享:

核心概念

OG 是一套元数据协议，让任何网页都能成为社交图谱中的富媒体对象。简单说，它告诉社交平台（Facebook、Twitter、LinkedIn等）如何更好地展示你的网页链接。

为什么叫 "OG"？

  • Open：开放协议，任何网站都可以使用
  • Graph：社交图谱（Social Graph），表示人与人、人与内容的关系网络

🔍 主要 OG 标签及其作用

<!-- 基本OG标签 -->
<meta property="og:title" content="页面标题 - 网站名称" />
<meta property="og:description" content="页面描述，约1-2句话" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page.html" />
<meta property="og:type" content="website" /> <!-- 或 article, product 等 -->
<meta property="og:site_name" content="网站名称" />

<!-- 更丰富的OG标签 -->
<meta property="og:locale" content="zh_CN" />
<meta property="og:video" content="https://example.com/video.mp4" />
<meta property="og:audio" content="https://example.com/audio.mp3" />

<!-- 针对特定平台 -->
<meta property="fb:app_id" content="你的Facebook应用ID" />
<meta property="fb:pages" content="你的Facebook页面ID" />

🎯 OG 标签的重要性

1. 控制社交分享预览

<!-- 没有OG标签时： -->
✅ 平台随机抓取标题
❌ 可能抓取到不相关的图片
❌ 描述可能被截断或不准确

<!-- 有OG标签时： -->
✅ 你指定的标题
✅ 你指定的高质量图片
✅ 你精心编写的描述
✅ 一致的品牌体验

2. 支持的平台

几乎所有主流社交平台都支持 OG：

  • ✅ Facebook
  • ✅ LinkedIn
  • ✅ Twitter（同时需要Twitter Card）
  • ✅ WhatsApp
  • ✅ Telegram
  • ✅ Slack
  • ✅ Discord
  • ✅ 微信（部分支持）

🆚 OG vs 传统 Meta 标签

特性 传统 Meta 标签 Open Graph 标签
属性名 name property
语法 <meta name="description"> <meta property="og:description">
用途 SEO、浏览器 社交分享、富媒体预览
优先级 社交平台优先使用OG 高于传统meta标签

最佳实践：同时使用两者

<!-- 传统SEO标签 -->
<meta name="title" content="页面标题">
<meta name="description" content="页面描述">

<!-- Open Graph标签 -->
<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">

🛠️ 完整实现示例

基础模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 传统SEO标签 -->
    <title>页面标题 - 网站名</title>
    <meta name="description" content="页面描述，用于搜索引擎">
    <meta name="keywords" content="关键词1, 关键词2">

    <!-- Open Graph 基础标签 -->
    <meta property="og:title" content="页面标题 - 网站名">
    <meta property="og:description" content="吸引人的社交分享描述">
    <meta property="og:image" content="https://example.com/social-share.jpg">
    <meta property="og:url" content="https://example.com/page.html">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="网站名">
    <meta property="og:locale" content="zh_CN">

    <!-- Facebook 特定 -->
    <meta property="fb:app_id" content="1234567890">

    <!-- Twitter Card (补充OG) -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@username">
    <meta name="twitter:title" content="页面标题">
    <meta name="twitter:description" content="Twitter专用描述">
    <meta name="twitter:image" content="https://example.com/twitter-image.jpg">

    <!-- 结构化数据（JSON-LD） -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebPage",
        "headline": "页面标题",
        "description": "页面描述",
        "image": "https://example.com/image.jpg",
        "url": "https://example.com/page.html"
    }
    </script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

PHP 动态生成 OG 标签

<?php
class OpenGraphGenerator {

    public static function generateTags($pageData) {
        $defaults = [
            'title' => '默认标题',
            'description' => '默认描述',
            'image' => '/images/default-social.jpg',
            'url' => self::getCurrentUrl(),
            'type' => 'website',
            'site_name' => '我的网站',
            'locale' => 'zh_CN'
        ];

        $data = array_merge($defaults, $pageData);

        // 确保URL完整
        if (!preg_match('/^https?:\/\//', $data['image'])) {
            $data['image'] = self::getFullUrl($data['image']);
        }

        $tags = [
            // 传统meta
            '<title>' . htmlspecialchars($data['title']) . '</title>',
            '<meta name="description" content="' . htmlspecialchars($data['description']) . '">',

            // Open Graph
            '<meta property="og:title" content="' . htmlspecialchars($data['title']) . '">',
            '<meta property="og:description" content="' . htmlspecialchars($data['description']) . '">',
            '<meta property="og:image" content="' . htmlspecialchars($data['image']) . '">',
            '<meta property="og:url" content="' . htmlspecialchars($data['url']) . '">',
            '<meta property="og:type" content="' . htmlspecialchars($data['type']) . '">',
            '<meta property="og:site_name" content="' . htmlspecialchars($data['site_name']) . '">',
            '<meta property="og:locale" content="' . htmlspecialchars($data['locale']) . '">',

            // Twitter Card
            '<meta name="twitter:card" content="summary_large_image">',
            '<meta name="twitter:title" content="' . htmlspecialchars($data['title']) . '">',
            '<meta name="twitter:description" content="' . htmlspecialchars($data['description']) . '">',
            '<meta name="twitter:image" content="' . htmlspecialchars($data['image']) . '">',
        ];

        return implode("\n    ", $tags);
    }

    private static function getCurrentUrl() {
        $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') 
            ? 'https://' 
            : 'http://';
        return $protocol . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
    }

    private static function getFullUrl($path) {
        $baseUrl = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off')
            ? 'https://' . $_SERVER['HTTP_HOST']
            : 'http://' . $_SERVER['HTTP_HOST'];
        return $baseUrl . $path;
    }
}

// 使用示例
$pageData = [
    'title' => '文章标题 - 我的博客',
    'description' => '这是一篇关于Open Graph协议的文章，帮助你更好地理解社交分享优化。',
    'image' => '/images/article-social-share.jpg',
    'type' => 'article',
];

echo OpenGraphGenerator::generateTags($pageData);
?>

📱 针对不同内容类型的 OG 配置

文章/博客

<meta property="og:type" content="article">
<meta property="article:published_time" content="2024-01-15T09:00:00+08:00">
<meta property="article:modified_time" content="2024-01-16T10:30:00+08:00">
<meta property="article:author" content="作者名">
<meta property="article:section" content="技术">
<meta property="article:tag" content="SEO, 社交分享">

产品页面

<meta property="og:type" content="product">
<meta property="product:price:amount" content="99.99">
<meta property="product:price:currency" content="CNY">
<meta property="product:availability" content="in stock">
<meta property="product:brand" content="品牌名">

视频页面

<meta property="og:type" content="video.movie">
<meta property="og:video" content="https://example.com/video.mp4">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="1280">
<meta property="og:video:height" content="720">
<meta property="og:video:duration" content="120"> <!-- 秒 -->

🔧 调试和验证工具

1. Facebook 分享调试器

https://developers.facebook.com/tools/debug/
  • 输入URL检查OG标签
  • 清除Facebook缓存
  • 预览分享效果

2. Twitter Card 验证器

https://cards-dev.twitter.com/validator

3. LinkedIn 帖子检查器

https://www.linkedin.com/post-inspector/

4. 通用OG检查工具

# 使用命令行检查
curl -s https://example.com | grep -i "og:"

# 使用Python脚本
import requests
from bs4 import BeautifulSoup

url = "https://example.com"
response = requests.get(url)
soup = BeautifulSoup(response.text, 'html.parser')
og_tags = soup.find_all('meta', property=lambda x: x and x.startswith('og:'))

📊 OG 图片最佳实践

平台 推荐尺寸 格式 最大文件大小
Facebook 1200×630px JPG, PNG 8MB
Twitter 1200×600px JPG, PNG, GIF 5MB
LinkedIn 1200×627px JPG, PNG 5MB
通用 1200×630px JPG 5MB

重要提示：

<!-- 避免的常见错误 -->
❌ <meta property="og:image" content="/relative/path.jpg">
✅ <meta property="og:image" content="https://example.com/absolute/path.jpg">

❌ 图片太大（加载慢）
✅ 压缩到 < 300KB

❌ 纯文字图片
✅ 包含品牌标识和关键信息

🚀 快速检查清单

  • [ ] og:title - 不超过60字符
  • [ ] og:description - 不超过200字符
  • [ ] og:image - 绝对URL，推荐1200×630px
  • [ ] og:url - 规范URL，无参数混乱
  • [ ] og:type - 正确的内容类型
  • [ ] og:site_name - 品牌名称
  • [ ] twitter:card - Twitter特定优化
  • [ ] 测试所有目标平台

💡 总结

OG（Open Graph） 是社交分享的"名片"，它：

  1. 控制 你的链接在社交平台上的展示方式
  2. 提升 点击率和品牌一致性
  3. 必须 为每个页面单独优化
  4. 补充 传统SEO标签，不替代它们

记住：好的OG标签就像产品的包装，第一印象决定用户是否点击！

上一篇

RemoteJS：让前端调试跨越边界，触手可及

下一篇

WebRTC 如何让网页实现端到端的通信

评论区 (0)

你需要先 登录 后才能发表评论。
还没有人评论，赶快成为第一个吧。