Next.js站点基于oembed的Twitter、Slack、Facebook视频嵌入失效

基于Next.js开发的VUMU应用，为适配社交分享场景在页面头部注入自定义meta标签，当前已注入的头部配置如下：

<title>{`${recordingData.title} - VUMU`}</title>
<meta name="description" content="Check out a video I made via VUMU" />

<!-- SEO 配置 -->
<meta property="og:site_name" content="VUMU.IO" />
<meta property="og:type" content="website" />
<meta property="og:url" content={`${config.WEB_URL}share/${query.pid}`} />
<meta property="og:title" content={`${recordingData.title} - VUMU`} key="title" />
<meta property="og:description" content="Check out a video I made via VUMU" />
<meta property="og:image" content={recordingData.thumbnailUrl} />
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="720" />
<meta name="twitter:card" content="summary" />

<!-- OEMBED 链接发现配置 -->
<link rel="alternate" type="application/json+oembed" href="https://2rstwutqz5.execute-api.eu-west-2.amazonaws.com/dev/get-recording-oembed?url=https%3A%2F%2Fstage.vumu.io%2Fshare%2F60d81714d4324bb2b7a595ab&amp;format=json" />
<link rel="alternate" type="application/json+oembed" href="https://2rstwutqz5.execute-api.eu-west-2.amazonaws.com/dev/get-recording-oembed?url=https%3A%2F%2Fstage.vumu.io%2Fshare%2F60d81714d4324bb2b7a595ab&amp;format=xml" />

对应分享页面地址为https://stage.vumu.io/share/60d81714d4324bb2b7a595ab?src=ext，故障表现为：将该链接分享到Twitter、Slack、Facebook等社交平台时，无法正常加载oembed对应的嵌入iframe内容。

• oembed标签类型属性配置错误
  当前xml格式的oembed返回链接，被错误标注为application/json+oembed类型，与实际返回格式不匹配，社交平台爬虫会直接忽略类型不匹配的oembed发现项。
  修正方式：将xml格式对应的link标签type属性调整为application/xml+oembed，与接口返回的格式严格对齐。
• Next.js头部注入的渲染兼容问题
  若所有meta、oembed标签都是通过客户端组件在浏览器端动态注入，社交平台爬虫请求页面时，会因无法执行JavaScript脚本拿不到完整的头部标签内容，直接跳过oembed的发现流程。
  修正方式：将所有社交分享相关的meta、oembed link标签迁移到服务端渲染逻辑中，在初始HTML响应中直接输出：Pages Router模式下通过next/head的服务端渲染逻辑注入，App Router模式下通过generateMetadata接口配置输出，确保爬虫不需要执行JS就能拿到完整的标签内容。
• oembed接口的URL匹配逻辑不兼容
  当前oembed接口中硬编码匹配的URL是不带查询参数的纯路径形式，但实际分享的链接携带了?src=ext追踪参数，部分平台爬虫会严格校验oembed接口返回的URL与当前爬取页面URL的一致性，校验不通过就会拒绝加载内嵌内容。
  修正方式：调整oembed接口的匹配逻辑，将访问的完整URL（包含所有查询参数）透传给后端做匹配校验，不要硬编码去掉查询参数的固定URL规则。
• Twitter卡片配置与嵌入能力不匹配
  当前配置的twitter:card值为summary，仅支持静态图文摘要的展示模式，不支持触发oembed拉取生成可交互iframe嵌入的逻辑。
  修正方式：将twitter:card配置调整为player类型，补充对应的播放器宽度、高度等必备属性，满足Twitter自动拉取oembed生成嵌入的格式要求。
• 平台缓存干扰问题
  社交平台的爬虫会对页面内容做最长7天的本地缓存，如果前期配置错误的标签被平台缓存，哪怕后续修正了页面标签，平台仍会读取旧的缓存结果，无法正常拉取最新的oembed配置。
  修正方式：每次调整标签配置后，通过各平台官方提供的开发者调试工具主动刷新对应链接的爬取缓存，不依赖平台的自动更新机制。

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