[译] 什么是Open Graph? 如何应用于自己的网站？

2022/06/07

我们都知道输出内容和维护网站需要花费大量时间。所以如何确保我们的内容在互联网上被分享时能够脱颖而出呢？

什么是Open Graph? #

Open Graph是一个最初由Facebook创建的网络协议，用于标准化网页中metadata(元数据)的使用,来描述页面的内容。

通过它，你可以提供如页面标题这样简单的数据，也可以提供如音视频这类复杂的数据，这些数据组合起来，可以描述互联网每一个单独的页面内容。

为什么需要它？ #

互联网上的内容通常有一个目标——与他人分享。如果你只是将它发送给朋友，它可能并没有什么用，但如果你想把网站分享到社交网络或者App上，利用它提供的丰富预览效果，吸引他人点击进入你的网站。

类似这样的分享预览效果有助于吸引别人查看你的内容。

如果我不使用它会发生什么？ #

大多数SNS(Twitter、微博)默认会尽可能创建你的内容预览，但往往效果一般。
以我的网站为例 colbyfayock.com。

Twitter正确抓取了我的页面标题和描述信息，但是看起来并不吸引他人点击进去。

相反预览网站单独一篇文章时，我们可以看到不一样的效果。

那么如果不使用它会发生什么呢？并不会发生什么不好的效果，但你将无法利用它帮助你的内容在互联网上发布的同质化内容中脱颖而出（更好的“社交网络SEO”）。

从Open Graph的基础开始 #

每个页面都需要四个基本的Open Graph标签 og:title, og:type, og:image 和 og:url。这些标签在你每个页面的值都不一致，这意味着你网站主页的标签和博客文章的页面不一样。

标签的字面意义相当直接，下面是每个标签的详细解释：

og:title: 页面的标题，通常与网站的<title>标签相同，除非你想以不同的方式呈现。
og:type: 网站的类型。虽然网站是一种通用类型，但我会在下一节详细解释。
og:image: 通过图片来表现你网站的内容，它应该是一个高分辨率的图片，当有人分享你的网站内容时会展示在分享动态上。
og:url: 当前页面的URL。

当你使用它时，应将它和其他元数据一起放在<head>。使用的标签应该是<meta>, 类似这样：

<meta property=“[NAME]” content=“[VALUE]” />

因此，如果我要为我的网站colbyfayock.com创建一组基础的Open Graph标签，需要这样：

<meta property="og:title" content="Colby Fayock - A UX Designer &amp; Front-end Developer Blog" />
<meta property="og:type" content="website" />
<meta property="og:image" content="/static/website-social-card-44070c4a901df708aa1563ac4bbe595a.jpg" />
<meta property="og:url" content="https://www.colbyfayock.com" />

网站 Open Graph 类型（og:type） #

Open Graph 协议支持许多种类的‘type’网站类型，包括website, article, video等。

当设置你的Open Graph标签时，你应该确定哪种类型对你的网站更有意义，如果你的网站专注于视频，那么使用video类型可能更有意义，如果只是一个普通的网站，应该使用website。

type类型作用于每个页面，如果你的主页是website，其他页面当然可以设置为video。

因此，如果我要为我的网站创建一个Open Graph type, 它可能看起来像这样：

<!-- colbyfayock.com -->
<meta property=“og:type” content=“profile” />

当导航至一篇博文时，它大概是这样：

<!-- https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/ -->
<meta property=“og:type” content=“article” />

你可以在 Open Graph官网寻找更多Open Graph websites types。

一些值得添加的其他Open Graph tags #

你可能觉得基础的tags已经够用，下面介绍一些值得添加的tags:

og:description: 你的页面的描述。类似于og:title, 甚至类似于你网站上的<meta type:"description">标签，除非你设置不同的内容。
og:locale: 如果你想本地化你的标签，确保包含此标签，格式为language_TERRITORY,默认值为en_US。
og:site_name: 代表你网站内容的网站名称。如果你在一篇文章页面，可能有一个标题使用该文章的标题，其中站点名称将是你的博客的名称。
og:video: 需要一个视频支持你的网站？使用它，通过添加你的视频链接。

这些tags和之前的基础tags添加方式一致：

<meta property=“[NAME]” content=“[VALUE]” />

Twitter 和其他社交网络在使用Open Graph #

大多数社交网络都遵循Open Graph协议的基本标准，但也有少数网站包含自己的扩展，以帮助用户在自己的生态系统中定制内容被分享时的外观和感觉。

以Twitter为例，其允许你指定twitter:card,当你的内容被分享时会展示出来，其值包括

summary
summary_large_image
app
player

这将帮助你选择如何显示被分享的你的网站链接，例如你选择summary_large_image,Twitter将显示你的链接和大的高分辨率图片，只要你在og:image标签提供它。

这里是一些关于如何在一些社交媒体网站使用Open Graph标签的文档参考：

Open Graph的image标签 #

虽然使用og:image添加图片已经够用了，但有时需要定制显示出来就有些挑战性了，如果你使用遇到了麻烦，Open Graph提供了一些image tags，例如: og:image:url, og:image:secure_url,og:image:width和og:image:height。

请确保遵循所有的Open Graph文档中的提示和例子。另外，一些社交网络对图片有要求，以Twitter为例，它要求图片比例为2：1，最小尺寸为300 * 157, 最大尺寸为4096 * 4096，且大小不超过5MB，必须是JPG, PNG, WEBP或 GIF格式。

如果你卡住了，使用社交网络的工具测试你的标签，看看你是否可以找到问题。

测试你的Open Graph 标签 #

幸运的是，我们最爱的社交媒体也提供了工具帮助我们debug我们的标签。一旦你确定你的标签已经在你的网站上添加了，你就能预览你的网站被分享时的外观状态。

Twitter：https://cards-dev.twitter.com/validator
Facebook: https://developers.facebook.com/tools/debug/
Pinterest: https://developers.pinterest.com/tools/url-debugger/

深入挖掘 Open Graph #

虽然上面介绍的标签应该可以覆盖基本的网站使用了，但也有更多的一些标签可以帮助你或者你的企业在整个社交网络里更快被发现。

如果你有兴趣深入了解Open Graph, 那么该文档可以提供更多标签的使用方法。

https://ogp.me/

我可以得到一份模板吗？ #

如果你只是想寻找一份模板，下面是我个人博客一篇文章的标签设置：

<meta property="og:site_name" content="Colby Fayock" />
<meta property=“og:title” content=“Anyone Can Map! Inspiration and an introduction to the world of mapping - Colby Fayock" />
<meta property="og:description" content="Chef Gusteau was a visionary who created food experiences for the world to enjoy. How can we take his lessons and apply them to the world of…" />
<meta property="og:url" content="https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/" />
<meta property="og:type" content="article" />
<meta property="article:publisher" content="https://www.colbyfayock.com" />
<meta property="article:section" content="Coding" />
<meta property="article:tag" content="Coding" />
<meta property="og:image" content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1" />
<meta property="og:image:secure_url" content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1" />
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="640" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1" />
<meta property="twitter:site" content="@colbyfayock" />

原文链接 #

https://www.freecodecamp.org/news/what-is-open-graph-and-how-can-i-use-it-for-my-website

YepW's ProseLog