Gatsby中使用react-helmet时SEO图片meta标签渲染对象而非图片的解决方法

你遇到的核心问题是：gatsbyImageData是Gatsby为GatsbyImage组件提供的内部数据对象，它包含了图片的尺寸、格式、不同分辨率的资源路径等信息，但本身不是直接可用于meta标签的URL字符串。直接把这个对象赋值给meta的content属性，自然会渲染成[object Object]或者对象的序列化形式。

下面给你两种可行的解决方案：

方案一：直接使用图片的公共URL（最简单） #

Gatsby的file节点本身提供了publicURL字段，它是图片构建后的直接访问路径。你可以修改GraphQL查询，替换掉gatsbyImageData：

// SEO.js 中的查询部分
const { site, images } = useStaticQuery(graphql`
  query SeoMetaData {
    site {
      siteMetadata {
        description
        title
        siteUrl
        twitterUsername
      }
    }
    images: file(
      absolutePath: { glob: "**/src/images/preview-icon.png"}
    ) {
      publicURL # 替换为publicURL
    }
  }
`);

然后在seo对象中拼接完整的图片URL（确保包含你的站点域名）：

const seo = {
  title: props.title ? `${props.title} - ${site.siteMetadata.title}` : site.siteMetadata.title,
  description: props.description || site.siteMetadata.description,
  // 拼接siteUrl和publicURL得到完整的图片地址
  images: props.images ?? `${site.siteMetadata.siteUrl}${images?.publicURL}`,
  twitterUsername: site.siteMetadata.twitterUsername,
};

方案二：使用ImageSharp处理后的图片URL #

如果你需要用ImageSharp对图片进行压缩、裁剪等处理（比如你之前指定的width:1200），可以从gatsbyImageData中提取出最终的图片URL。在Gatsby v4+中，gatsbyImageData的images.fallback.src就是处理后的图片路径：

// seo对象中修改images的取值
const seo = {
  // ...其他属性不变
  images: props.images ?? `${site.siteMetadata.siteUrl}${images?.childImageSharp?.gatsbyImageData?.images?.fallback?.src}`,
};

注意：如果你的fallback.src已经是完整的绝对路径（比如你在gatsby-config中配置了正确的siteUrl），可能不需要额外拼接site.siteMetadata.siteUrl，可以根据实际情况调整。

修改后的完整SEO组件示例（方案一） #

import React from "react";
import { graphql, useStaticQuery } from "gatsby";
import { Helmet } from "react-helmet";
import { useLocation } from "@reach/router";

function SEO(props) {
  const { site, images } = useStaticQuery(graphql`
    query SeoMetaData {
      site {
        siteMetadata {
          description
          title
          siteUrl
          twitterUsername
        }
      }
      images: file(
        absolutePath: { glob: "**/src/images/preview-icon.png"}
      ) {
        publicURL
      }
    }
  `);

  const location = useLocation();

  const seo = {
    title: props.title ? `${props.title} - ${site.siteMetadata.title}` : site.siteMetadata.title,
    description: props.description || site.siteMetadata.description,
    images: props.images ?? `${site.siteMetadata.siteUrl}${images?.publicURL}`,
    twitterUsername: site.siteMetadata.twitterUsername,
  };

  return (
    <Helmet>
      <title>{seo.title}</title>
      <meta property="og:title" content={seo.title} />
      <meta name="description" content={seo.description} />
      <meta property="og:description" content={seo.description} />
      <meta name="keywords" content="health, fitness, healthy living, WhatsApp tv, blog, menstrual pain, exercise, health guru, healthguru" />
      <meta name="image" content={seo.images} />
      <meta property="og:image" content={seo.images} />
      <meta property="og:type" content="website" />
      <meta property="og:url" content={`${site?.siteMetadata?.siteUrl}${location.pathname}`} />
      <meta name="og:url" content={`${site?.siteMetadata?.siteUrl}${location.pathname}`} />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={seo.title} />
      <meta name="twitter:description" content={seo.description} />
      <meta name="twitter:image" content={seo.images} />
      <meta name="twitter:creator" content={seo.twitterUsername} />
    </Helmet>
  );
}

export default SEO;

最后提醒一下：如果你的props.images是从外部传入的图片数据，也要确保它是字符串格式的URL，而不是gatsbyImageData对象，否则同样会出现问题。

内容的提问来源于stack exchange，提问作者zcodes.dev