Django博客分享至Facebook未抓取文章配图，如何实现带真实图的分享？

核心成因 #

Facebook的分享爬虫在抓取页面生成分享卡片时，不会自动识别页面内嵌入的文章配图，它仅优先读取页面<head>区域定义的Open Graph协议元标签，确定要展示的标题、描述、缩略图素材。当前你的文章详情页没有配置针对单篇文章的专属OG图片标签，爬虫找不到指定的文章配图时，会自动兜底抓取站点全局头像、favicon这类公共素材作为缩略图，最终出现分享图和文章不匹配的异常。

落地修改步骤 #

• 为文章详情页补充专属Open Graph元标签
  在article.html的<head>区块添加对应文章的元标记，核心是配置指向当前文章配图的og:image标签，参考代码：

  <meta property="og:type" content="article">
  <meta property="og:url" content="{{ request.build_absolute_uri }}">
  <!-- 注意og:image必须填写可公开访问的绝对路径，不能使用相对路径 -->
  <meta property="og:image" content="{{ art.cover_image.url }}">
  <meta property="og:title" content="{{ art.title }}">
  <meta property="og:description" content="{{ art.excerpt }}">
  

• 优化当前分享按钮的URL拼接逻辑
  现有Facebook分享链接是手动拼接的域名和文章路径，容易出现路径错位，可以直接用Django模板自带的request.build_absolute_uri自动生成当前页的完整访问地址，替换原有的写死链接：

  <!-- 替换原有手动拼接的FB分享href -->
  <a href="https://www.facebook.com/sharer/sharer.php?u={{ request.build_absolute_uri }}">
  

  这样能保证爬虫抓取的URL和用户实际访问的文章地址完全一致，不会出现路径匹配错误。
• 刷新Facebook端的页面缓存
  代码修改部署完成后，Facebook之前缓存的旧页面抓取结果不会自动同步更新，需要借助Facebook官方的分享调试工具，输入文章链接触发重新爬取，等缓存刷新完成后，分享卡片就会正确展示对应文章的配图。

高频踩坑提醒 #

• og:image的路径不能只写相对路径，比如/media/post1.jpg，必须拼接为带完整域名的全链接，否则爬虫无法正常加载图片
• 文章配图的尺寸不能小于200x200像素，尺寸不达标的图片会被Facebook判定为无效素材，依然触发兜底抓取逻辑
• 单页面不要配置多个指向不同素材的og:image标签，爬虫默认会读取页面中第一个出现的og:image值

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