Open Graph Image介绍

2025-10-12

1866 字约 7 分钟

...

一、什么是 OG 图

OG 图（Open Graph Image）是网页在社交媒体上分享时展示的预览缩略图（Preview Image）。
OG 来自于 Open Graph Protocol（开放图谱协议），最初由 Facebook 提出，后来被 Twitter、LinkedIn、Discord、Telegram 等平台广泛采用。

当你在社交媒体上粘贴一个网页链接时，系统会自动抓取该网页的 OG 元数据，从而生成一个包含标题、描述和预览图的卡片式展示。
其中最醒目的部分，就是这张 OG 图（og:image）。

二、OG 元信息的基本格式

在网页 <head> 中声明 Open Graph 元信息：

<meta property="og:title" content="我的技术博客 - Dropkit Tech">
<meta property="og:description" content="探索前端、后端与游戏开发的边界。">
<meta property="og:type" content="website">
<meta property="og:url" content="https://dropkit.tech">
<meta property="og:image" content="https://dropkit.tech/og/cover.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="zh_CN">

这些标签通常包括：

属性含义示例

og:title 页面标题我的技术博客 og:description 简短摘要探索前端与服务端的极限 og:type 内容类型 website、article、video 等 og:url 当前页面 URL https://dropkit.tech/post/vue-reactive og:image 预览图地址 https://dropkit.tech/og/vue-reactive.png og:image:width 图片宽度 1200 og:image:height 图片高度 630

💡 典型的 OG 图尺寸是 1200×630px（16:9 比例），在 Facebook、LinkedIn、Telegram 等平台都显示良好。

三、为什么 OG 图很重要

OG 图不仅仅是"分享时好看"，它直接影响：

点击率（CTR）提升
一张设计感强的预览图能显著提高链接点击率。\
品牌一致性
统一的风格（字体、颜色、Logo）让你的分享链接更具辨识度。\
SEO 与社交媒体可见度
虽然搜索引擎不直接读取 OG 图，但社交点击与二次传播对 SEO 有间接帮助。\
可编程生成（动态化）
通过服务端生成个性化 OG 图，实现更智能的分享体验（如博客自动生成标题封面）。

四、OG 图的生成方式

1. 静态方式

直接使用设计好的固定图片，放置于 /public/og/ 目录：

<meta property="og:image" content="https://dropkit.tech/og/default.png">

适用于： - 固定内容页（如首页、关于页） - 产品 Landing Page

2. 动态生成（推荐）

动态 OG 图可在构建或访问时自动生成标题封面，常用于博客或动态内容网站。

常见技术方案：

🟩 前端预渲染工具（Astro、Next、Nuxt）

在构建时为每篇文章生成独立的 OG 图。

Astro 示例

// src/pages/api/og/[slug].ts
import { Resvg } from '@resvg/resvg-js';
import satori from 'satori';
import React from 'react';
import OgCard from '../../../lib/og/ogCard';

export async function GET({ params }) {
  const svg = await satori(<OgCard title={params.slug} />, {
    width: 1200,
    height: 630,
    fonts: [{ name: 'Inter', data: await fetchFont('Inter.ttf'), weight: 400 }],
  });

  const resvg = new Resvg(svg);
  const png = resvg.render().asPng();
  return new Response(png, { headers: { 'Content-Type': 'image/png' } });
}

然后在 <head> 中写：

<meta property="og:image" content="https://dropkit.tech/api/og/my-post-title.png">

这样每篇文章分享时都会显示自己的封面图。

🟦 服务端生成（Go、Node）

例如使用 Go 的 go-opengraph-image 或 Node 的 puppeteer 截图生成。

可以在后端根据数据库内容（标题、作者、标签）实时绘制一张 OG 图缓存到 CDN。

五、Twitter 专属标签

Twitter（现在的 X）有自己的 twitter: 元标签：

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="我的技术博客">
<meta name="twitter:description" content="记录技术与生活">
<meta name="twitter:image" content="https://dropkit.tech/og/default.png">

如果你同时设置了 Open Graph 和 Twitter 标签，大多数平台会优先使用各自专属的标签。

六、OG 图设计建议

分辨率：1200×630px（16:9），至少宽度 ≥ 600px\
安全区留白：避免重要内容靠边，防止平台裁切\
文字对比：深浅分明、避免透明背景\
风格一致：博客可统一底图模板 + 文章标题自动叠加\
包含品牌元素：Logo / 域名 / 标识色

七、常见问题（FAQ）

Q1. Telegram 或微信分享时不显示 OG 图？
👉 检查： - 链接必须是 HTTPS； - 图片 URL 可公开访问； - <meta> 标签需在 <head> 顶部优先加载； - 对于 SSR/SSG 页面，确保 meta 未被客户端替换。

Q2. OG 图更新后不生效？
👉 清理社交平台缓存： - Facebook：Sharing Debugger - Twitter：Card Validator - Telegram：重新发送链接（它会自动刷新缓存）

八、进阶：OG 动态渲染模板设计（Astro 示例）

你可以自定义一个 React 模板组件作为 OG 卡片：

// src/lib/og/ogCard.tsx
export default function OgCard({ title }: { title: string }) {
  return (
    <div
      style={{
        width: '1200px',
        height: '630px',
        background: 'linear-gradient(135deg, #0f172a, #1e293b)',
        color: '#fff',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        padding: '80px',
        fontFamily: 'Inter',
      }}
    >
      <h1 style={{ fontSize: '72px', margin: 0 }}>{title}</h1>
      <p style={{ fontSize: '28px', opacity: 0.8 }}>dropkit.tech</p>
    </div>
  );
}