Skip to content

OGP 协议

OGP 用来标注你的页面,网页快照。帮助社交 app 高效、准确的获取网页中核心的链接、标题、主图、正文摘要信息,使得该网页在社交分享中有更好的展现体验。

现如今,大多数前端都是动态渲染,当未使用 OGP 时,使用链接分享则无法提取为卡片内容; 如果网页不支持 OGP,那么基于算法和规则来提取网页中标题、主图、正文摘要,准确性无法做到 100%,体验也不能充分保证。尤其是有部分页面 html 采用前端 js 渲染,而不是服务端渲染,会导致无法提取主图、正文摘要,链接卡片体验比较糟糕。

html
<meta
  property="og:image"
  content="https://www.apple.com.cn/iphone/home/images/meta/iphone__ky2k6x5u6vue_og.png?202303122304"
/>
<meta property="og:title" content="iPhone" />
<meta
  property="og:description"
  content="功能强大,外观抢眼,设计耐用。来看看全新 iPhone 14 Pro、iPhone 14 Pro Max、iPhone 14 和 iPhone 14 Plus,以及 iPhone SE。"
/>
<meta property="og:url" content="https://www.apple.com.cn/iphone/" />
<meta property="og:locale" content="zh_CN" />
<meta property="og:site_name" content="Apple (中国大陆) - 官方网站" />
<meta property="og:type" content="website" />