开放图元生成器

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

什么是开放图元标签？

这些嵌入的配置是使用 标签完成的，通常在您网站的标题中。它们有一个标准，最初由 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:video 和 og:audio 标签的工作方式相同，但分别用于视频和音频。

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

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

记不住怎么办？

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