Twitter 卡片图片不适用于 Gatsby 应用

如何解决Twitter 卡片图片不适用于 Gatsby 应用

我正在使用 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 插件的交互引起的。我可能会尝试制作第二个复制品。目前，此存储库的代码是 here，应该显示 Twitter 卡片的页面是博客文章，例如 this one。

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

最终更新

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

解决方法

更新：

我想我可能已经发现了这个问题。在禁用脚本的情况下打开最小生产时，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 来裁剪图像。

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

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

这里已解决：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;

您需要使用 siteUrl 中的 siteMetadata。

下面是我在 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
            }
          }
        }
        
      }
    }   
  }
`