Twitter Card Images 在 Gatsby 应用程序上不起作用

Question

我正在使用 Netlify CMS 开发 Gatsby 应用程序（并托管在 Netlify 上）。尝试使元数据正常工作，以便 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 卡元数据添加到标题中。除此之外，并删除了不必要的页面，我没有进行任何其他更改。我将此启动器用于复制而不是普通启动器应用程序，因为我不确定问题是否是由 Netlify CMS 和 Gatsby Sharp Image 插件的交互引起的。我可能会尝试制作第二个复制品。目前，这个 repo 的代码是 here，应该显示 Twitter 卡片的页面是博客文章，例如 this one。

实际上，似乎带有 Gatsby 3 且没有 Netlify CMS 或任何东西的 super basic 复制品也有同样的问题。 Here's the minimal reproduction，使用allImageSharp 查询从src/images 获取图像并插入到每个页面的元数据中。代码here。

最终更新

根据下面 Derek 的回答，我删除了 @reach/router 的东西，并从 Netlify 构建环境变量中获取了站点 URL。 @reach/router 似乎只在 JS 运行时提供此信息，这排除了 Twitterbot，导致 undefined 基本 URL 破坏了 Twitter 图像。包含来自 Netlify 的 URL（在 Gatsby 配置中使用 process.env.URL 并通过 siteMetadata 查询拉入）解决了问题！

Answer 1

这里已解决：https://github.com/gatsbyjs/gatsby/discussions/32100。

“location 和 origin 在 gatsby build 期间不可用，因此生成的 HTML 在那里未定义。”

我通过更改在 seo.js 中创建图像 URL 的方式来实现它：

let origin = "";
if (typeof window !== "undefined") {
  origin = window.location.origin;
}
const image = origin + imageSrc;

到这里：

const imageSrc = thumbnail && thumbnail.childImageSharp.fixed.src;
const image = site.siteMetadata?.siteUrl + imageSrc;

您需要使用来自siteMetadata 的siteUrl。

下面是我的pageQuery 内部blog-post.js：

export const pageQuery = graphql`
  query BlogPostBySlug(
    $id: String!
    $previousPostId: String
    $nextPostId: String
  ) {
    site {
      siteMetadata {
        title
        siteUrl
      }
    }
    markdownRemark(id: { eq: $id }) {
      id
      excerpt(pruneLength: 160)
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description

        thumbnail {
          childImageSharp {
            fixed(width: 1200) {
              ...GatsbyImageSharpFixed
            }
          }
        }
        
      }
    }   
  }
`

Answer 2

更新：

我想我可能已经找到了问题所在。在禁用脚本的情况下打开最小生产时，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

此卡片的图像支持 2:1 的纵横比，最小尺寸为 300x157 或最大为 4096x4096 像素。

https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image

如果您使用的是最新的 Gatsby 图片插件，您可以使用aspectRatio 裁剪图片。

另请注意，如果您的 og:image 已经满足 Twitter 的卡片要求，您可以跳过 twitter:image 标签。

SSR 并不意味着永远不会在客户端运行 JS，React 会在客户端渲染你的页面，而不管 SSR。