为Facebook优化您的网站

在本教程中,我们将看到如何利用Facebook的Open Graph来使我们的网站更加友好。这样做有很多优点,但主要是它允许您的外部网页等同于Facebook页面。因此,当用户“喜欢”您的页面时,您的页面与用户之间会建立连接。然后,您的页面将显示在用户配置文件的“喜欢和兴趣”部分中,您还可以向用户发布更新。您还可以定义整体显示的副本和缩略图。

那么我们如何实现这一目标呢?这简直太简单了。通过提供结构化数据集(使用开放图谱协议),您可以定义您的网站在Facebook中的表示方式。

Showing the correlation between Open Graph and Facebook

显示Open Graph和Facebook之间的相关性

简而言之,打开图形协议

Open Graph Protocol最初由Facebook创建。初始版本基于RDFa(或资源描述框架 - 属性),这是一种额外的放置方式标签到一个网页,使它成为一个宾语在社交图中,在这个例子中Facebook。它是使用现有的开放标准构建的,旨在创建更加语义的Web。

The Open Graph Protocol explained at http://ogp.me

开放图谱协议在http://ogp.me上解释

入门

要开始并将页面转换为图形对象,只需添加相应的Open Graph协议即可标签和页面的“赞”按钮。

稍后我们将介绍嵌入“赞”按钮,但首先我们需要处理用于定义页面对象的标签。

我们使用的标签构造起来非常简单,如下所示:

您可以看到,无论如何,这都是有效的元标记。我们所做的就是使用自定义属性属性OG:财产。属性本身由Open Graph协议定义,几乎涵盖了定义页面所需的所有内容(我们将在稍后详细介绍它们)。

Open Graph协议有四个必需的属性:

OG:标题- 对象的标题(例如,“Open Graph Tutorial”)
OG:类型- 您的对象的类型(例如,“文章”)
OG:图像- 表示对象的图像
OG:网址- 对象的规范URL

这些要求需要考虑几个要点:

类型 - 从支持的类型列表中,它必须始终是有效的对象类型
图像 - 您的图像必须至少为50像素×50像素,最大比例为3:1
URL - 这将用作图表中唯一且永久的ID

值得注意的是,您可以提供多种产品Og:图像字段;当用户“分享”或“喜欢”您的页面时,他们可以选择使用哪个图像在其个人资料Feed中表示您的页面。

除了这些要求之外,Facebook还扩展了基本元数据以添加另外两个必填字段,以便将您的页面连接到Facebook:

OG:SITE_NAME- 您网站的可读名称(例如“.net Magazine”)
fb:admins或fb:app_id- 以逗号分隔的Facebook用户ID或应用程序ID列表

你会注意到最后一个以'为前缀'FB' 代替 'OG”。这是因为它允许Facebook绑定可以管理页面的确切用户ID或应用程序ID。将两者都包含在您的页面上是有效的,或者如果它们不适用,您可以简单地将它们排除在外。

Facebook建议您包含另一个属性,即描述标记:

OG:描述- 页面的简短(一至两句)描述。

包括description属性是一种很好的方式,可以立即将有关您页面的额外信息提供给其他人。

将基础知识放在一起

在消化了所有这些之后,将它们放在一起形成一个有效的Open Graph对象时,看看它们的外观是有意义的。我将使用我在我的一个个人页面上嵌入的代码,用于推广我做的一些混音:

如您所见,添加到现有页面非常简单。我的网站运行了一个基本的模板系统,所以我只需要将标签添加到原始模板文件中,并且网站根据需要为每个组合完成它们。

Sharing from my

使用Open Graph Data从我的“混音”页面进行共享

在我的Open Graph代码中,我将类型指定为“mix”。您将从即将到来的列表中注意到“mix”实际上并不是一个已定义的对象类型:这是图表中可接受的用法,我将在稍后解释。我还在图表中指定了我的Facebook用户ID作为此特定对象的管理员。

选择正确的Open Graph类型

要使对象在图形中表示,您需要指定其类型。正如我们所见,这是使用og:type属性完成的。可用的受支持对象类型属于八个一揽子组,如下所示:

活动

  • 活动
  • 运动

企业

  • 酒吧
  • 公司
  • 咖啡店
  • 旅馆
  • 餐厅

  • 原因
  • Sports_league
  • 运动队

组织

  • 政府
  • 非营利
  • 学校
  • 大学

  • 演员
  • 运动员
  • 作者
  • 导向器
  • 音乐家
  • 政治家
  • 轮廓
  • Public_figure

地方

  • 国家
  • 里程碑
  • 州(省)

产品和娱乐

  • 专辑
  • 餐饮
  • 游戏
  • 电影
  • 产品
  • 歌曲
  • 电视节目

网站

  • 文章
  • 博客
  • 网站

对于具有UPC代码或ISBN编号的产品,您还可以使用OG:UPCOG:ISBN属性。

对于属于“网站”类别的内容,Facebook建议如下:
“使用的文章任何代表瞬态内容的网址 - 例如新闻报道,博文,照片,视频等。请勿使用网站以此目的。网站博客旨在代表整个网站,OG:类型标签与类型网站要么博客通常应该只出现在域的根目录上。“

这个列表应该适用于大多数人和页面:但是,有时候某个特定的对象类型不太合适(根据我的“混音”示例);在这些情况下,您可以指定自己的类型。这样做的缺点是这些类型将在Facebook中表示为“其他”。

Facebook表示,它将主动监控最常用的类型并将其添加到支持列表中OG:类型在适当的时候。

Facebooks example of Open Graph tags on IMDb

Facebook在IMDb上的Open Graph标签示例

扩展元数据

对于某些页面,我们可能希望包含有关该对象的其他数据,例如咖啡馆,公司或酒店的位置。 Open Graph允许您通过创建所需数量的og:属性来满足此要求,以便提供有关您的网页的其他上下文。

假设我们已经建立了一个页面并创建了一个关于我们公司的对象,这是伦敦的一家餐馆。然后,我们可以通过提供自己的自定义属性,将我们位置和联系人数据的其他详细信息添加到图表中:

然后,我们还提供预订和查询的详细联系信息:

通过以这种方式将其他元数据与我们所需的属性相结合,我们可以在图表中提供大量有价值的数据。

我们还能提供什么?

我很高兴你问。 Open Graph还允许您直接附加音频或视频。比如说,你说你是一个乐队(或者甚至负责推广他们),你刚刚发布了一首新曲目。您希望获得最大的曝光率,通过直接附加媒体,您可以非常轻松地最大化您的受众。

当有人继续“赞”或“分享”您的页面时,音频将直接在该用户的帖子中提供。这将允许他们的任何朋友直接从他们的个人资料页面收听该曲目。

如果我们想要推广乐队的新音乐视频,我们可以做以下事情:

高度宽度类型在这种情况下是可选的,但重要的是要注意,此时Facebook仅支持SWF格式的视频嵌入。

如果您希望视频显示在新闻Feed中,则需要在标记中包含有效的og:image标记。

更新Open Graph标记

一旦您的对象进入Facebook,您就可以自由更新页面的Open Graph标签正常。

值得注意的是,这一点非常重要OG:标题OG:类型最初只能编辑:一旦你的页面收到50“喜欢”OG:标题属性在图中变得固定。当你的页面继续接收10,000“喜欢”时OG:类型变得固定。

如果您修改了这些属性的数据,则更改将不会在Facebook中显示,因为它将保留其原始值。 Facebook这样做是为了防止您对已经喜欢您网页的用户感到惊讶或困惑。

在部署之前进行测试

正如我相信您已经知道的那样,开发的核心规则之一就是在进行任何实际操作之前进行测试,测试和重新测试。虽然标签不会直接影响页面上的任何内容,它们确实会对Facebook产生影响。拥有无效的标签或属性会阻止您的网页被正确显示,并且可能包含错误的信息,或者更糟糕的是,没有信息:毕竟,最大限度的曝光就是它的全部内容。

Facebooks URL Linter is a dab hand at debugging your meta data

Facebooks URL Linter是调试元数据的一种方法

幸运的是,Facebook提供了一个有用的工具。在Open Graph测试的情况下,它是官方Facebook URL Linter:

developers.facebook.com/tools/lint

输入新的支持Open Graph的URL(或测试URL),按“Lint”,Facebook将检索您的内容,解析您的标签并验证您的信息。如果发现任何不当之处,您将看到警告和/或错误列表,这样您就可以确切地知道从哪里开始更正您的标签。根据需要编辑标签,然后只需在linter中重新测试。

您可以根据需要多次测试页面,以使其具有出货状态且无错误。

在页面中添加“赞”按钮

拼图中的最后一部分是允许用户轻松“共享”或“喜欢”外部页面的功能。 Facebook知道(以编程方式)实现的难度越大,人们就越不可能做到这一点。考虑到这一点,Facebook开发了一个非常简单的工具来帮助您在页面上创建和实现“赞”按钮:

developers.facebook.com/docs/reference/plugins/like/

基本上有两个“喜欢”的实现:XFBML和Iframe。 XFBML版本更通用,但要求您在页面上加载Facebook JavaScript SDK。 Iframe版本仍然为您提供核心使用,但不允许事件监听或动态重新调整大小。您应该选择最适合您页面的方法。

It doesnt get easier than this in generating your

在生成“Like”嵌入代码时,这并不容易

生成代码后,您只需将其粘贴到您的网站即可。刷新您的页面,您应该看到所有熟悉的“赞”按钮为您的网站增添光彩。

跟你的标记所有设置和闪亮的全新“赞”按钮,您现在应该准备好将全新的Open Graph对象部署到全世界。



翻译字数超限