Социальные карты с проблемами Гэтсби

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 нужен полный URL, это не сработает само по себе.

В этом случае исправление довольно простое: просто добавьте протокол и имя домена к строке mainImage.fluid.src, например:

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