33

我正在尝试设置一个页面，当它被共享/喜欢时，它可以被 Facebook 正确抓取。该页面将有一个与之关联的 YouTube 视频，因此在 og:video 标签的内容属性中，我应该将 YouTube 视频嵌入链接或实际的 youtube 页面链接放置在 Facebook 上，并带有小的“预览”按钮在 Facebook 播放视频？

希望有人能帮忙！谢谢！

4

6 回答 6

39

你有两个选择。您可以将 设置og:video为https://www.youtube.com/v/YOUTUBECODE或将 设置og:url为 YouTube 页面。

在我的示例中，我将此视频https://www.youtube.com/v/BQBjVr1iHH4嵌入到以下页面https://www.keithandthegirl.com/vip/bonus/episode/9/40/this-is -40。每当有人在 Facebook 上分享我的页面时，我希望 Facebook 显示 YouTube 视频。

选项 1：设置og:video为https://www.youtube.com/v/YOUTUBECODE

元标记看起来像

<meta property='og:video' content='https://www.youtube.com/v/BQBjVr1iHH4' />

请注意，YouTube URL 的结构不同于典型的 URL。您需要将“v”查询从 YouTube 链接中分离出来，并以og:video我上面显示的链接格式使用它。在我的示例中， 的v值为BQBjVr1iHH4。

选项 2：将 设置og:url为 YouTube 页面。

如果您没有能力隔离v代码，您可以将og:url标签设置为 YouTube 页面。在我的示例中，它看起来像这样：

<meta property='og:url' content='https://www.youtube.com/watch?v=BQBjVr1iHH4' />

这将告诉 Facebook 从https://www.youtube.com/watch?v=BQBjVr1iHH4获取 Open Graph 标签并在嵌入中使用它。这意味着描述和标题将来自 YouTube 页面。但是，如果有人点击该链接，他们就会访问您的网站。

在我的示例中，如果有人在我使用第二个选项https://www.keithandthegirl.com/vip/bonus/episode/9/40/this-is-40时粘贴以下链接，Facebook 将看到 URL 设置为 YouTube并查询该 YouTube 链接以获取 OG 信息。除了链接将点击到https://www.keithandthegirl.com/vip/bonus/episode/9/40/this-is-40之外，一切看起来都像 YouTube

另一个注意事项：确保使用https，而不是http。Facebook 不会在网站上嵌入任何不安全的视频。

于 2013-07-23T13:11:04.543 回答
14

这是我发现的：

使用 Facebook 的开放图形协议，Publisher 现在可以使用来自任何 URL 的任何视频，只要该 URL 在 <head>其 HTML 中具有正确格式的元数据。以下是应包含在 中的信息列表<head>：

  • 缩略图的网址：

    <meta property="og:image" content="image_src URL">

  • SWF 网址：

    <meta property="og:video" content="video_src URL">

  • 您的网页网址：

    <meta property="og:url" content="URL">

  • 标题：

    <meta property="og:title" content="title">

  • 描述：

    <meta property="og:description" content="description">

  • 视频像素宽度：

    <meta property="og:video:width" content="video_width">

  • 视频像素高度：

    <meta property="og:video:height" content="name="video_height">

  • 内容类型：

    <meta property="og:type" content="video">
于 2012-12-14T00:45:58.303 回答
10

从一个YouTube页面的源代码中可以看到，og:video标签的格式如下

<meta property="og:video" content="http://www.youtube.com/v/k86xpd26M2g">

您还可以在以下 URL 的源代码中看到简化的 YouTube 使用的元数据示例：http: //fb.stevelarsen.co.uk/example.html

您可以在此处阅读有关 Open Graph 协议的更多信息：http: //ogp.me/

于 2012-01-23T15:40:29.967 回答
5 
<html xmlns:og="http://ogp.me/ns#"> 
    <head>
        <!-- ... -->
        <!-- [REQUIRED TAGS] -->
        <meta property="og:video" content="http://example.com/awesome.flv" />
        <meta property="og:video:height" content="640" />
        <meta property="og:video:width" content="385" />
        <meta property="og:video:type" content="application/x-shockwave-flash" />
        ...
    </head>

.flv 文件的链接....查看https://developers.facebook.com/docs/opengraph/#types

于 2011-04-12T16:24:40.093 回答
0

对于那些偶然发现 facebook 提供的调试器的人，请注意以下几点：

当您登录到调试器时，您处于 https 会话中。为了在调试中看到您的视频，您需要在 meta 中添加视频的安全 url。添加 youtube 视频很容易，只需将页面 url 放入 og:url 即可。

花了一个小时得出这个结论。太晚了，我太累了，现在想睡觉:)

于 2014-05-09T17:26:31.087 回答
-4

我想到了。我查看了 Collegehumor.com 是如何做到的，其中包含了一些 Facebook API 中未提及的内容。而不仅仅是以下内容：

<meta name="og:video" content="whatever"></meta>
<meta name="video_style" content="whatever"></meta>
<meta name="video_height" content="whatever"></meta>
<meta name="video_width" content="whatever"></meta>

你也需要link rel="video_src"，拥有它也videothumbnail很有帮助og:image——我不完全确定是哪一个做到的，但你去吧。这样可行 ：）

于 2010-10-04T14:16:10.520 回答