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

Question

我有一个用 Gatsby 构建的博客，我正在尝试向 post 添加共享功能。

我知道 facebook 需要一定的尺寸才能将图像添加到共享卡标题的顶部，而不是标题的侧面。

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

当我尝试分享 post 时，分享卡实际上变小了。

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

这些是我在 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 },

知道问题出在哪里吗？

Answer 1

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

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

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

同样在未来，您可以使用 Facebook Sharing Debugger 这里您可以在 "redirect-path" 下看到它转到另一个 URL :)

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

Gatsby: sharing on facebook -> image is too small

javascript

facebook-opengraph

reactjs

gatsby