Gatsby Image Путь к og:image для SEO

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://popupfox.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 в качестве URL-адреса, сгенерированного gastby. Но я не мог этого сделать. Кстати,

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

возвращает неопределенное значение. так что getSrc мне не помогает.

Есть ли способ заставить работать og:image?

Answer 1

Ваш возвращается undefinedпотому что ваш запрос GraphQL не возвращает все данные, которые должны возвращаться.

Тем не менее, это вспомогательная функция, которая помогает вам писать более чистый код, и это вовсе не обязательно. Использование документов в качестве запасного варианта:

Получить изображение по умолчанию srcкак строка. Это будет запасной вариант, поэтому обычно jpgили же png. Принимает те же типы, что и .

И если вы посмотрите на getImageпример:

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

Проблема здесь в том, что вы запрашиваете, не запрашивая 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без предупреждений или взлома кода, потому что он должен беспокоиться о внутренних узлах, заставляет меня думать, что ваша файловая система, возможно, не была правильно настроена, поэтому Гэтсби не может создавать узлы данных для изображений. Поэтому перед этим вы должны протестировать свой запрос на игровой площадке GraphiQL ( localhost:8000/___graphql), чтобы убедиться, что вы запрашиваете обязательные узлы данных, в противном случае ваш getSrcникогда не будет работать, потому что он не содержит необходимых данных. Используйте что-то вроде:

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