Facebook的OG抓取工具未使用Gatsby项目中React Helmet设置的OG标签图片

1. 未使用gatsby-plugin-react-helmet做服务端预注入 #

普通react-helmet仅会在客户端浏览器执行JS后，才将meta标签插入页面head。Facebook、Twitter等社交平台的爬虫默认不会执行页面JS，只能抓取服务端直接返回的静态HTML内容。如果初始返回的静态HTML中没有你配置的OG标签，爬虫就会自动抓取页面内其他可识别的图片作为缩略图。
解决方法：

• 安装gatsby-plugin-react-helmet依赖
• 在gatsby-config.js的plugins数组中添加该插件配置，插件会自动将Helmet中定义的标签预渲染到静态HTML的head中

2. og:image使用了相对路径 #

Open Graph协议要求og:image的内容必须为完整的绝对URL，不能使用相对路径。你直接导入图片得到的路径是Gatsby生成的相对路径（如/static/xxx.png），缺少站点域名前缀，爬虫无法正常解析该路径，就会自动 fallback 到其他图片。
解决方法：
先在gatsby-config.js中配置站点域名：

module.exports = {
  siteMetadata: {
    siteUrl: "https://你的正式部署域名.com",
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    // 其余原有插件配置
  ]
}

再修改Head组件，拼接生成完整的图片绝对路径：

import React from 'react';
import {Helmet} from 'react-helmet';
import { useStaticQuery, graphql } from "gatsby"
import desired_picture from '../../images/pictures/other/desired-picture.png';

export default function HeadGlobal() {
    const siteData = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          siteUrl
        }
      }
    }
  `)
    const fullImgUrl = `${siteData.site.siteMetadata.siteUrl}${desired_picture}`
    return (
        <Helmet>
            <meta property="og:image" content={fullImgUrl} />
            <meta property="og:image:alt" content='alt text hardcoded' />
            <meta property="twitter:image" content={fullImgUrl} />
            <meta property="twitter:image:alt" content='alt text hardcoded' />
        </Helmet>
    );
}

3. 社交平台缓存了旧的抓取结果 #

Facebook分享调试器会缓存过往的页面抓取结果，即使你修改了页面配置，如果没有触发重新抓取，调试器依然会显示旧的内容。
解决方法：在Facebook分享调试器中输入URL后，点击「再次抓取」按钮，强制清除旧缓存重新拉取页面内容。

4. 图片不符合平台抓取要求 #

• 图片没有公开访问权限：确认图片路径不需要登录、鉴权即可直接公网访问
• 图片规格不符合要求：OG图片建议尺寸为1200630px，最小不小于200200px，格式为jpg或png，大小不超过8MB
• 页面存在重复OG标签：确认页面没有其他位置重复定义了og:image标签，覆盖了你当前的配置

内容的提问来源于stack exchange，提问作者Marty Smith