打开共享时动画的图形 GIF

Question

是否可以

构建网站的og元标记，以便在将网站链接共享到Facebook时，预览图像（gif）会自动动画化？

在这里和这里讨论了 Giphy 是如何实现它的，基本上是将 gif 包装在一个 swf 文件中。但是现在是2016年，所以有没有更好（和支持）的方式来实现这一目标？我在 facebook 文档中找不到任何内容，我想将我的 og:type元标记保留为具有 website 的值。

这是我的元标签配置 obejct 的一个片段（我使用 React Helmet 来填充标签）：

  { property: 'fb:app_id', content: 'some_app_id' },
  { property: 'og:description', content: 'My site's description' },
  { property: 'og:image', content: 'http://example.com' },
  { property: 'og:image:type', content: 'image/gif' },
  { property: 'og:title', content: 'My Site' },
  { property: 'og:url', content: 'http://example.com' },
  { property: 'og:type', content: 'website' },
  { property: 'og:image:width', content: '657' },
  { property: 'og:image:height', content: '411' },
  { charset: 'utf-8' },
  { property: 'og:site_name', content: 'My Site' },
  { property: 'og:locale', content: 'en_US' },

Answer 1

去年夏天我研究过这个问题。 我的理解是，您必须将图像包装在SWF文件或javascript视频播放器中（据我所知，实际上只是一个javascript程序）。 许多大玩家（查看任何YouTube页面）将有多种方式使用OG呈现他们的内容 - 包括SWF，javascript播放器，只是作为图像等，这样当他们被查看的设备可能没有能力使用一种或多种方法时，它可以回退到另一种方法 - 即优雅地降级。

这是一个YouTube标题（有点矫枉过正？

 <meta property="og:site_name" content="YouTube">
      <meta property="og:url" content="https://www.youtube.com/watch?v=UKOpnK5fC4k">
    <meta property="og:title" content="Pearl Jam 10-16-2014 Detroit Mi Full Show Multicam SBD Blu-Ray">
    <meta property="og:image" content="https://i.ytimg.com/vi/UKOpnK5fC4k/maxresdefault.jpg">
      <meta property="og:description" content="Pearl Jam 10-16-2014 Detroit Michigan Full Show Multicam SBD Blu Ray 2014 Lightning Bolt Tour Full Show Blu Ray Torrent (Added 06-05-2015) Option 1 - http://...">
    <meta property="al:ios:app_store_id" content="544007664">
    <meta property="al:ios:app_name" content="YouTube">
      <meta property="al:ios:url" content="vnd.youtube://www.youtube.com/watch?v=UKOpnK5fC4k&amp;feature=applinks">
      <meta property="al:android:url" content="vnd.youtube://www.youtube.com/watch?v=UKOpnK5fC4k&amp;feature=applinks">
    <meta property="al:android:app_name" content="YouTube">
    <meta property="al:android:package" content="com.google.android.youtube">
    <meta property="al:web:url" content="https://www.youtube.com/watch?v=UKOpnK5fC4k&amp;feature=applinks">
    <meta property="og:type" content="video">
        <meta property="og:video:url" content="https://www.youtube.com/embed/UKOpnK5fC4k">
        <meta property="og:video:secure_url" content="https://www.youtube.com/embed/UKOpnK5fC4k">
        <meta property="og:video:type" content="text/html">
        <meta property="og:video:width" content="1280">
        <meta property="og:video:height" content="720">
        <meta property="og:video:url" content="http://www.youtube.com/v/UKOpnK5fC4k?version=3&amp;autohide=1">
        <meta property="og:video:secure_url" content="https://www.youtube.com/v/UKOpnK5fC4k?version=3&amp;autohide=1">
        <meta property="og:video:type" content="application/x-shockwave-flash">
        <meta property="og:video:width" content="1280">
        <meta property="og:video:height" content="720">
        <meta property="og:video:tag" content="Pearl Jam (Musical Group)">
        <meta property="og:video:tag" content="Pearl Jam">
        <meta property="og:video:tag" content="PJ">
        <meta property="og:video:tag" content="Full Show">
        <meta property="og:video:tag" content="Full Concert">
        <meta property="og:video:tag" content="HD">
        <meta property="og:video:tag" content="Blu Ray">
        <meta property="og:video:tag" content="Live">
        <meta property="og:video:tag" content="Eddie Vedder (Musical Artist)">
        <meta property="og:video:tag" content="Black">
        <meta property="og:video:tag" content="Alive">
        <meta property="og:video:tag" content="Even Flow">
        <meta property="og:video:tag" content="Sirens">
        <meta property="og:video:tag" content="Complete Concert">
        <meta property="og:video:tag" content="Frozen Let It Go">
        <meta property="og:video:tag" content="Pearl Jam Concert">
        <meta property="og:video:tag" content="Pearl Jam Full Show">
        <meta property="og:video:tag" content="Pearl Jam Full Concert">
        <meta property="og:video:tag" content="Pearl Jam 2014">
        <meta property="og:video:tag" content="Pearl Jam 10-16-2014">
        <meta property="og:video:tag" content="Pearl Jam 16-10-2014">
        <meta property="og:video:tag" content="10-16-2014">
        <meta property="og:video:tag" content="16-10-2014">
        <meta property="og:video:tag" content="Pearl Jam Detroit Full Show">
        <meta property="og:video:tag" content="Pearl Jam Detroit 2014">
        <meta property="og:video:tag" content="10-16-2014 Detoit">
        <meta property="og:video:tag" content="Pearl Jam Joe Louis Arena">
        <meta property="og:video:tag" content="Pearl Jam Michigan">
        <meta property="og:video:tag" content="PJ Detroit">
        <meta property="og:video:tag" content="Joe Louis Arena">