如何使用Gatsby新Head API为所有页面设置相同<head>内容？

Gatsby支持在页面文件中通过命名导出Head组件来单独设置单页面的<head>内容，比如首页的写法：

// src/pages/index.tsx

export const Head = () => (
  <>
    <title>My Website</title>
  </>
)

const HomePage = () => {
  return <main>Hello!</main>
}

export default HomePage

但这种方式只对/路由生效，像src/pages/about.tsx这类其他页面，默认标题会是完整URL（比如https://example.com/about）。

如果不想重复导出Head组件，也嫌把共享组件导入每个页面太繁琐、容易遗漏，推荐两种高效的全局配置方法：

方法一：通过全局布局组件自动包裹所有页面 #

1. 先创建一个全局布局组件，把通用的<head>内容写进去：

// src/components/Layout.tsx
import React from 'react'

const Layout = ({ children }) => {
  return (
    <>
      {/* 这里放所有页面通用的head内容 */}
      <title>我的网站</title>
      <meta name="description" content="这是我的Gatsby站点" />
      {/* 其他通用meta标签、样式引入等 */}
      <main>{children}</main>
    </>
  )
}

export default Layout

2. 在gatsby-browser.js和gatsby-ssr.js中配置全局包裹逻辑（两个文件内容完全一致）：

// gatsby-browser.js / gatsby-ssr.js
import React from 'react'
import Layout from './src/components/Layout'

export const wrapPageElement = ({ element, props }) => {
  return <Layout {...props}>{element}</Layout>
}

这样所有页面都会自动被这个布局组件包裹，通用的<head>内容全局生效。如果个别页面需要自定义标题或其他head内容，直接在该页面导出Head组件即可，Gatsby会优先使用页面级的配置。

方法二：结合站点元数据与全局SEO组件 #

1. 先在gatsby-config.js里配置站点的基础元数据：

module.exports = {
  siteMetadata: {
    title: '我的网站',
    description: 'Gatsby站点通用描述',
  },
}

2. 创建一个通用的SEO组件，通过useStaticQuery获取站点元数据：

// src/components/Seo.tsx
import { useStaticQuery, graphql } from 'gatsby'
import React from 'react'

export const Seo = ({ customTitle }) => {
  const { site } = useStaticQuery(
    graphql`
      query SiteMetadataQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `
  )
  // 优先使用页面传入的自定义标题，没有则用站点默认标题
  const pageTitle = customTitle || site.siteMetadata.title

  return (
    <>
      <title>{pageTitle}</title>
      <meta name="description" content={site.siteMetadata.description} />
    </>
  )
}

3. 把这个Seo组件放到之前的全局Layout组件里，这样所有页面默认使用站点元数据的配置。如果某个页面需要自定义标题，只需在页面中给Seo传递customTitle参数，或者直接导出Head组件覆盖即可。

内容的提问来源于stack exchange，提问作者Cam Jackson