文章特色图设为DIV背景后社交分享无法识别，如何解决？

这个问题我之前帮不少开发者搞定过——核心原因是社交平台的分享爬虫（比如Facebook的）不会解析CSS中的背景图片，它们只会扫描页面里的<img>标签，或者专门的Open Graph（OG）元数据来获取分享用的图片资源。你用DIV背景图的方式，爬虫完全“看不到”这张图，自然无法在分享选项里显示。

下面给你两个最实用的解决方案：

方案1：添加隐藏的<img>标签 #

在页面中插入一个视觉上完全隐藏的<img>标签，指向你的特色图片。这样爬虫能抓取到这张图，但普通用户看不到它，不会影响页面布局。

示例代码：

<!-- 供社交爬虫抓取的隐藏图片 -->
<img 
  src="<?php echo $thumb['0'];?>" 
  alt="你的文章标题或图片描述" 
  style="position: absolute; left: -9999px; top: -9999px; width: 0; height: 0; opacity: 0;"
>

<!-- 你原来的背景图DIV -->
<div class="projectimg" style="background-image: url('<?php echo $thumb['0'];?>')"></div>

注意：给<img>加上清晰的alt属性，既有助于爬虫理解图片内容，也符合网页无障碍标准。

方案2：添加Open Graph（OG）元标签（推荐） #

在页面的<head>区域添加OG元标签，直接告诉社交平台这篇文章的专属分享图片。这是最规范的做法，几乎所有主流社交平台（Facebook、Twitter/X、LinkedIn等）都会优先读取OG标签的内容。

示例代码：

<head>
  <!-- 其他头部内容（比如title、meta charset等） -->
  
  <!-- Open Graph 图片设置 -->
  <meta property="og:image" content="<?php echo $thumb['0'];?>">
  <!-- 推荐设置图片尺寸，Facebook偏好1200x630像素的比例 -->
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <!-- 图片描述，提升分享可读性 -->
  <meta property="og:image:alt" content="你的文章特色图片描述">
  
  <!-- 可选：补充其他OG标签，让分享内容更完整 -->
  <meta property="og:title" content="你的文章标题">
  <meta property="og:description" content="你的文章简介">
</head>

额外提示： #

• 确保OG图片的URL是绝对路径（比如https://yourdomain.com/images/xxx.jpg），避免爬虫因为相对路径无法抓取到图片。
• 可以用对应平台的分享调试工具来验证图片是否能被正确识别，调试工具会告诉你是否有抓取失败的问题。

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