有盖茨比问题的社交卡

Question

我正在尝试让社交卡出现在我的网站上。我正在使用 graphQL 从内容中提取数据，这将返回我的图像 - 例如，我将获取 backgroundImage.fluid 并将其放入 gatsby 中，它工作正常。

但是，当我尝试将此图像放入 SEO 卡时，它并没有按预期工作，也没有任何显示 - 我认为是因为元描述无法将其识别为图像，因为 Gatsby 图像正在做一些聪明的事情。

这是 SEO 组件

function SEO({ description, lang, meta, title, mainImage, pathname , defaultImage}) {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            author
            siteUrl
            defaultImage

          }
        }
      }
    `
  )

  const metaDescription = description || site.siteMetadata.description


  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={`%s | ${site.siteMetadata.title}`}

      meta={[
        {
          name: `description`,
          content: metaDescription,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:image`,
          content: mainImage,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          name: `twitter:card`,
          content: `summary`,
        },
        {
          name: `twitter:creator`,
          content: site.siteMetadata.author,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:image`,
          content: mainImage,
        },
        {
          name: `twitter:description`,
          content: metaDescription,
        },

      ]

        .concat(meta)}
    />
  )}

这是组件

    <SEO
          title={name}
          mainImage={mainImage.fluid.src}
        />

这将在使用 gatsby-image 的页面上工作

   <Img fluid={mainImage.fluid} imgStyle={{
          objectFit: "contain",
        }} />

有人有什么想法吗？

Answer 1

根据为mainImage 创建图像节点的源插件，您可能会得到一个不包含域名的相对路径。这就是 gatsby-transformer-sharp 所做的，因为插件不知道您的部署。由于 OpenGraph 图像需要完整的 url，因此它本身无法工作。

在这种情况下，修复非常简单：只需将协议和域名添加到 mainImage.fluid.src 字符串之前，如下所示：

<SEO
  title={name}
  mainImage={`https://www.example.org${mainImage.fluid.src}`}
/>