如何移除Gatsby文章URL末尾斜杠 修复OG标签及Twitter卡片异常

问题根因 #

1. URL生成逻辑错误：你代码里resolvePageUrl函数的注释明确说明需要返回带末尾斜杠的地址避免Gatsby默认的301重定向，但实际代码未添加末尾斜杠，导致og:url和canonical地址都是无斜杠版本，爬虫抓取时触发301跳转容易丢失OG标签参数。
2. 文章缩略图未正确传入：当前SEO组件的逻辑是如果未传入imageUrl参数，就会默认使用站点级的facebook-icon图标作为og:image，你没有给文章页的SEO组件传入当前文章对应的缩略图地址，自然不会显示预期的文章缩略图。

修复步骤 #

1. 修复resolvePageUrl逻辑，补充末尾斜杠
   打开你的PageUtils文件，修改resolvePageUrl函数如下：

resolvePageUrl: (...path) => {
  const resolvedUrl = Utils.resolveUrl(...path);
  return `${resolvedUrl}/`;
},

修改后生成的页面地址会自动携带末尾斜杠，和Gatsby生成的实际页面路径一致，避免301重定向问题。

2. 给文章页SEO组件传入缩略图参数
   在你的文章模板文件中，首先修改GraphQL查询，拉取文章frontmatter中配置的缩略图资源地址，示例查询逻辑如下（根据你实际的字段名调整）：

query PostQuery($slug: String!) {
  markdownRemark(fields: { slug: { eq: $slug } }) {
    frontmatter {
      title
      description
      # 新增查询缩略图字段
      thumbnail {
        childImageSharp {
          fixed(width: 1200) {
            src
          }
        }
      }
    }
  }
}

然后在调用SEO组件时传入imageUrl参数：

<SEO
  title={post.frontmatter.title}
  description={post.frontmatter.description}
  path={post.fields.slug}
  contentType="article"
  // 传入文章缩略图地址
  imageUrl={post.frontmatter.thumbnail.childImageSharp.fixed.src}
/>

3. 可选优化：移除多余的URL修复逻辑
   你当前代码里的fixpageUrl、fixmetaImageUrl的字符串替换是为了修复拼接域名时多出的前缀斜杠问题，你可以直接修改resolveUrl函数的逻辑，对带协议头的域名跳过前缀斜杠添加，代码更干净：

resolveUrl: (...paths) => paths.reduce((resolvedUrl, path, index) => {
  const urlPath = path.toString().trim();
  if (urlPath) {
    resolvedUrl
        += (resolvedUrl === '' ? '' : '/') + urlPath.replace(/^\/|\/$/g, '');
  }
  // 仅第一个路径不是http/https开头时才加前缀斜杠
  if (index === 0 && !/^https?:\/\//.test(resolvedUrl)) {
    resolvedUrl = resolvedUrl[0] !== '/' ? `/${resolvedUrl}` : resolvedUrl;
  }
  return resolvedUrl;
}, ''),

修改后可以直接使用pageUrl和metaImageUrl，不需要额外做字符串替换。

内容的提问来源于stack exchange，提问作者Arman Ali