Question

我有一个网页（在Wordpress下），我想根据查询字符串参数在Facebook帖子中显示不同的预览图像。

为此，在我的<head>标签中，我有：

<?php 
    $image = wp_get_attachment_image_src( get_post_thumbnail_id( $_GET['lbcid'] ), 'single-post-thumbnail' ); 
?>

<meta property="og:url"                content="http://uat1.one-pager.sugarloafculinary.com/?lbcid=6957" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="Test Title" />
<meta property="og:description"        content="Description Here" />
<meta property="og:image"              content="<?php echo $image[0] ?>" />

$image[0]输出有效的URL，但是当<meta>属性的值由PHP动态输出时，Facebook似乎完全忽略了content标签。而是在页面上选择符合要求的第一张图像。我已经进入FB调试工具并重新进行了草稿-这没有影响（在此问题上）。

当我对content属性的值进行硬编码时，它会按预期显示。例如：

<meta property="og:image" content="http://uat1.one-pager.sugarloafculinary.com/wp-content/uploads/2018/07/blog_bulgar-pudding.jpg" />

您可以在http://uat1.one-pager.sugarloafculinary.com/?lbcid=6957上看到它的运行情况。如果您查看源代码，则会看到在该<meta>标记中有一个有效的（动态生成的）URL，但是如果您在FB Sharing Debugger中测试该页面，则会看到没有显示指定的图像。

任何人都可以在我的代码中看到任何错误吗？有一些技巧可以使它起作用吗？也许是Wordpress的东西？（我尚未在WP之外进行测试）。

编辑：
请参见下面的可接受答案。上面URL上的代码已被修改以解决问题，因此它们将不再说明问题。一个简单的解决方案：FB刮板在og：image的第一个实例处停止，而我的是第二个，因此被忽略。

Answer 1

使用Facebook调试器https://developers.facebook.com/tools/debug，似乎图像已成功生成，facebook可以读取

<meta property="og:image" content="http://uat1.one-pager.sugarloafculinary.com/wp-content/uploads/2018/06/logo_horz1-e1530285280453.png" />
<!--this image is less than 200*200px -->

调试器告诉的错误是图像小于200px * 200px 如果您使用较大的图像可以解决问题

编辑：修改代码后，我发现很多人在og:image上生成了   代码

FB占据第一个，而忽略其余的。前og:image很小，所以   错误发生

修改您的插件和主题以消除不必要的og:image

og：当PHP动态生成图像URL时，图像将被忽略

1 个答案: