Facebook分享链接og:image缩略图发布后不显示问题求助

问题表现 #

• 故障站点：https://business-students.net/
• 核心异常：
  • 编辑Facebook分享内容阶段可正常展示正确的链接缩略图，完成发布后缩略图直接消失
  • 站点首页分享时无法展示任何缩略图
  • 多次触发Facebook重新抓取页面、自行补充OG元标签后故障未解决
• 复现样例页面：https://business-students.net/f3-fa-mcqs-quiz-1-acca/

佐证材料 #

• 分享发布前预览正常截图：
• 分享发布后缩略图消失截图：
• Facebook调试工具检测结果截图：

  调试工具可正常识别到帖子对应正确图片

• 站点首页分享无缩略图截图：

已尝试操作 #

• 多次触发Facebook爬虫执行页面重新抓取，无效果
• 补充添加了社交媒体适配元标签，配置代码如下：

<meta property="og:type" content="website" />
<meta property="og:url" content="<?php echo current_url(); ?>" />
<meta property="og:description" content="<?php echo $seo_description; ?>" />
<meta property="og:keywords" content="<?php echo $seo_keywords; ?>" />

<meta property="og:image" content="<?php echo $thumb; ?>" />
<meta property="og:image:secure_url" content="<?php echo $thumb; ?>" />
<link rel="image_src" href="<?php echo $thumb; ?>" />

<meta name="description" content="YOUR_DESCRIPTION_HERE" />

<meta name="keywords" content="YOUR_KEYWORDS_HERE, SEPERATED_BY_COMA" />

<meta content='English' name='language'/>
<meta http-equiv="content-language" content="en-us"/>
<html lang="en-us"/>
<title lang="en-us"/>

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<meta content='noindex, nofollow' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' name='keywords'/>
<meta content='index, follow' name='robots'/>
</b:if>
<b:else>
<b:if cond='data:blog.pageTitle != data:blog.title'>
<meta expr:content='data:blog.pageName' name='keywords'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/></b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<meta content='global' name='distribution'/>
<meta content='1 days' name='revisit'/>
<meta content='1 days' name='revisit-after'/>
<meta content='document' name='resource-type'/>
<meta content='all' name='audience'/>
<meta content='general' name='rating'/>
<meta content='all' name='robots'/>
<meta content='en-us' name='language'/>
<meta content='USA' name='country'/>
<meta content='@twitter.com/example.Com' name='twitter:site'/>
<meta content='@example.Com' name='twitter:creator'/>
<meta content='example.Com' name='author'/>
<meta content='contact@example.Com' name='email'/>
</b:if>

当前配置存在4个直接触发Facebook缩略图过滤规则的问题，逐一修复即可解决：

• OG标签重复冲突
  代码头部硬编码了全局og:type为website、og:image为通用变量值，后续又通过Blogger条件标签给文章页重复输出了og:type=article、og:image=文章缩略图。同个页面出现多个相同property的OG标签时，Facebook发布环节的后端校验会直接判定元数据无效，丢弃图片资源；编辑阶段的预览是前端临时拉取资源做的即时渲染，不会做严格校验，所以会出现预览正常、发布后消失的现象。
  修复：删除头部硬编码的og:type、og:image、og:image:secure_url、link rel=image_src这几个标签，所有OG属性统一通过页面类型判断输出，保证每个property在页面里只出现一次。
• OG图片不符合平台校验规则
  Facebook发布后会对OG图做异步后端校验，预览阶段不会触发这个流程，只要图片不符合以下任意一条规则就会被丢弃：
  • 尺寸最小200200像素，推荐1200630像素
  • 格式为JPG/PNG，单张大小不超过8MB
  • 图片请求返回200状态码，无重定向，响应头content-type和实际格式匹配
  • 防盗链、防火墙规则不拦截UA为facebookexternalhit/1.1的爬虫请求
    修复：将全站OG图统一裁剪为1200*630像素，检查服务器规则放行Facebook爬虫，直接访问OG图地址确认可以正常打开、无跳转。
• HTML结构不规范导致爬虫解析失败
  现有代码把<html>、<title>这类基础结构标签穿插在meta标签堆里，还把title标签拆分在多个条件判断里零散输出，不符合HTML语法规范，Facebook爬虫解析DOM时可能提前终止head区域解析，漏读元数据。
  修复：把<html lang="en-us">移到页面代码最开头，title标签统一放在head区域靠前位置，不要在meta标签块里穿插结构标签。
• 首页未配置OG图
  现有代码只有文章页逻辑里会输出OG图属性，首页（index页面）逻辑里没有任何og:image相关配置，爬虫抓取首页时拿不到图片地址，自然无法展示缩略图。
  修复：给首页单独制作一张符合尺寸要求的固定OG图，在首页的页面逻辑里补充输出og:image、og:image:width、og:image:height三个属性，明确告知爬虫图片地址和尺寸。

所有修改完成后，去Facebook调试工具重新触发页面抓取，等待5分钟左右缓存更新，用新的分享入口测试即可，已经发布过的旧帖子不会自动更新缩略图。

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