Open Graph

控制链接在社交媒体分享时显示信息的元标签协议,由 Facebook 制定。

Open Graph Protocol (OGP) 是 Facebook 于 2010 年制定的元标签协议,用于控制网页在社交媒体上被分享时显示的标题、描述、图片、URL 等信息。在 HTML 的 <head> 中,把 og:title、og:description、og:image、og:url、og:type 等属性写成 <meta> 标签。规范上作为必需项的是 og:title、og:type、og:image、og:url 这 4 个,og:description 并非必需,但描述为空时分享目标会从正文里随便捡一段来用,因此实务中一定要设置。如果不设置 OGP,社交媒体的爬虫会自动推测页面内容来生成预览,可能导致显示不符合预期。

正确配置 OGP 后,在 Facebook、LinkedIn、Discord、Slack、LINE 等社交媒体和即时通讯应用中分享链接时,会显示预期的预览卡片。在时间线和聊天里看不到链接目标的内容,因此预览的标题和图片就成了"要不要点开"的判断依据。图片尤其面积大、容易入眼,所以最好为每篇文章准备能表达内容的图片,至少也要给 og:image 指定一张全站共用、易读的卡片图。

各属性都有实务上的参考尺度。og:title 和 og:description 能显示的宽度会随分享目标的服务与设备变化,放不下的部分会被省略号截断。也有服务并未公开上限,因此与其守住某个特定字数,不如做到"把要点放在开头、即使中途被截断意思也通"来得可靠。og:image 方面,Facebook 的公开资料给出了具体条件:想在高分辨率设备上显示清晰需要 1200 x 630 像素以上,允许的最小尺寸为 200 x 200 像素,想避免信息流中被裁切则采用接近 1.91:1 的比例,文件大小不要超过 8MB。接近 1.91:1 的横长图也容易放进其他服务的大卡片显示,因此在一张图反复复用时可以作为基准。

OGP 虽由 Facebook 制定,但它并不是 W3C 等标准化组织制定的规范,其定位是众多服务都会参照的事实共通规格。X (Twitter) 拥有自己的 Twitter Card 标签 (twitter:card、twitter:title 等),因此重视来自 X 的流量时,把 OGP 标签与 Twitter Card 标签两套都写上,无论实现参照哪一套都能得到预期的显示。另外,OGP 并不是决定搜索排名的因素,但 Google 把 og:title 的内容列为生成搜索结果标题 (标题链接) 的材料之一。所以不能说"这是社交媒体专用的标签、与搜索结果无关",当要填入与 <title> 差异很大的文案时,顺便确认搜索结果一侧的呈现会更稳妥。

一个常见的误解是认为修改 OGP 标签后预览会立即更新,但分享目标的爬虫会缓存取得的内容,因此不会立刻反映。Facebook 可以用 Sharing Debugger 让它重新抓取目标 URL,确认最新的预览。X 则是在登录状态下把 URL 贴进投稿草稿,直接查看实际的卡片显示最为可靠 (以前公开的验证工具现已无法使用)。此外,修改 og:image 的 URL 时,更改文件名本身或附加查询参数是绕过缓存的有效手法。

从字数统计的角度看,事先掌握 og:title 和 og:description 的长度很有帮助。用字数统计工具确认长度,并调整成即使在分享目标的预览中被截断也仍保留要点的结构,就能带来有效的社交分享。

分享这篇文章