Open Graph Protocol 翻译过来开放图谱协议，也有人直接叫做 og标签， Open Graph 的主要作用就是告诉其他平台（比如，Facebook，Twitter 等）网页的主要内容是什么，是视频，音乐还是文章， 然后让他们以比较友好的方式给展示出来，比如显示视频缩略图，以及时长等信息，而不是一个干巴巴的URL链接 ~~~
例如链接 https://bittly.sigechen.com/app 的分享到Facebook 的效果如下：
使用方式
Open Graph 通过在网页中添加 meta 标签实现，例如：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
...
<meta property="og:type" content="product"/>
<meta property="og:title" content="Bittly 通讯调试助手在线版" />
<meta property="og:url" content="<https://bittly.sigechen.com/app>" />
<meta property="og:image" content="<https://bittly.sigechen.com/logo.png>" />
<meta property="og:site_name" content="Bittly" />
<meta property="og:description" content="Bittly是一款多平台的通讯调试助手..." />
...
</head>
<body>
Hello, How are you ?
</body>
</html>
资源示例
网站
<meta property="og:type" content="website">
<meta property="og:title" content="website title">
<meta property="og:url" content="<https://www.example.com>">
<meta property="og:image" content="<https://www.example.com/logo.png>">
<meta property="og:description" content="the description of this website">
书籍
<meta property="og:type" content="book">
<meta property="og:title" content="name of book">
<meta property="og:url" content="<https://www.example.com>">
<meta property="og:image" content="<https://www.example.com/logo.png>">
<meta property="og:description" content="description about the book">
<meta property="book:isbn" content="00123131232131231">
<meta property="book:author" content="author name">
<meta property="book:release_date" content="2023-01-03">
<meta property="book:tag" content="tag01">
<meta property="book:tag" content="tag02">
商务
<meta property="og:type" content="business.business">
<meta property="og:title" content="name of bussiness">
<meta property="og:url" content="<https://www.example.com>">
<meta property="og:image" content="<https://www.example.com/logo.png>">
<meta property="og:description" content="description about the business">
<meta property="business:contact_data:street_address" content="name of street ">
<meta property="business:contact_data:locality" content="city name">
<meta property="business:contact_data:region" content="state name">
<meta property="business:contact_data:postal_code" content="221000">
<meta property="business:contact_data:country_name" content="United States">
音乐专辑
<meta property="og:type" content="music.album">
<meta property="og:title" content="name of ablum">
<meta property="og:url" content="<https://www.example.com>">
<meta property="og:image" content="<https://www.example.com/logo.png>">
<meta property="og:description" content="description about the album">
<meta property="og:audio" content="<https://www.example.com/audio.mp3>">
<meta property="music:release_date" content="2023-01-11">
<meta property="music:musician" content="musician 01">
<meta property="music:musician" content="mucian 02">
<meta property="music:song" content="song name 01">
<meta property="music:song" content="song name 02">
音乐播放列表
<meta property="og:type" content="music.playlist">
<meta property="og:title" content="name of list">
<meta property="og:url" content="<https://www.example.com>">
<meta property="og:image" content="https:/www.example.com/logo.png">
<meta property="og:description" content="description about the list">
<meta property="og:audio" content="<https://www.example.com/audio.mp3>">
<meta property="music:creator" content="creator 01">
<meta property="music:creator" content="creator 02">
<meta property="music:song" content="song name 01">
<meta property="music:song" content="song name 02">
音乐电台
<meta property="og:type" content="music.song">
<meta property="og:title" content="name of radio station">
<meta property="og:url" content="<https://www.example.com>">
<meta property="og:image" content="undefined">
<meta property="og:description" content="descriptino about the station">
<meta property="og:audio" content="<https://www.example.com/audio.mp3>">
<meta property="music:creator" content="creator01">
<meta property="music:creator" content="creator02">
音乐歌曲
<meta property="og:type" content="music.song">
<meta property="og:title" content="name of song">
<meta property="og:url" content="<https://www.example.com>">
<meta property="og:image" content="<https://www.example.com/logo.png>">
<meta property="og:description" content="description about the song">
<meta property="og:audio" content="<https://www.example.com/demo.mp3>">
<meta property="music:duration" content="99">
<meta property="music:album" content="<https://www.example.com/album-001>">
<meta property="music:musician" content="musician01">
<meta property="music:musician" content="musician02">
商品
<meta property="og:type" content="product">
<meta property="og:title" content="name of product">
<meta property="og:url" content="<https://www.example.com>">
<meta property="og:image" content="<https://www.example.com/logo.png>">
<meta property="og:description" content="description about production">
<meta property="product:plural_title" content="plural title">
<meta property="product:price.amount" content="10.00">
<meta property="product:price.currency" content="USD">
用户信息
<meta property="og:type" content="profile">
<meta property="og:title" content="name of profile">
<meta property="og:url" content="<https://www.example.com>">
<meta property="og:image" content="<https://www.example.com/logo.png>">
<meta property="og:description" content="description about the profile">
<meta property="profile:first_name" content="first-name">
<meta property="profile:last_name" content="last-name">
<meta property="profile:username" content="name">
视频
<meta property="og:type" content="video">
<meta property="og:title" content="name of video">
<meta property="og:url" content="<https://www.example.com>">
<meta property="og:image" content="<https://www.example.com/logo.png>">
<meta property="og:description" content="description about the video">
<meta property="video:duration" content="100">
<meta property="video:release_date" content="2023-01-03">
<meta property="video:tag" content="tag01">
<meta property="video:tag" content="tag02">
<meta property="video:actor" content="actor01">
<meta property="video:actor" content="actor02">
<meta property="video:director" content="director01">
<meta property="video:director" content="director02">
<meta property="video:writer" content="writer01">
<meta property="video:writer" content="writer02">
电视剧
<meta property="og:type" content="video.episode">
<meta property="og:title" content="name of episode">
<meta property="og:url" content="<https://www.example.com>">
<meta property="og:image" content="<https://www.example.com/logo.png>">
<meta property="og:description" content="description about the video episode">
<meta property="video:series" content="5">
<meta property="video:duration" content="100">
<meta property="video:release_date" content="2023-01-25">
<meta property="video:tag" content="tag01">
<meta property="video:tag" content="tag02">
<meta property="video:actor" content="actor01">
<meta property="video:actor" content="actor02">
<meta property="video:director" content="director01">
<meta property="video:director" content="director02">
<meta property="video:writer" content="writer01">
<meta property="video:writer" content="writer02">
电影
<meta property="og:type" content="video.movie">
<meta property="og:title" content="name of movie">
<meta property="og:url" content="<https://www.example.com>">
<meta property="og:image" content="<https://www.example.com/logo.png>">
<meta property="og:description" content="descriotio about the movie">
<meta property="video:duration" content="100">
<meta property="video:release_date" content="2023-01-04">
<meta property="video:tag" content="tag01">
<meta property="video:tag" content="tag02">
<meta property="video:actor" content="actor01">
<meta property="video:actor" content="actor02">
<meta property="video:director" content="director01">
<meta property="video:director" content="director02">
<meta property="video:writer" content="writer 01">
<meta property="video:writer" content="writer02">
电视节目
<meta property="og:type" content="video.tv_show">
<meta property="og:title" content="name of tv show">
<meta property="og:url" content="<https://www.example.com/>">
<meta property="og:image" content="<https://www.example.com/logo.png>">
<meta property="og:description" content="the description about the tv show">
<meta property="video:duration" content="100">
<meta property="video:release_date" content="2023-01-10">
<meta property="video:tag" content="tag01">
<meta property="video:tag" content="tag02">
<meta property="video:tag" content="tag03">
<meta property="video:actor" content="author 01">
<meta property="video:actor" content="author 02">
<meta property="video:director" content="director 01">
<meta property="video:director" content="director 02">
<meta property="video:writer" content="writer 01">
<meta property="video:writer" content="writer 02">
使用说明
og:title 标题,最多 35 个字符。
og:image 缩略图，推荐的分辨率为1200×627（1.91:1）,大小限制为 5MB, 当缩略图尺寸小于400×209时，则会显示小号的缩略图，例如：
快捷工具
在线快速生成 Open Graph 标签
https://webcode.tools/generators/open-graph/article
在线预览 Open Graph 分享效果
