社交媒体上的网页预览 Open Graph和Twitter Cards

当我们想分享自己的网站、blog到一些社交媒体，如国外的facebook、twitter、telegram、LinkedIn，国内的微信、微博、今日头条等都支持网页预览效果，包括网页的标题、描述、图片等等。
如何要支持预览呢，这时，就需要了解一下相关协议。

Open Graph

Open Graph协议使任何网页都可以成为社交图中的富对象。例如在Facebook上被用来允许任何网页具有与Facebook上任何其他对象相同的功能。Open Graph协议最初是由Facebook创建的，灵感来自都柏林核心，link-rel canonical，Microformats和RDFa。Facebook已和Yahoo、Twitter合作采用OAuth 2.0认证标准。任何网页只要遵守该协议，社交媒体网站就能从页面上提取最有效的信息并呈现给用户，也能让社交媒体网站按照页面上og标签规定的内容呈现给用户。
官网：
https://ogp.me/

说明

og:site_name 网站名
og:title 标题
og:type 类型，常用值：article、website、book、movie、music、news、blog等
og:image 略缩图地址
og:url 页面地址
og:description 页面的简单描述
og:videosrc 视频或者Flash地址
og:audiosrc 音频地址
og:locale 区域

代码方式(建议必须项)：

<meta property="og:site_name" content="yousite名称">
<meta property="og:title" content="文章标题">
<meta property="og:description" content="文章的描述">
<meta property="og:image" content="https://yousite.com/image.jpg">
<meta property="og:url" content="https://yousite.com">
<meta property="og:type" content="website">

Twitter Cards

又称X Cards，是Twitter用于显示网页在推文中的协议。使用X Cards可以将丰富的照片、视频和媒体体验附加到推文中，帮助为您的网站带来流量。只需在您的网页上添加几行元数据，在推特上发布指向您内容的链接的用户将在推特中添加一张“卡片”，其关注者可以看到。

说明

twitter:card Card 类型，有四种类型：summary、summary_large_image、app、player
twitter:site 网站或个人的 Twitter 账号
witter:title 标题
twitter:description 页面的简单描述
twitter:image 略缩图地址
twitter:app:name Card为app类型则应用名称
twitter:app:id Card为app类型则应用ID
twitter:player Card为player的播放地址
twitter:player Card为player的播放地址
twitter:player:width Card为player的播放宽度
twitter:player:height Card为player的播放高度

代码方式(建议必须项)：

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@username">
<meta name="twitter:title" content="文章标题">
<meta name="twitter:description" content="文章的描述，最多200个字符">
<meta name="twitter:image" content="https://yousite.com/image.jpg">

验证工具：
Twitter Card Validator

最后

如果你希望你的页面在分享到社交媒体时更美观，能有利于搜索网站对于权重提升和排名，那快点加上这些mate信息吧。
记住，有image更好。

Open Graph

说明

Twitter Cards

说明

最后

标签

评论 3

热门文章

文章导读

相关推荐