wordpress - 在Facebook上与视频共享URL不显示描述/标题

Question

我叫麦克。谢谢你的帮助。

在Wordpress中，我们已经设计了我们的网站，以便在Facebook调试器中og数据尽可能接近youtube。尽管如此，在Facebook上共享视频的方式还是不同的。尽管我们网站共享的预览很好，但实际共享本身却不是。比较一下:

注意:在scaper中，我们的“共享时，这就是要包含的内容”预览看起来不错，但是实际共享时，这并不是我们所能得到的。

步骤1:
YouTube URL共享预览:包括视频，标题和描述的缩略图
AccentR URL共享预览:全幅视频，无标题，无说明

第2步:
Youtube分享已发布:包括视频，标题和描述的缩略图
AccentR份额已发布:(与步骤1相同)

第三步:
从共享播放的YouTube视频:视频宽度增加到Facebook墙的宽度，视频下方自动显示标题和描述
从共享播放的Accentr视频:您必须单击视频两次(一次才能将其发送到youtube，再次单击以使其播放*)，标题和说明仍不会出现

请在Facebook调试器上查看以下各项的并排比较:
http://www.accentreductionnow.com/pronounce-th-sounds/

和

https://www.youtube.com/watch?v=shcQojmaIFs

我们已尝试使“这些是我们找到的原始标签”部分中的og标签尽可能与youtube相同，包括它们的显示顺序(不包括android和ios标签)。据我们所知，我们已成功完成工作，但共享问题仍然存在。

这是定义og标签的php:

    function insert_fb_in_head() {
        global $post;
        $youtube = get_post_custom_values('youtube');
        $youtubeID = get_post_custom_values('youtubeID');
        $postmeta = htmlspecialchars(get_post_meta($post->ID, '_su_description', true));
        $postpermalink = get_permalink();
        $posttitle = get_the_title();
        if ( !is_singular()) { //if it is not a post or a page
    return;
        }
        echo '<meta property="og:site_name" content="Accent Reduction Now" />'; 
        echo '<meta property="og:url" content="' . $postpermalink . '" />';     
        echo '<meta property="og:title" content="' . $posttitle . '" />';   
        if(!has_post_thumbnail( $post->ID )) { 
            if ($youtube) {   
            echo '<meta property="og:image" content="http://i.ytimg.com/vi/'.$youtubeID[0].'/maxresdefault.jpg" />';
            }
            else {
            $default_image="http://www.blah.png"; 
            echo '<meta property="og:image" content="' . $default_image . '"/>';
            }
        }
        else{
        $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
        echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
        }

        echo '<meta property="og:description" content="' . $postmeta . '"/>';

        if($youtube) {
            echo '<meta property="og:type" content="video" />';
        }
        else {
          echo '<meta property="og:type" content="article" />';
        }
        if($youtube) {
        // TEXT/HTML version
        echo '<meta property="og:video:url" content="https://www.youtube.com/embed/'.$youtubeID[0].'" />';
        echo '<meta property="og:video:secure_url" content="https://www.youtube.com/embed/'.$youtubeID[0].'" />';
        echo '<meta property="og:video:type" content="text/html" />';
        echo '<meta property="og:video:width" content="1280" />';
        echo '<meta property="og:video:height" content="720" />';
        // SHOCKWAVE version
        echo '<meta property="og:video:url" content="http://www.youtube.com/v/'.$youtubeID[0].'?version=3&amp;autohide=1" />';
        echo '<meta property="og:video:secure_url" content="https://www.youtube.com/v/'.$youtubeID[0].'?version=3&amp;autohide=1" />';
        echo '<meta property="og:video:type" content="application/x-shockwave-flash" />';
        echo '<meta property="og:video:width" content="1280" />';
        echo '<meta property="og:video:height" content="720" />';
        // og:video:tags          
        echo '<meta property="og:video:tag" content="Pronunciation (Website Category)" />';
        echo '<meta property="og:video:tag" content="English Phonology" />';
        echo '<meta property="og:video:tag" content="Lesson" />';
        echo '<meta property="og:video:tag" content="learn" />';
        echo '<meta property="og:video:tag" content="Lessons" />';
        echo '<meta property="og:video:tag" content="Education" />';
        // fb:app_id        
        echo '<meta property="fb:app_id" content="475649032509250" />'; 
    }
        add_action( 'wp_head', 'insert_fb_in_head', 5 );

注意:尽管刮板说Youtube将og:video:url设置为

youtubeurl ... / embed / shcQojmaIFs

它以某种方式变成

youtubeurl .... / embed / shcQojmaIFs？autoplay = 1

在调试器的“共享类型”部分中。怎么样？这可以解决上面第3步中的问题，但是我们不知道这种变化是如何发生的。

谢谢您能为这张初次发布的海报提供任何帮助。

Answer 1

我不确定为什么即使标签相同，两者渲染方式也不同。经过试验后，我发现一种骇人听闻的解决方案(使用YouTube的文本和说明来渲染共享对话框)类似于og:image标记，使用正方形图片大于200 x 200像素。
例如，我尝试了这个:

// using Marvin icon for example purposes
<meta property="og:image" content="http://findicons.com/files/icons/206/looney_tunes/300/marvin_martian.png" />