打开图 og:video 元标签内容

发布于 2024-09-25 16:55:31 字数 198 浏览 3 评论 0原文

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

希望有人可以帮忙！谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

此生挚爱伱 2024-10-02 16:55:31

你有两个选择。您可以将 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 获取 Open Graph 标签： //www.youtube.com/watch?v=BQBjVr1iHH4 并在嵌入中使用它。这意味着描述和标题将来自 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 不会在网站上嵌入任何不安全的视频。

You have two options. You can either set the og:video to https://www.youtube.com/v/YOUTUBECODE or set the og:url to the YouTube page.

In my examples, I'm embedding this video https://www.youtube.com/v/BQBjVr1iHH4 in the following page https://www.keithandthegirl.com/vip/bonus/episode/9/40/this-is-40. I would like Facebook to show the YouTube video whenever anyone shares my page on Facebook.

Option 1: setting the og:video to https://www.youtube.com/v/YOUTUBECODE

The meta tag will look like

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

Notice the structure of the YouTube URL is different than the typical URL. You will need to isolate the "v" query from the YouTube link and use it in the og:video link format I showed above. In my example, the value of v is BQBjVr1iHH4.

Option 2: setting the og:url to the YouTube page.

If you don't have the ability to isolate the v code, you can set the og:url tag to the YouTube page. In my example, it would look like this:

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

This will tell Facebook to get the Open Graph tags from https://www.youtube.com/watch?v=BQBjVr1iHH4 and use that in the embed. That means the description and title will come from the YouTube page. However, if someone clicks the link, they'll go to your website.

In my example, if someone pastes the following link while I use the second option https://www.keithandthegirl.com/vip/bonus/episode/9/40/this-is-40 Facebook will see the URL is set to YouTube and query that YouTube link for the OG info. Everything will look like YouTube except the link will click to https://www.keithandthegirl.com/vip/bonus/episode/9/40/this-is-40

One other note: make sure to use https, not http. Facebook will not embed any non-secure video on the site.

回复收藏 0 原文

╭ゆ眷念 2024-10-02 16:55:31

以下是我的发现：

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

缩略图的 URL：
视频文件 URL（例如 SWF、MP4、..）：
您页面的 URL：
标题：
描述：
视频像素宽度：
视频像素高度：
内容类型：

Here's what I found:

Using Facebook's Open Graph Protocol, Publisher can now use any video from any URL, as long as the URL has correctly formatted metadata in the <head> of its HTML. Here's the list of information that should be in the <head>:

Thumbnail image's URL:

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

Video file URL (e.g. SWF, MP4, ..):

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

Your page's URL:
```
<meta property="og:url" content="URL">
```

Title:

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

Description:

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

Video pixel width:

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

Video pixel height:

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

Content Type:

<meta property="og:type" content="video">

回复收藏 0 原文

前事休说 2024-10-02 16:55:31

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

You can see from the source code of a YouTube page, the og:video tag is in the following format

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

You can also see an example of the metadata used from YouTube simplified in the source code of the following URL: http://fb.stevelarsen.co.uk/example.html

You can read more about the Open Graph protocol here: http://ogp.me/

回复收藏 0 原文

回眸一遍 2024-10-02 16:55:31

<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

<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>

The link of the .flv file.... check out https://developers.facebook.com/docs/opengraph/#types

回复收藏 0 原文

萧瑟寒风 2024-10-02 16:55:31

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

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

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

回复收藏 0 原文

那一片橙海， 2024-10-02 16:55:31

我想通了。我查看了 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 也会有所帮助 - 我'我不太确定是谁干的，但你就知道了。这有效:)

I figured it out. I had a look at how Collegehumor.com does it and they include a bunch of stuff not mentioned in the Facebook API. Rather than just the following:

<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>

you also need link rel="video_src" and it helps to have videothumbnail and og:image too - I'm not entirely sure which one did it but there you go. That works :)

回复收藏 0 原文

~没有更多了~