Open Graph Protocol 应用指南

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 分享效果

https://www.opengraph.xyz/