你有没有遇到过这样的情况:
辛辛苦苦写了篇干货文,分享到朋友圈/微信群,结果显示的是一串枯燥的链接,连张图都没有;或者标题被截断,描述是无关的自我介绍,别人扫一眼就划走了?
其实,问题不是你的内容不好,而是没给社交平台“喂”对信息——你需要「Open Graph(简称OG)」标签。
这个藏在网页代码里的“小透明”,既能让你的分享内容看起来更吸引人,还能间接提升SEO排名。今天就把OG的底层逻辑、使用方法、效果验证,全给你讲清楚。
2010年,Facebook推出了「Open Graph协议」,初衷很简单:让网页内容在社交平台上的呈现更“可控”。
在此之前,用户分享链接到社交平台时,平台只能“瞎猜”:比如抓网页的<title>
标签当标题,抓第一段文字当描述,随机选一张图片当预览——结果常常是标题不准确、描述无关、图片模糊,甚至没有图片。
举个例子:你写了篇《2025年SEO最新趋势》,网页title是“2025年SEO最新趋势-XX博客”,分享到朋友圈后,显示的标题可能是“2025年SEO最新趋势-XX博客”(太长,被截断成“2025年SEO最新趋势-XX...”),描述是“欢迎来到XX博客,专注于SEO技巧分享...”(完全无关),图片是你博客的logo(太小,显示不清)。
这样的分享效果,谁愿意点?
OG协议的出现,就是给网页“贴标签”:用标准化的meta标签,告诉社交平台“我的标题是这个,描述是这个,图片是这个”,让分享内容的呈现更准确、更吸引人。
以下是最近开发的一个产品分享到微信的效果展示。第一个分享卡片是直接通过微信分享的效果,因为没有接微信的sdk,所以只能看到标题,第二个是通过默认浏览器打开,借助浏览器的分享就能生成内容更丰富的分享卡片,可以打开网址(md.fe1024.com)看head中如何具体配置。
很多人以为OG只是“让分享内容更美观”,其实它的价值远不止于此:
社交平台的用户都是“视觉动物”——有图片、有清晰标题、有简洁描述的分享,比纯链接的点击率高3-5倍(数据来自Facebook官方研究)。
比如,你分享一篇《如何用ChatGPT写SEO文案》,用OG标签设置:
og:title
:“用ChatGPT写SEO文案,我靠这3个技巧涨了10万粉”(吸引人的标题) og:description
:“不用再绞尽脑汁想关键词,ChatGPT帮你自动生成符合SEO的文案,附具体操作步骤”(痛点+利益点) og:image
:一张ChatGPT界面的截图,上面有生成的文案(直观)这样的分享,用户看到后会想:“这个技巧有用,我要看看”,点击率自然高。
虽然OG不是搜索引擎的“直接排名因子”,但它能通过以下方式间接提升SEO:
og:type
(内容类型,比如“article”“product”)、og:description
(内容描述),能让搜索引擎更清楚你的内容主题,从而更准确地索引和排名。OG协议被几乎所有主流社交平台支持(Facebook、LinkedIn、Twitter、Pinterest等),设置一次,就能在所有平台上显示一致的内容。(微信除外,微信需要使用官方SDK配置才可达到分享效果,但是也有方式实现分享卡片效果:先将网页连接在手机默认浏览器打开,通过默认浏览器分享到微信即可)
比如,你设置了og:image
为1200x627像素的图片,那么分享到Facebook、LinkedIn时,都会显示这张图片,不会出现“在LinkedIn显示正常,在Facebook显示模糊”的情况。
OG标签是放在网页<head>
部分的meta标签,格式是:
<meta property="og:属性名" content="属性值">
下面是必须设置的5个核心标签,以及最佳实践:
og:title
——分享的标题(最重要)<title>
标签(比如“XX博客-2025年SEO趋势”),要更简洁、更有吸引力(比如“2025年SEO趋势:这3个变化会让你的流量翻倍”)。 og:description
——分享的描述og:image
——分享的图片og:url
——内容的规范URLcanonical URL
(规范URL),比如 https://www.xx.com/2025-seo-trends
(不要用带参数的URL,比如 https://www.xx.com/2025-seo-trends?utm_source=wechat
)。og:type
——内容的类型article
(文章,比如博客、新闻); product
(产品,比如电商商品); video.movie
(电影); website
(网站首页)。https://developers.facebook.com/tools/debug/
)检查标签是否正确,或者用在线工具(比如“OG Tag Generator”)生成代码。<head>
部分。 <meta property="og:title" content="你的分享标题">
<meta property="og:description" content="你的分享描述">
<meta property="og:image" content="你的图片URL">
<meta property="og:url" content="你的规范URL">
<meta property="og:type" content="article"> <!-- 根据内容类型调整 -->
添加完OG标签后,一定要用Facebook Debugger(https://developers.facebook.com/tools/debug/
)检查:
比如,你写的是“SEO技巧”,却用“美女图片”当og:image
,或者用“免费领取1000元红包”当og:description
,结果用户点击后发现内容不符,会立即关闭页面,甚至举报你的网站——这样不仅不会提升效果,还会降低用户信任度。
如果og:image
的尺寸太小(比如200x200像素),社交平台会自动放大,导致图片模糊;如果尺寸太大(比如5000x5000像素),会延长加载时间,用户可能没等图片加载完就划走了。
传统的meta title
(<title>
标签)是给搜索引擎看的,而og:title
是给社交平台看的——两者可以一致,但如果有需要,也可以调整。比如,meta title
可以更偏向关键词(比如“SEO技巧:meta标签优化方法”),而og:title
可以更偏向用户吸引力(比如“meta标签优化的3个误区,90%的人都犯了”)。
如果你的内容更新了(比如文章修改了标题或描述),一定要同时更新OG标签——否则,社交平台还是会显示旧的内容,导致用户看到的信息和实际内容不符。
很多站长把精力放在“关键词排名”“外链建设”上,却忽略了OG这个“隐形SEO工具”——它虽然不会直接提升你的关键词排名,但能通过提升社交分享效果,间接带来更多流量、更多外链、更好的用户体验,从而帮你提升SEO排名。
对于个人站长来说,设置OG标签其实很简单:无论是用WordPress插件,还是手动添加,只要花10分钟就能完成。而带来的效果,可能比你花几个小时写一篇文章更明显。
赶紧去检查一下你的网站有没有加OG标签吧——别让你的好内容,因为“不会分享”而被埋没。
附录:常用OG标签列表
标签名 | 作用 | 示例值 |
---|---|---|
og:title |
分享的标题 | “2025年SEO趋势:这3个变化会让你的流量翻倍” |
og:description |
分享的描述 | “不用再花钱买外链,这5个免费方法帮你快速提升SEO排名” |
og:image |
分享的图片 | https://www.xx.com/seo-trends.jpg |
og:url |
内容的规范URL | https://www.xx.com/2025-seo-trends |
og:type |
内容的类型 | “article”(文章)、“product”(产品) |
og:site_name |
网站名称 | “XX博客” |
og:locale |
内容的语言 | “zh_CN”(中文简体) |
参考资料
https://ogp.me/
) https://yoast.com/advanced-technical-seo-social-image-ogimage-tags/
)