Facebook分享调试器inputURL及og:url元标签异常排查

Giphy页面高亮字段来源与取值逻辑 #

• 调试结果中的高亮预览字段全部来自Open Graph（OG）协议元标签，不是普通页面内容或通用meta标签：
  • 高亮动图预览对应<meta property="og:image">标签，Giphy为该字段配置的是可公开直访的GIF动图资源地址，而非静态封面图
  • 展示的标题、摘要分别对应og:title、og:description标签
  • 平台取值逻辑为：爬虫优先识别og:前缀的OG标签，当标签指向的资源满足「公开可访问、返回200状态码、格式在支持范围内、文件大小符合平台限制、响应头Content-Type与实际资源格式匹配」要求时，直接在调试结果中高亮展示可预览的媒体字段；如果OG标签缺失或无效，才会回退抓取页面内的title标签、正文、内嵌图片做兜底展示，兜底内容不会高亮。

同结构标签不展示、复制Giphy头部代码仍失效的核心原因 #

• 爬虫访问被拦截：Facebook爬虫使用固定UAfacebookexternalhit/1.1发起请求，如果站点对该UA配置了拦截、防盗链、人机校验（比如CDN的5秒盾、访问鉴权），爬虫无法获取到真实的页面源码和资源，自然无法识别对应字段。Giphy对所有公开爬虫放开了页面和静态资源的访问权限，这是和普通站点最核心的差异。
• 跨域资源防盗链拦截：直接复制Giphy的head代码时，代码内og:image等字段指向的是Giphy域名下的资源，Giphy配置了防盗链规则，当爬虫从你的域名触发跨域资源拉取时，会被拦截返回403或占位图，不符合OG资源校验规则。
• 标签渲染方式错误：如果OG标签是通过Vue/React等前端框架在客户端侧用JS动态注入的，Facebook爬虫默认不会执行页面JS，只能拿到初始的空HTML，根本读不到OG标签；另外如果将OG标签的property属性错写为name属性，爬虫也无法识别。
• 缓存未刷新：Facebook调试器的抓取结果存在强缓存，首次抓取到错误内容后，即使后续修改了页面配置，不手动触发强制重爬，会一直展示旧的失效结果，缓存周期最长可达30天。

字段缺失问题修复步骤 #

• 校验爬虫访问权限：用curl命令模拟Facebook爬虫UA访问目标页面，确认返回200状态码，返回的原始HTML源码中可直接看到完整的OG标签，无跳转、无拦截：

  curl -A "facebookexternalhit/1.1" 你的目标页面地址
  

• 校验OG资源有效性：og:image等媒体字段必须配置为当前域名下的公开直链资源，不要跨域引用其他站点的资源；关闭对应资源的referer防盗链、访问鉴权；图片尺寸建议不小于1200*630像素，GIF文件大小控制在15MB以内，资源响应头的Content-Type要和实际格式匹配（比如GIF资源需返回image/gif）。
• 校验标签格式：所有OG标签必须直接写在服务端返回的原始HTML的<head>标签内，不要用客户端JS动态注入；标签必须使用property属性声明，正确写法示例：

  <meta property="og:title" content="页面标题" />
  <meta property="og:description" content="页面摘要" />
  <meta property="og:image" content="图片直链地址" />
  <meta property="og:url" content="当前页面永久链接" />
  <meta property="og:type" content="website" />
  

• 强制刷新缓存：每次修改页面配置后，到Facebook分享调试器中点击「Scrape Again」按钮强制重新抓取，建议连续点击2-3次——第一次重爬通常只更新页面基础文本信息，第二次及以后才会重新拉取媒体资源做格式校验。

内容的提问来源于stack exchange，提问作者János