React配置Meta标签后Slack分享链接不显示预览如何解决

你的Meta配置存在几个不符合Slack爬取规则的问题，按以下步骤排查修复即可：

现有配置的核心问题 #

• 缺失Open Graph必填字段：Slack优先读取OG协议标签，不会主动兜底读普通meta标签内容。你当前没有配置og:type、og:description两个必填字段，爬虫识别不到有效内容。
• OG图片路径错误：og:image使用了相对路径images/logo-square.png，Slack爬虫从公网访问时无法解析相对路径，必须使用带HTTPS协议头的绝对路径。
• 动态渲染的标签爬虫读不到：如果你的项目是React/Vue这类客户端渲染项目，JSX里动态生成的Meta标签需要等浏览器执行JS后才会插入页面，Slack爬虫不会执行JS，只能拿到初始返回的空HTML，自然读不到你配置的元信息。

修复步骤 #

1. 补全Meta标签配置，所有OG字段使用绝对路径，参考代码如下：

<MetaTags>
  <title>{TITLE}</title>
  <meta name="description" content={pageDescription} />
  <meta property="og:type" content="website" />
  <meta property="og:title" content={pageTitle} />
  <meta property="og:description" content={pageDescription} />
  <meta property="og:image" content="https://你的线上正式域名/images/logo-square.png" />
</MetaTags>

2. 验证标签是否可被爬虫读取：打开线上站点，右键选择「查看网页源代码」，直接在原始HTML里搜索og:title字段，如果搜不到，说明标签是JS动态插入的，需要改服务端渲染、静态预渲染，或者直接在HTML模板里写死核心Meta标签，保证初始返回的HTML里就包含这些内容。
3. 绕过Slack缓存验证：Slack会对爬过的链接元数据做长期缓存，配置修改后不会立即生效。测试时可以在链接末尾拼接无意义查询参数（比如https://你的页面地址?test=1），会被Slack识别为新链接，触发重新爬取。

注意事项 #

• OG图片推荐尺寸为1200630px，最小不低于500500px，不要给图片资源加防盗链、登录权限限制，保证公网可直接访问。
• 分享的页面不要给爬虫设置登录拦截、UA拦截，Slack爬虫不会携带站点登录态，被拦截后只能返回裸链接。

内容的提问来源于stack exchange，提问作者Natarajan Rayi