时间戳

首页 > 解决方案 > 盖茨比：在 facebook 上分享 -> 图片太小

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

问题描述

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

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

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

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

我认为这可能是og:image:widthandheight标签不存在的问题，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 },

关于可能是什么问题的任何想法？

标签： javascriptreactjsfacebook-opengraphgatsby

解决方案

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

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

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

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

推荐阅读