Question

我正在尝试在我的网站上显示社交卡。我正在使用graphQL从有争议的数据中提取数据，这使我得到了我的图像-例如，我将获得backgroundImage.fluid并将其放入gatsby中，并且效果很好。

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

这是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图片需要完整的网址，因此它本身无法工作。

在这种情况下，修复非常简单：只需将协议和域名放在mainImage.fluid.src字符串的前面，就像这样：

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

盖茨比问题的社会卡

1 个答案: