前端进阶：The Open Graph protocol（OGP）使你的网页内容在社交媒体上更吸睛

前端赵哈哈
1,903 阅读5分钟

og介绍

og 全名称 Open Graph protocol（开放图谱协议），是一种为社交分享而生的Meta 标签。通过og填写页面的类型和描述页面的内容。

og 标签的作用是让用户在分享你的网页时，社交媒体平台或搜索引擎能够从中获取到网页的相关信息，并展示给用户一个更加丰富、直观的预览信息。这不仅使得网页在搜索引擎中的排名更高，还能够吸引更多的用户访问你的网页。因此，如果你希望自己的网页在社交媒体及搜索引擎中有更好的展示效果，那么使用 og 标签是非常重要的一个步骤。

使用og可以带来以下优势

  1. 改善社交媒体展示效果：OGP可以让网页在社交媒体上以类似于原生社交媒体内容的方式展示，提高社交分享和传播效果。
  2. 增加曝光和流量：通过优化网页的OGP元数据，可以使得网页在社交媒体上更容易被用户发现和分享，从而增加曝光和流量。
  3. 提高品牌知名度和形象：通过在网页上使用OGP元数据来指定品牌的标识和形象，可以提高品牌知名度和形象。
  4. 改善搜索引擎优化（SEO）：OGP元数据可以为网页提供额外的关键字信息和上下文，有助于提高网页在搜索引擎结果页面上的排名。
  5. 简化社交媒体营销：使用OGP可以让网页的社交媒体营销过程更加简单和有效，因为可以确保网页在社交媒体上以一致的方式展示，并且可以预先定义社交媒体上的分享文本和图像。

效果如下:

企业微信截图_16869065774394.png

常用属性

  • og:title - 标题
  • og:type - 类型，如："video.movie"
  • og:image - 网站缩略图的url地址
  • og:url - 规范性URL，将作为其在图中的永久ID

官方案例展示

<html prefix="og: https://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

prefix属性介绍：prefix 属性是一种 HTML5 属性，它为一组相关的 HTML 元素和属性定义一个统一的命名空间。它是为了支持语义化 Web 设计和搜索引擎优化（SEO）而引入的。该属性非必填
<html prefix="og: http://ogp.me/ns#">：定义了 Open Graph 协议的命名空间

其他属性

  • og:audio - 带有音频文件的url地址
  • og:description - 描述
  • og:determiner - 限定词
  • og:locale - 标记区域，如"en_US"
  • og:locale:alternate - 标记区域数组形式
  • og:site_name - 显示网站名称
  • og:video -带有视频文件的url地址

官方案例展示

<meta property="og:audio" content="https://example.com/bond/theme.mp3" />
<meta property="og:description" 
  content="Sean Connery found fame and fortune as the
           suave, sophisticated British agent, James Bond." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="https://example.com/bond/trailer.swf" />

结构化属性（可选）

一些属性可以有额外的元数据附加在它们身上

og:image 的结构化属性

  • og:image:url - 图片的地址
  • og:image:secure_url - 支持https的备用地址
  • og:image:type - 图片类型
  • og:image:width - 图片宽
  • og:image:height - 图片高
  • og:image:alt -描述图片中的内容

og:image 相关案例

<meta property="og:image" content="https://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />

og:video 相关案例

<meta property="og:video" content="https://example.com/movie.swf" />
<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />

og:audio 相关案例

<meta property="og:audio" content="https://example.com/sound.mp3" />
<meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" />
<meta property="og:audio:type" content="audio/mpeg" />

进阶

数组

如果一个标签可以有多个值，只需在你的页面上放置多个版本的相同标签。在冲突中，第一个标签（从上到下）被优先考虑。

og:image相关案例

<meta property="og:image" content="https://example.com/rock.jpg" />
<meta property="og:image" content="https://example.com/rock2.jpg" />

<meta property="og:image" content="https://example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="https://example.com/rock2.jpg" />
<meta property="og:image" content="https://example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />

代码2中，第一张图大小300*300 px，第二张图片没有设置，第三张图片高度为1000px

对象类型

为了让你的对象在图中被表示出来，你需要指定它的类型。这是用og:type属性完成的

<meta property="og:type" content="website" />

>> Music

music.song 歌曲属性

  • music:duration - integer >=1 - 歌曲的长度（秒）
  • music:album - music.album array - 这首歌来自的专辑
  • music:album:disc - integer >=1 - 用于指定音乐文件中包含的专辑信息：专辑编号-整数
  • music:album:track - integer >=1 -用于指定音乐文件中包含的曲目信息：曲目编号-整数
  • music:musician - profile array -作者

music.song相关案例

music.song

<meta property="og:type" content="music.song" />
<meta property="og:music:duration" content="600" />
<meta property="og:music:album" content="The Dark Side of the Moon" />
<meta property="og:music:album:disc" content="1" />
<meta property="og:music:album:track" content="1" />
<meta property="og:music:musician" content="xxxx" />

music.album 专辑属性

  • music:song - music.song - 这张专辑中的歌曲。
  • music:song:disc - integer >=1 - 用于指定音乐文件中包含的唱片信息：唱片编号-整数
  • music:song:track - integer >=1 - 用于指定音乐文件中包含的曲目信息：曲目编号-整数
  • music:musician - profile - 作者
  • music:release_date - datetime -专辑发行的日期

music.playlist 播放列表属性

  • music:song - 与music.album上的相同
  • music:song:disc - 同上
  • music:song:track - 同上
  • music:creator - profile - 播放列表的创建者

music.radio_station 广播电台的音乐类型，它可以用于描述广播电台播放的音乐内容。

  • music:creator - profile - 该站的创建者

>>Video

video.movie 视频-电影属性

  • video:actor - profile array - 电影演员.
  • video:actor:role - string - 演员的作用,用于描述演员或角色在视频中所扮演的角色和角色类型.
  • video:director - profile array - 电影的导演
  • video:writer - profile array -电影的编剧
  • video:duration - integer >=1 - 电影的长度（秒）
  • video:release_date - datetime - 电影上映的日期
  • video:tag - string array - 与这部电影有关的标签词

video.movie相关案例

<meta property="og:type" content="video.movie" /> 
<meta property="og:video:actor" content="John Travolta" /> 
<meta property="og:video:role" content="主演" /> 
<meta property="og:video:director" content="史密斯" /> 
<meta property="og:video:writer" content="丽萨" /> 
<meta property="og:video:duration" content="30000" /> 
<meta property="og:video:release_date" content="2023-06-21" /> 
<meta property="og:video:tag" content="funny" />

video.episode 视频情节属性

  • video:actor - 与video.movie相同
  • video:actor:role
  • video:director
  • video:writer
  • video:duration
  • video:release_date
  • video:tag
  • video:series - video.tv_show - 本集属于哪个系列

video.tv_show 电视

一个多集的电视节目。其元数据与video.movie相同。

video.other 其他

一个不属于任何其他类别的视频。其元数据与视频.电影相同。

非垂直类型（广泛使用中）

article 文章类型/属性

  • article:published_time - datetime - 文章首次发表时间
  • article:modified_time - datetime - 文章最后一次修改时间
  • article:expiration_time - datetime - 文章过期时间
  • article:author - profile array - 文章作者
  • article:section - string - 高层次的章节名称
  • article:tag - string array - 文章标签

book 书

profile 概况

  • profile:first_name - string - 性名
  • profile:last_name - string - 名字
  • profile:username - string - 名称
  • profile:gender - enum(male, female) - 性别

website 网站

avatar
文章
阅读
粉丝