盖茨比：在 facebook 上分享 -> 图片太小答案

【问题标题】：Gatsby: sharing on facebook -> image is too small盖茨比：在 facebook 上分享 -> 图片太小
【发布时间】：2019-06-25 17:53:43
【问题描述】：

我有一个使用 Gatsby 构建的博客，我正在尝试为帖子添加共享功能。

我知道 facebook 要求将图片添加到共享卡中的标题顶部，而不是标题的一侧。

当我查看 facebook 调试器时，我发现共享卡看起来不错（标题顶部的大图）。你可以在这里查看https://developers.facebook.com/tools/debug/og/object/?q=https%3A%2F%2Fkeen-leakey-7a99fa.netlify.com%2Ffamous-vietnamese-fruits%2F

当我尝试分享帖子时，分享卡实际上更小。

我认为og:image:width 和height 标记不存在于meta 中可能是个问题，但添加它们后它们似乎没有做任何事情。

这些是我的元数据中的一些属性

 { property: `og:url`, content: url },
 { property: `og:type`, content: `image/png` },
 { property: `og:image:width`, content: `1200` },
 { property: `og:image:height`, content: `630` },
 { property: `og:image`, content: image },
 { property: `og:title`, content: title },
 { property: `og:description`, content: metaDescription },

知道可能是什么问题吗？

【问题讨论】：

标签： javascript reactjs facebook-opengraph gatsby

【解决方案1】：

Facebook 爬虫会尝试跟踪您的 og:url 标签 - 指向 https://elingos.com - 并且没有定义图像 - 当您修复 URL 时它应该可以工作！

我使用Preview Plugin 对其进行了检查，然后将该图像与直接来源进行了比较！

编辑 - 调试此 URL 的更好方法：

同样在未来，您可以使用Facebook Sharing Debugger 在这里您可以在“重定向路径”下看到它转到另一个 URL :)

【讨论】：