跳转到主内容

什么是开放图谱(Open Graph)?

image

定义​

开放图谱协议(Open Graph Protocol)是Facebook在2010年开发的元数据协议,用于控制网页在社交媒体上分享时的显示方式。简单来说,它是HTML元标签,预先定义了在Facebook、KakaoTalk、LinkedIn等平台上分享博客链接时显示的标题、描述和图片。

使用开放图谱,您可以将网页转换为社交媒体的"对象(Object)"。例如,当您分享博客文章时,不仅仅显示URL,还会显示吸引人的缩略图以及标题和摘要描述,以精美的卡片格式呈现。这大大提高了点击率,已成为社交媒体营销的核心要素。

开放图谱在<head>部分使用<meta property="og:xxx">格式的标签实现。虽然始于Facebook,但现在已被包括Twitter(X)、LinkedIn、Slack、KakaoTalk和Line在内的大多数社交平台采用为标准。如果没有开放图谱,社交平台会随意提取页面内容,可能显示意外的图片或文本。

特点​

  • 社交媒体优化: 精确控制分享链接时的标题、描述和图片,显著提高点击率。研究表明,带有开放图谱图片的链接可获得高达200%的互动率。
  • 标准协议: 由Facebook开发,但现在是几乎所有社交平台支持的事实行业标准。设置一次即可在多个平台上使用。
  • 简单实现: 技术上不复杂,只需在HTML <head>部分添加元标签。任何人都可以轻松应用,无需编程知识。
  • 提供调试工具: Facebook、LinkedIn等提供官方调试工具来测试和预览开放图谱标签。
  • 对搜索引擎有用: 开放图谱信息也被搜索引擎引用,间接有助于SEO。特别对图片搜索优化有效。

使用方法​

以下是有效利用开放图谱的方法。

步骤1: 添加必需的开放图谱标签 在网页的<head>部分添加基本的开放图谱标签。至少必须包含四个标签:og:title、og:type、og:url和og:image。这是开放图谱的四个核心要素。

<head>
  <meta property="og:title" content="博客SEO优化完整指南">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://zero-coke.com/blog/seo-guide">
  <meta property="og:image" content="https://zero-coke.com/images/seo-thumbnail.jpg">
</head>

步骤2: 添加可选标签 添加描述、网站名称、语言等信息以提供更丰富的信息。og:description特别重要,应包含鼓励点击的有吸引力的文字。

<meta property="og:description" content="即使初学者也能轻松跟随的博客SEO优化方法分步指南。">
<meta property="og:site_name" content="Zero-Coke博客">
<meta property="og:locale" content="zh_CN">

步骤3: 图片优化 开放图谱中最重要的元素是图片。缩略图决定第一印象,因此要仔细选择。Facebook推荐1200x630px,最小600x314px。文件大小保持在8MB以下。

<meta property="og:image" content="https://zero-coke.com/images/thumbnail.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="SEO优化指南缩略图">

步骤4: 内容类型特定的附加标签 对于博客文章(article),可以提供作者、发布日期、类别等附加信息。这有助于在新闻源中显示更丰富的信息。

<meta property="article:author" content="张三">
<meta property="article:published_time" content="2024-03-23T09:00:00+09:00">
<meta property="article:section" content="SEO">
<meta property="article:tag" content="博客">
<meta property="article:tag" content="SEO">

步骤5: 调试和测试 添加标签后一定要测试。在Facebook分享调试器(https://developers.facebook.com/tools/debug/)中输入URL,可以预览开放图谱的显示方式。如有错误立即修正。

步骤6: 刷新缓存 如果更改了已分享URL的开放图谱,需要刷新社交平台的缓存。在Facebook分享调试器中点击"重新抓取"按钮可更新为最新信息。各平台都提供类似的工具。

示例​

示例1: 博客文章的基本开放图谱

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>什么是反向链接? SEO初学者指南</title>

  <!-- 基本开放图谱标签 -->
  <meta property="og:title" content="什么是反向链接? SEO初学者完整指南">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://zero-coke.com/blog/what-is-backlink">
  <meta property="og:image" content="https://zero-coke.com/img/backlink-guide.jpg">
  <meta property="og:description" content="以初学者也能轻松理解的方式解释反向链接的定义、重要性和获取方法。">
  <meta property="og:site_name" content="Zero-Coke">
  <meta property="og:locale" content="zh_CN">

  <!-- 文章相关附加标签 -->
  <meta property="article:author" content="张三">
  <meta property="article:published_time" content="2024-03-23T09:00:00+09:00">
  <meta property="article:modified_time" content="2024-03-23T14:30:00+09:00">
  <meta property="article:section" content="SEO">
  <meta property="article:tag" content="反向链接">
  <meta property="article:tag" content="SEO">
  <meta property="article:tag" content="搜索引擎优化">
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

示例2: 包含图片优化的开放图谱

<head>
  <!-- 基本信息 -->
  <meta property="og:title" content="2024年数字营销趋势">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/marketing-trends-2024">

  <!-- 详细图片信息 -->
  <meta property="og:image" content="https://example.com/images/marketing-trends-main.jpg">
  <meta property="og:image:secure_url" content="https://example.com/images/marketing-trends-main.jpg">
  <meta property="og:image:type" content="image/jpeg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="2024年数字营销趋势信息图">

  <!-- 多张图片(平台选择) -->
  <meta property="og:image" content="https://example.com/images/marketing-trends-square.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="1200">

  <!-- 附加信息 -->
  <meta property="og:description" content="分析2024年值得关注的数字营销趋势,包括AI、影响者营销和短视频内容。">
  <meta property="og:site_name" content="营销洞察">
</head>

示例3: 电商产品页面

<head>
  <!-- 产品基本信息 -->
  <meta property="og:title" content="高级无线蓝牙耳机 - XYZ-2000">
  <meta property="og:type" content="product">
  <meta property="og:url" content="https://shop.example.com/products/xyz-2000">
  <meta property="og:image" content="https://shop.example.com/products/xyz-2000-main.jpg">
  <meta property="og:description" content="配备降噪功能的高品质无线耳机。最长可播放30小时。">

  <!-- 产品特定信息 -->
  <meta property="product:price:amount" content="129.00">
  <meta property="product:price:currency" content="USD">
  <meta property="product:availability" content="in stock">
  <meta property="product:condition" content="new">
  <meta property="product:brand" content="TechSound">
  <meta property="product:retailer_item_id" content="XYZ2000-BLK">

  <!-- 附加图片 -->
  <meta property="og:image" content="https://shop.example.com/products/xyz-2000-side.jpg">
  <meta property="og:image" content="https://shop.example.com/products/xyz-2000-case.jpg">
</head>

示例4: 视频内容

<head>
  <!-- 视频基本信息 -->
  <meta property="og:title" content="博客变现完整指南(2024最新)">
  <meta property="og:type" content="video.other">
  <meta property="og:url" content="https://example.com/video/blog-monetization">
  <meta property="og:image" content="https://example.com/video/thumbnails/blog-monetization.jpg">
  <meta property="og:description" content="用博客每月赚1000美元。从AdSense到联盟营销和数字产品销售的所有方法。">

  <!-- 视频特定信息 -->
  <meta property="og:video" content="https://example.com/video/blog-monetization.mp4">
  <meta property="og:video:secure_url" content="https://example.com/video/blog-monetization.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="video:duration" content="1200">
  <meta property="video:release_date" content="2024-03-23T09:00:00+09:00">

  <!-- YouTube嵌入URL -->
  <meta property="og:video" content="https://www.youtube.com/embed/abc123xyz">
  <meta property="og:video:type" content="text/html">
</head>

示例5: 网站首页

<head>
  <!-- 整体网站信息 -->
  <meta property="og:title" content="Zero-Coke - 博客SEO优化专业媒体">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://zero-coke.com">
  <meta property="og:image" content="https://zero-coke.com/images/og-homepage.jpg">
  <meta property="og:description" content="分享博客SEO、搜索引擎优化和网页开发的专业知识。从初学者到专家的实用指南。">
  <meta property="og:site_name" content="Zero-Coke">
  <meta property="og:locale" content="zh_CN">
  <meta property="og:locale:alternate" content="en_US">

  <!-- 社交媒体资料 -->
  <meta property="og:see_also" content="https://twitter.com/zerocoke">
  <meta property="og:see_also" content="https://www.facebook.com/zerocoke">
  <meta property="og:see_also" content="https://www.instagram.com/zerocoke">
</head>

优缺点​

优点​

  • 点击率大幅提升: 带有吸引人缩略图和描述的链接比纯文本链接的点击率高2-3倍。这是增加社交媒体流量最有效的方法。

  • 品牌形象增强: 使用一致的开放图谱图片和描述可以建立专业可信的品牌形象。精心设计的缩略图能提高品牌知名度。

  • 通用性和兼容性: 设置一次即可自动应用于包括Facebook、Twitter、LinkedIn、KakaoTalk和Slack在内的大多数平台。无需为每个平台单独配置。

缺点​

  • 图片制作负担: 需要设计资源,因为每个页面都需要制作合适的开放图谱图片。如果博客文章很多,工作量会相当大。

  • 缓存问题: 社交平台会缓存开放图谱信息,因此更改不会立即反映。需要手动刷新缓存,已分享的链接可能无法更新。

  • 平台差异: 虽然大多数平台支持开放图谱,但有些平台更喜欢自己的标签。例如Twitter优先使用Twitter Card,因此要实现完美优化可能需要额外工作。

常见问题​

问: 没有开放图谱会怎样? 答: 即使没有开放图谱标签也可以分享链接,但社交平台会随意提取页面信息。这可能导致显示意外的图片或文本,或者根本不显示缩略图。这会大大降低点击率。

问: 开放图谱图片的最佳尺寸是多少? 答: Facebook推荐1200x630px(宽高比1.91:1)。最小尺寸为600x314px;更小的尺寸会降低质量。同时提供正方形图片(1200x1200px)可以在各种平台上更好地显示。文件大小应低于8MB,首选JPG或PNG格式。

问: og:title和HTML title标签有什么区别? 答: HTML <title>标签是显示在浏览器标签和搜索结果中的标题,而og:title是在社交媒体分享时显示的标题。两者可以相同,但在社交媒体上使用更短更有吸引力的标题可能更有效。例如:<title>是"什么是反向链接? 定义、特点、获取方法完整指南 | Zero-Coke",而og:title是"如何用反向链接提升博客排名"。

问: 我更改了开放图谱但没有更新。该怎么办? 答: 社交平台为了性能会缓存开放图谱信息。在Facebook分享调试器(https://developers.facebook.com/tools/debug/)中点击"重新抓取"按钮刷新缓存。LinkedIn使用Post Inspector(https://www.linkedin.com/post-inspector/),Twitter有Card Validator。已分享的帖子不会更新,因此重要更改可能需要重新分享。