poxiaoxi博客很多网站在分享到社交平台时都会遇到类似问题：链接发出去之后，没有显示预期的标题，没有展示封面图片，或者描述内容来自页面中一段无关文字。
出现这些情况，并不一定是网站内容有问题，而是社交平台在读取网页信息时，通常依赖专门的元数据字段。其中最常见的一套标准就是Open Graph，也就是经常简称为OG标签。
Open Graph最早由Facebook提出，用于帮助网页向社交平台描述自身内容。目前大量社交网络、聊天工具和内容分发平台都会参考类似的开放元数据标准。当用户分享一个网页链接时，平台可以根据这些字段生成标题、图片、摘要和网址卡片。
Open Graph标签是什么
Open Graph是一套用于描述网页内容的meta标签规范。
普通HTML页面通常会包含title和description，例如：
<title>网站标题</title> <meta name="description" content="网页描述">
这些字段主要服务于浏览器标题显示和搜索引擎理解。而OG标签主要服务于社交分享场景。
例如，一个文章页面可以通过OG告诉社交平台：
这是什么类型的内容。
分享时应该显示什么标题。
应该使用哪张封面图片。
网页地址是什么。
描述文字应该采用哪一段内容。
这样，当用户把链接分享到支持OG的社交平台时，平台不需要猜测页面内容，而可以直接读取网站提供的信息。
网站为什么需要添加OG字段
很多网站只关注搜索引擎SEO，却忽略了链接在社交渠道中的展示效果。
实际上，一个网页可能通过多个入口传播：
用户主动分享到社交平台。
企业员工分享产品页面。
文章被发布到社区或论坛。
内容通过聊天工具发送给其他用户。
新闻或教程被第三方网站引用。
如果没有设置OG字段，平台可能会自动选择页面中的某个标题、第一张图片或者随机文本作为分享内容。
这种自动选择并不总是符合网站希望展示的信息。例如：
产品页可能抓取到客服提示文字。
文章页可能选择导航菜单作为摘要。
页面没有明显图片时可能显示空白卡片。
添加OG字段后，可以提前定义分享展示内容，让不同渠道中的品牌信息更加统一。
常用OG字段有哪些
Open Graph字段通常放在HTML页面的<head>区域。
最基础的一组字段包括以下内容：
| 字段 | 作用 | 示例 |
|---|---|---|
| og:title | 分享标题 | 网站文章标题 |
| og:type | 页面类型 | article、website |
| og:url | 页面规范地址 | 当前网页URL |
| og:image | 分享图片 | 封面图片地址 |
| og:description | 分享描述 | 页面摘要文字 |
| og:site_name | 网站名称 | 品牌名称 |
其中最重要的通常是og:title、og:image和og:description，因为它们直接影响用户看到的分享卡片。
网页基础OG代码怎么写
一个普通网页可以在head区域加入类似下面的代码：
<meta property="og:title" content="网页标题"> <meta property="og:type" content="website"> <meta property="og:url" content="https://www.example.com/page"> <meta property="og:image" content="https://www.example.com/image.jpg"> <meta property="og:description" content="网页描述内容"> <meta property="og:site_name" content="网站名称">
添加后，社交平台抓取页面时，可以读取这些信息生成分享预览。
需要注意的是，OG标签属于HTML页面输出内容。如果网站使用CMS、前端框架或者缓存系统，需要确认最终访问页面中的HTML确实包含这些字段。
文章页面应该怎么设置OG
对于博客、新闻站和内容网站，文章类型通常需要进一步补充文章相关字段。
例如：
<meta property="og:type" content="article"> <meta property="article:published_time" content="2026-09-09T10:00:00+08:00"> <meta property="article:author" content="作者名称">
这些字段可以帮助平台理解当前内容不是普通网站首页，而是一篇具体文章。
不过并不是所有社交平台都会完整使用所有article扩展字段。因此，优先保证基础OG字段正确，通常比添加大量不一定被读取的字段更加重要。
OG图片尺寸应该如何选择
分享图片是OG中最容易出现问题的部分。
不同平台对于图片比例和尺寸要求存在差异，但从通用角度来看，很多网站会选择接近1.91:1比例的横向图片，例如1200×630像素。
设置OG图片时建议注意：
使用绝对URL，而不是相对路径。
图片地址必须能够公开访问。
避免需要登录才能查看的图片。
不要使用过小尺寸图片。
图片内容应适合社交分享展示。
例如下面这种写法更稳定：
<meta property="og:image" content="https://www.example.com/images/share.jpg">
而不是：
<meta property="og:image" content="/images/share.jpg">
因为部分社交平台抓取时并不知道当前页面的完整路径。
OG和Twitter Card有什么区别
除了Open Graph，X（原Twitter）还有自己的Twitter Card标签体系。
两者关系比较接近。
很多网站会同时添加OG和Twitter Card：
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="网页标题"> <meta name="twitter:description" content="网页描述"> <meta name="twitter:image" content="https://www.example.com/image.jpg">
这样可以让不同平台读取更适合自己的字段。
通常情况下，OG负责更广泛的社交分享兼容，而Twitter Card主要用于X平台展示控制。
微信分享需要单独处理吗
很多中文网站特别关注微信分享效果。
需要注意的是，微信生态中的网页分享机制并不完全等同于Facebook、LinkedIn等平台直接读取OG。
微信公众号、微信内网页分享、朋友圈分享等场景，可能涉及微信开放平台接口、JS-SDK配置以及微信自己的缓存机制。
因此：
OG可以作为网页基础社交元数据。
微信特殊分享能力可能需要额外接入微信接口。
修改OG后，如果微信仍显示旧内容，可能需要等待缓存更新。
不能简单认为“添加OG以后，所有微信分享问题都会自动解决”。
OG标签和SEO有什么关系
OG标签主要服务社交分享，并不是传统搜索排名因素。
搜索引擎通常更关注title、description、正文内容、结构化数据、链接关系等SEO因素。
但是，OG仍然可能间接影响网站传播。
一个展示效果更好的分享卡片，可能获得更多点击、更多用户访问以及更多自然传播机会。这些用户行为和品牌曝光，对于网站长期运营仍然具有价值。
因此，OG更应该被看作网站整体内容分发体系的一部分，而不是替代SEO的优化方法。
精彩评论