og协议,让分享在facebook、twitter的网页表现更丰富

845 阅读1分钟

我们想分享到facebook、twitter上的网页表现的更丰富,有标题描述图片等等。这时,就需要了解一下相关协议。此处附上og协议官网

og协议介绍?

开放图协议(Open Graph protocol)使任何网页成为社交图中的富对象。例如,这在Facebook上被用于允许任何网页具有与Facebook上任何其他对象相同的功能。

Facebook已和Yahoo、Twitter合作采用OAuth 2.0认证标准。任何网页只要遵守该协议,SNS网站就能从页面上提取最有效的信息并呈现给用户,也能让SNS网站按照页面上og标签规定的内容呈现给用户

加og协议的好处

  • 1.【好看】有利于正确的的分享您的内容到SNS网站(Social Networking Services,如微博,人人,Twitter,Facebook等社交网站)
  • 2.有利于您的内容更有效的的在SNS网站中传播
  • 3.加强meta信息优化内容,有利于对于权重提升和排名

og标签的书写

og:type 表示页面的类型,当有两个不同类型,以og:type开头为分隔,所以我觉得不管一个还是两个类型,都应该放在前面

  • og:type 表示页面的类型,常用值:article、website、book、movie、music、news等

  • og:title 页面的标题

  • og:description 页面的简单描述

  • og:url 页面地址

  • og:image 略缩图地址

  • og:site_name 页面所在网站名

  • og:videosrc 视频或者Flash地址

  • og:audiosrc 音频地址

  • og:determiner 标题前的单词(eg:a, an, the, "", auto)

*og:locale 标记区域

举例

    <meta property="og:type" content="website">
    <meta property="og:title" content="WeParty - Voice Party Gaming">
    <meta property="og:url" content="https://wepartygame.com/room-share">
    <meta property="og:description" content="Welcome to this mystery carnival, you are more than welcome to invite your friends to join. You will have assigned roles and missions and you will use your insight and wisdom to find out the Killer. If you are the Killer, remember to disguise and deceive, outplay those civilians." />
    <meta property="og:image" content="https://xx/xxx/1609829704247305.png"/>
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:site_name" content="Wepaty Game">
    <meta name="twitter:description" content="‎Welcome to this mystery carnival, you are more than welcome to invite your friends to join. You will have assigned roles and missions and you will use your insight and wisdom to find out the Killer. If you are the Killer, remember to disguise and deceive, outplay those civilians.">
    <meta name="twitter:site" content="@AppStore">
    <meta name="twitter:domain" content="AppStore">
    <meta name="twitter:image" content="https://xxx/x_1608625825528085.png">
    <meta name="twitter:image:alt" content="Wepaty Game">