Question

是否可以构建网站的og元标记，以便当网站链接与Facebook共享时，预览图像（gif）会自动动画？

Here＆amp; here它通过基本上将gif包装在swf文件中来讨论Giphy如何完成它。但是2016年是否有更好（和支持）的方式来实现这一目标？我在facebook文档中找不到任何内容，并且我希望将og:type元标记保留为website的值。

这是我的metatag配置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">

打开共享时动画的图形Gif

1 个答案: