Open Graph 分享预览

产品部这周给了我如下需求，在twitter,skype,telegram中用户分享网站的链接时会生成一张小卡片

大概是这个这样子

那么我们如何完成这个需求呢？

Facebook定义了名为Open Graph 协议，网页在meta标签定义OG的属性，而社交软件则读取meta中的属性，显示卡片

名称	说明
og:url	对象的网址，即权威链接。通常是放置属性标签的页面的网址。不应包含任何会话变量、用户识别参数或计数器。请使用此标签的权威链接，否则赞和分享会分散到网址的所有变体中。
og:title	对象的标题、标题行或名称。
og:description	对象的简短说明或摘要。
og:image	对象的图片网址。图片应至少为 600×315 像素，但最好是 1200×630 像素或更大的尺寸（大小不超过 5MB）。将长宽比保持在 1.91:1 左右，以避免裁剪。游戏图标应为正方形，且至少为 600×600 像素。如果有多个可用的分辨率，可以添加多个 og:image 标签。如果在发布图片后更新了图片，请使用新网址，因为系统会根据之前的网址缓存图片，可能不会更新图片。
fb:app_id	网站应用的 Facebook 应用编号。
og:type	请参阅应用面板的操作类型版块，了解对象的类型。选择对象并在高级下找到其 og:type。在动态中发布对象后，就无法更改对象类型。
og:locale	对象属性使用的语言设置。默认为 en_US。
og:video	对象的视频网址。如果指定多个 og:video，则每个视频都需要提供 og:video:type。请参阅视频类型参考文档，了解如何内嵌播放视频。视频需要 og:image 标签，才能在动态消息中显示。
og:determiner	在动态中，显示在对象前面的词语，例如“an Omelette”（一份蛋饼）。此值应为属于 Enum {a、an、the、””、auto} 的字符串。如果选择“auto”，Facebook 就会自动选择“a”或“an”。默认为空白。
og:updated_time	对象上次更新的时间。
og:see_also	用于提供额外的链接，显示与对象相关的内容。
og:rich_attachment	值为“true”时，发布的动态会呈现丰富的元数据，例如标题、说明、作者、网站名称和预览图片。
og:ttl	再次抓取此页面之前经过的秒数。此属性可用于限制 Facebook 内容爬虫的抓取频率。允许的最小值为 345600 秒（4 天）；如果设置更低的值，会使用最小值。如果不包括此标签，会根据网页服务器返回的“Expires”标头计算 ttl，否则默认为 7 天。
og:restrictions:age	[int]+ 形式的年龄值，用于表示特定的最小年龄。
og:restrictions:country	可以是 country:allowed 或 country:disallowed，随同使用 ISO 3166 标准指定的两字符国家/地区代码。
og:restrictions:content	当前仅支持对酒类产品进行内容限制。

html代码示例

<head><meta property="og:url"            content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" /><meta property="og:type" content="article" /><meta property="og:title" content="When Great Minds Don’t Think Alike" /><meta property="og:description" content="How much does culture influence creative thinking?" /><meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />
</head>

Open Graph 分享预览相关推荐

Vue 实现 Open Graph 分享预览
什么是 Open Graph Protocol?,可以去看这篇文章 Open Graph Protocol 像vue的插件,例如vue-head,vue-meta这些可以动态的添加meta标签到hea ...
解决Axure发布分享预览的3个方法
解决Axure发布分享预览的3个方法参考文章: (1)解决Axure发布分享预览的3个方法 (2)https://www.cnblogs.com/gxbk629/p/6558734.html 备忘一 ...
iOS 系统分享UIActivityViewController，自定义分享预览UI
UIActivityViewController继承自UIViewController,是一个系统分享组件,它提供了一些通用的标准服务(AirDrop.Messages,Mail)等,类似于照片里点击 ...
使用摩客原型托管，3分钟搞定原型发布分享预览
2019独角兽企业重金招聘Python工程师标准>>> Mockplus最近推出了一个很有意思的功能:摩客原型托管. 1.摩客原型托管做什么的? 可以轻松将多种原型设计文件(Axur ...
【uniapp】视频分享预览小程序
六一收到个不同以往的需求,我的指导老师最近有点忙,让我们帮忙做一个可以通过二维码预览视频的小程序收到需求后,因为只是临时用一下,不打算写一套完整的系统,所以大概的思路就是,其他成员将视频通过ftp传 ...
office文件在线预览
需求背景最近学妹她们那边有一个项目类似在线网盘的东西,支持文件上传保存.其中除了普通text文本以外,还有如office文件word.excel.ppt等文件,并且提供在线预览的功能.用户能够在线预 ...
分布式图处理引擎Graph Engine 1.0 预览版正式发布
分布式图处理引擎Graph Engine 1.0 预览版正式发布我们很高兴地宣布,由微软亚洲研究院开发的Graph Engine 1.0预览版正式发布.Graph Engine是一个基于内存的分布式 ...
三款运用二维码分享与预览的原型设计工具
2019独角兽企业重金招聘Python工程师标准>>> 越来越多的原型工具也开始利用二维码"简单便捷"的特点,来进行原型设计的展示与分享伴随着智能手机的快速发展 ...
winfrom axacropdf预览pdf怎么一直显示_PDF合并怎么做？分享多个PDF文件合并的方法...
PDF合并怎么做?我们在工作中经常会碰到多个散落独立的文件,当我们需要将它们整合在一起时该怎么办呢,是不是还有不少小伙伴会选择去打印店将文件打印出来再逐一校对?不用这么麻烦啦!只需要将这些PDF文件合 ...

Open Graph 分享预览

Open Graph 分享预览相关推荐

最新文章

热门文章