Twitter 卡片图像不适用于 Gatsby 应用程序

Question

我正在使用 Netlify CMS(并托管在 Netlify 上)开发 Gatsby 应用程序。尝试使元数据正常工作，以便 Twitter 卡片与图像一起正确显示。
元数据通常没问题，但图像没有显示在 Twitter 验证器上，或者如果我尝试发布到 Twitter。问题显然是图像本身，这些图像托管在网站上，使用 Gatsby 和 Gatsby Image Sharp 进行渲染。
事实上，the validator似乎没有显示出根本问题。简单地说，图像不显示:

相关元数据示例:

<meta name="twitter:url" content="https://example.com/" data-react-helmet="true">
<meta name="twitter:image" content="https://example.com/static/12345/c5b20/blah.jpg" data-react-helmet="true">
<meta data-react-helmet="true" name="twitter:title" content="Site title">
<meta data-react-helmet="true" name="twitter:card" content="summary_large_image">

我知道图像的问题，因为如果我用外部 URL 替换我的图像 URL(这是完整的图像 URL)，它工作正常，显示带有图像的完整卡片。
知道是什么原因造成的吗？我正在缩小图像的大小，以便它可以快速加载，而且它似乎可以直接加载( eg )。 (我的意思是，那张图片有什么奇怪的地方吗？)
注意:在此问题的先前版本中，我引用了 Cloudinary 和 Uploadcare，但此后在一个分支中删除了这两个以简化问题。 (它们似乎是我使用的入门应用程序的不必要保留。)您现在可以看到该分支的示例页面 here以及 twitter:image 中的相关图像标签 here .我使用 React Helmet(和 Gatsby React Helmet)将此预处理/缩小的图像提供到标题中，并在我的 GraphQL 调用中使用以下代码以特定的较小格式获取与博客文章关联的图像:

    featuredimage {
      childImageSharp {
        fixed(width: 480, quality: 75) {
          src
        }
    }

第二个注意事项/想法:我是否应该担心生产中的页面似乎在每次重新加载时都会重新呈现？ SSR 不应该确保不会发生这种情况吗？我通过调用 Math.random() 对此进行了测试。 , 隐藏, 在页面中。您可以通过运行 document.getElementsByClassName('document')[0].children[0].innerText 来查看结果，并注意它在每个页面重新加载时产生不同的数字。这对我来说意味着整个页面正在由客户端重新呈现。是不是错了？为什么会发生这种情况？这可能与客户端对每个请求的图像进行某种处理有关，这可能会搞砸 Twitter 卡片？
第三次更新:我整理了一个更简单的复制品here .它基于 this starter template , 删除了 Uploadcare/Cloudinary 并将 Twitter 卡片元数据添加到标题中。除此之外，并删除了不必要的页面，我没有做任何其他更改。我将这个 starter 用于 repro 而不是 vanilla starter 应用程序，因为我不确定问题是否是由 Netlify CMS 和 Gatsby Sharp Image 插件的交互引起的。我可能会尝试制作第二个复制品。目前，这个 repo 的代码是 here ，应该显示 Twitter 卡片的页面是博客文章，例如 this one .
实际 ，似乎 super 基本的复制品，使用 Gatsby 3 而没有 Netlify CMS 或任何东西，也有同样的问题。 Here's the minimal reproduction , 图片取自 src/images使用 allImageSharp查询并插入到每个页面的元数据中。代码 here .
最终更新
根据下面德里克的回答，我删除了 @reach/router东西，并从 Netlify 构建环境变量中获取站点 URL。看来@reach/router仅在 JS 运行时提供此信息，排除 Twitterbot，导致 undefined基本 URL，它破坏了 Twitter 图像。包括来自 Netlify 的 URL(在 Gatsby 配置中使用 process.env.URL 并通过 siteMetadata 查询将其拉入)修复了问题!

Answer 1

更新:
我想我可能已经发现了这个问题。在禁用脚本的情况下打开最小生产时，twitter:image 的 URL是无效的:

<meta data-react-helmet="true" name="twitter:image" content="undefined/static/03475800ca60d2a62669c6ad87f5fda0/58026/energy.jpg">

所以出于某些原因，在构建过程中，主机名丢失了，但是当 JS 启动时，它会出现(可能与您获取主机名的方式有关)。 Twitter 爬虫可能没有启用 JS 并且无法获取图像。
确保您的 opengraph 图像是 absolute urls with https:// or http:// protocols.我检查了您的示例链接并看到它是一个相对链接(/static/etc.)
对于 Twitter，它似乎要求社交卡片为 2:1

Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels.

https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image
如果您使用的是最新的 Gatsby 图像插件，则可以使用 aspectRatio裁剪图像。
另请注意，您可以跳过 twitter:image标签，如果您的 og:image已经满足了推特的卡片要求。
SSR 并不意味着永远不会在客户端运行 JS，React 会在客户端渲染你的页面，而不管 SSR。