logo标签列表

开放图谱 og:video 元标签内容

facebookfacebook-opengraph
36
我正在尝试设置一个页面，使其在被分享/点赞时可以被 Facebook 正确地抓取。该页面将与YouTube视频相关，因此在og:video标签的内容属性中，我应该放置YouTube视频嵌入链接还是实际的 YouTube 页面链接，以便在 Facebook 上出现具有播放视频预览按钮的预览效果？希望有人能帮忙！谢谢！
上次Facebook更改了视频规则，您需要将YouTube视频的分享URL从http更改为https。 - Mendyaev Nick
OG标签的实现有没有改变？我正在尝试实现与之前相同的OG标签，但仅添加了描述，而没有播放选项。当单击后它会重定向到URL。 - NetStarter
6个回答
41
你有两个选项。你可以将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的链接结构与通常的链接不同。您需要从YouTube链接中分离出“v”查询，并在上面显示的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信息。所有内容都将看起来像YouTube，除了链接将点击到https://www.keithandthegirl.com/vip/bonus/episode/9/40/this-is-40 另一个要点是：确保使用https而不是http。Facebook不会在网站上嵌入任何非安全视频。
我仍然在您的页面上看到这些元标记，但是如果我将URL放入Facebook中，我只会看到一些棒人的图像预览，而不是视频... - David Zemens
1
这些简笔画是视频的预览缩略图。如果您在Facebook上分享链接，您应该能够看到预览缩略图，并能够点击它以播放视频。您必须实际分享才能看到其完整效果。 - Michael Khalili
既然你似乎比我更了解这个问题，如果你有空的话，我遇到了在实现你的解决方案时遇到了困难。我已经将它作为一个新问题发布在这里：http://stackoverflow.com/questions/27116133/difficulty-with-opengraph-for-facebook-embedded-video - David Zemens
19
以下是我找到的：
使用Facebook的Open Graph协议，发布者现在可以使用任何URL中的任何视频，只要该URL在其HTML的中具有正确格式化的元数据。以下是应该在中包含的信息列表：
- 缩略图图像的URL：
<meta property="og:image" content="image_src URL">

  • 视频文件的URL（例如SWF，MP4等）：

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

  • 您的网页URL:

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

  • Title:

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

  • Description:

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

  • 视频像素宽度：

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

  • 视频像素高度：

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

  • 内容类型：

    • <meta property="og:type" content="video">
    1
    很好的总结，应该是被采纳的答案。另外值得注意的是，原始文档位于https://developers.facebook.com/docs/sharing/webmasters/#video。 - adjwilli
    视频必须是SWF格式的吗？ - Suan
    11

    您可以从 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/

    1
    请注意，这些标签不会出现在禁用嵌入的YouTube视频上。 - Tamlyn
    1
    你还需要使用HTTPS而不是HTTP。更多细节请参考我的回答https://dev59.com/82865IYBdhLWcg3wYNZS#17811187。 - Michael Khalili
    6
    <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


    （注意：这个链接可能需要翻墙）
    2
    这个链接指向一个托管的flv视频文件，但如果我们想分享一个YouTube视频呢？ - David Ball
    1
    这并没有回答如何关联YouTube视频的问题。 - Michael Khalili
    0

    对于那些在 Facebook 提供的调试器上遇到问题的人，请注意以下内容：

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

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

    -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 也会有帮助 - 我不完全确定哪一个起了作用，但是这样做可以解决问题 :)

    1
    你最终放在<og:video>标签里了什么？YouTube的URL吗？另外，你在video_src标签里放了什么？ - Tom Lehman
    Daniel Hough，你在这里并没有真正回答你的问题... 你没有指定用于视频源的URL。 - Felipe Brahm
    我使用的URL，如果我没记错的话 - 它是FLV文件的URL。 - basicallydan
    @DanielHough，你能否提供一个可工作的Opengraph示例？我的意思是嵌入一个真实的YouTube视频的标记。 - themihai
    这不是应该使用的方式。应该使用YouTube目前正在使用的标签，正如@larsen161所解释的那样。 - Ivo Pereira
    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接