开放图元生成器

发表于 2月以前  | 总阅读数:140 次

每当在社交媒体平台或消息应用程序上向某人发送链接时,该链接都会扩展以包含网站内容,通常是图像、标题和描述。那这个是怎么做到的呢?答案很简单,就是开放图元。

什么是开放图元标签?

这些嵌入的配置是使用 标签完成的,通常在您网站的标题中。它们有一个标准,最初由 Facebook 创建,称为“开放图谱协议”。

标签将始终使用以下格式,“property”值设置为“og:”,后跟标签类型,“content”值设置为页面上任何内容的值:

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

例如,大多数网站的基本设置如下所示:

<meta property="og:image" content="https://i.imgur.com/imagelink.jpg">
<meta property="og:title" content="Website Title" />
<meta property="og:description" content="Website Description" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/" />

通过这些信息,我们告诉其它程序(如搜索引擎的爬虫,社交软件)这个网站的基本信息。

您可以在 Open Graph 网站上找到它们的完整列表,但我们将在此处介绍重要的内容。

Twitter 会识别 OG 标签,但值得注意的是,它们也有自己的标签,这些标签会优先使用。

<meta name="twitter:title" content="Website Title"> 
<meta name="twitter:description" content="Website Description"> 
<meta name="twitter:image" content="https://i.imgur.com/imagelink.jpg">

使用 OG 元标签

首先,标题。这是一个非常简单的标签,但对每个人来说都是必需的。即使您的嵌入代表一个对象而不是页面,它仍然应该有一个标题来解释它是什么。

<meta property="og:title" content="Website Title" />

或者,如果您的标题没有完成工作,您可以添加扩展描述:

<meta property="og:description" content="Website Description" />

og:type 标签也很重要,因为它告诉网站您要链接的内容类型,以及应该如何格式化。它还允许根据类型使用不同种类的可选参数。有几个不同的选择:

  • website,这是基本默认设置。
  • article,表示一篇新闻/博文,可选参数有published_time、modified_time、author 、section 和 tag 。
  • profile,代表一个用户,有 first_name 、 last_name 、 username 和 <代码>性别。
  • video.other,表示一个视频。还有用于电影和电视节目的标签,它们有自己的参数。

各种音乐相关标签,其中一些在 Facebook 等网站上列入了白名单。

对于可选参数,您需要使用参数名称添加单独的元属性。例如设置music:duration

<meta property="music:duration" content="60" />

您还需要设置 URL 标记以链接回您的网站。

<meta property="og:url" content="https://example.com/" />

如果您希望图像与您的嵌入一起显示,您也需要对其进行设置。图像有很多配置选项:

<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:videoog:audio 标签的工作方式相同,但分别用于视频和音频。

如果标题没有透露,您也可以手动设置网站名称。

<meta property="og:site_name" content="CloudSavvy IT" />

记不住怎么办?

哈喽工具箱开发了生成开放图元的网页小工具,您可以直接输入网站的基本信息,如标题,描述等即可。