用于 seo 的 og:image 的 Gatsby 图像路径

Question

我正在使用降价页面在 Gastby 上生成我的页面。我在 .md 文件中定义图像路径。

---
slug: "/blog/my-blog-post"
date: "2022-01-11"
title: "My title"
image: /images/blog/my-image-1.png
---
![image-alt](/images/blog/my-image-1.png)
# My content header

My content

{MarkdownRemark.frontmatter__slug}.js

import React from "react"
import { Helmet } from "react-helmet"
import BaseController from "../base-controller"
import { graphql } from "gatsby"
import { getSrc } from "gatsby-plugin-image"
const baseUrl = 'https://pppx.com';
export default function Template({
  data, // this prop will be injected by the GraphQL query below.
}) {
  const { markdownRemark } = data // data.markdownRemark holds your post data
  const { frontmatter, html } = markdownRemark
  const image = getSrc(frontmatter.image); // image returns as undefined.
  console.log("image",image);
  return (
    <BaseController>
      <Helmet>
        <title>{frontmatter.title}</title>
        <meta name="title" content={frontmatter.title} />
        <!-- this line doesn'g work as expected --!>
        <meta property="og:image" content={frontmatter.image} />
      </Helmet>
      <section>
        <div class="container">
          <div class="row justify-content-center">
              <div class="col-md-12 col-lg-12" dangerouslySetInnerHTML={{ __html: html }}>
              </div>
          </div>
        </div>
      </section>
    </BaseController>
  )
}

export const pageQuery = graphql`
  query og($id: String!) {
    markdownRemark(id: { eq: $id }) {
      html
      frontmatter {
        slug
        title
        image
      }
    }
  }
  `

这里我需要og:image作为gastby生成的url。但我不能那样做。顺便说一句，

  const image = getSrc(frontmatter.image); // image returns as undefined.
  console.log("image",image);

returns 未定义。所以 getSrc 对我没有帮助。

有没有办法让 og:image 工作？

Answer 1

您的 getSrc 正在 returning undefined 因为您的 GraphQL 查询没有 returning 所有应该 return 的数据。

也就是说，getSrc 是一个辅助函数，可以帮助您编写更清晰的代码，而且它根本不是强制性的。使用 docs 作为后备：

Get the default image src as a string. This will be the fallback, so usually jpg or png. Accepts the same types as getImage.

如果您查看 getImage 示例：

const image = getImage(data.avatar)
// This is the same as:
const image = data?.avatar?.childImageSharp?.gatsbyImageData

这里的问题是你查询结束于image而不查询childImageSharp也不查询gatsbyImageData。您的查询应如下所示：

export const pageQuery = graphql`
  query og($id: String!) {
    markdownRemark(id: { eq: $id }) {
      html
      frontmatter {
        slug
        title
        image {
         childImageSharp {
            gatsbyImageData(
              width: 200
              placeholder: BLURRED
              formats: [AUTO, WEBP, AVIF]
            )
          }
        }
      }
    }
  }
  `

允许您在没有警告或破坏代码的情况下查询 image 的事实，因为它应该打扰内部节点，这让我认为您的文件系统可能没有正确设置，所以 Gatsby 是无法为图像创建数据节点。因此，在此之前，您应该在 GraphiQL playground (localhost:8000/___graphql) 中测试您的查询，以检查您是否正在查询强制数据节点，否则，您的 getSrc 将永远无法工作，因为它不包含所需的数据。使用类似：

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `blogImaghes`,
    path: `${__dirname}/src/images/blog/`,
  },
},

用于 seo 的 og:image 的 Gatsby 图像路径

Gatsby Image Path to og:image for seo

gatsby

gatsby-image

gatsby-remark-image