Gatsby Image Path to og:image for seo答案

【问题标题】：Gatsby Image Path to og:image for SEOGatsby Image Path to og:image for seo
【发布时间】：2022-01-29 22:09:55
【问题描述】：

我正在使用降价页面在 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);

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

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

【问题讨论】：

标签： gatsby gatsby-image gatsby-remark-image

【解决方案1】：

您的 getSrc 正在返回 undefined，因为您的 GraphQL 查询没有返回所有应该返回的数据。

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

以字符串形式获取默认图像src。这将是后备，所以通常jpg 或png。接受与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 游乐场 (localhost:8000/___graphql) 中测试您的查询，以检查您是否正在查询强制数据节点，否则，您的 getSrc 将永远无法工作，因为它不包含所需的数据。使用类似的东西：

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

【讨论】：