open graph简述

场景

在我们使用twitter的时候,会发现有的链接会显示预览卡片,有的不会。

Pasted image 20240409203435

Pasted image 20240409204440

这是因为有的网站设置了open graph,有的没有。

Pasted image 20240409103122

那么什么是open graph?

open graph是一个由facebook在2010年发布的协议,用于在社交网络上分享链接时,显示预览卡片。

Pasted image 20240409204654

我觉得无论是它的名称还是意图,都能看出facebook以及其他支持这种协议的社交平台的开放性, 特别是在某些平台会屏蔽外链或者限流带有外链的衬托下。

Pasted image 20240409205145

和open graph类似还有twitter自己的card,如果twitter card和open graph同时存在的话,会先显示在twitter card。如果twitter card没有定义,才会显示open graph。

Pasted image 20240409213244

Pasted image 20240408163056

预览和检查工具

OpenGraph - Preview Social Media Share and Generate Metatags - OpenGraph

Pasted image 20240409201933

OpenGraph - Preview Images and Generate Open Graph Meta Tags

Pasted image 20240409195616

Pasted image 20240409131420

一些例子

Open Graph Examples

Pasted image 20240409131603

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值