PHP社交分享按钮故障：分享至主流平台时缩略图与标题失效

问题概述 #

用PHP搭建的博客网站，实现Facebook、LinkedIn、Twitter等平台分享功能时，分享内容的缩略图和标题无法正常显示，效果如图：

现有代码 #

Meta标签代码 #

$bid = $_GET['blog_id'];

$blog_page_title = $row['blog_page_title'];
$share_image = "../images/$blog_image";
$share_url = "http://localhost/tui-new-website2/mains/blog?blog_id=$bid";
$blog_content  = $row['blog_content'];
?>
<meta property="og:title" <?php echo 'content="'.$blog_title.'"'; ?>/>
<meta property="og:image" <?php echo 'content="'.$share_image.'"'; ?>/>
<meta property="og:url" <?php echo 'content="'.$share_url.'"'; ?>/>
<meta property="og:description" <?php echo 'content="'.$blog_content.'"'; ?>/>
<meta property="og:site_name" content="http://localhost/tui-new-website2/index"/>

分享按钮HTML代码 #

<div class="social-links-details">
 <a href="https://www.facebook.com/share.php?u=<?php echo $share_url;?>" target="_blank"><img src="../images/fa.png" alt="Facebook logo"><i class="fab fa-facebook-f"></i></a>
 <a href="https://twitter.com/share?text=<?php echo $blog_title;?>&url=<?php echo $share_url;?>" target="_blank"><img src="../images/tw.png" alt="Twitter logo"><i class="fab fa-twitter"></i></a>
 <a href="" target="_blank"><img src="../images/yt.png" alt="Youtube logo"><i class="fab fa-youtube"></i></a>
 <a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo $share_url;?>" target="_blank"><img src="../images/ln.png" alt="Linkedln logo"><i class="fab fa-linkedin-in"></i></a>
 <a href="https://www.instagram.com/theunitedindian/" target="_blank"><img src="../images/ig.png" alt="Instagram logo"><i class="fab fa-instagram"></i></a>
</div>

问题排查 #

1. 变量名不匹配：Meta标签中使用$blog_title，但定义的变量是$blog_page_title，导致标题内容为空
2. 分享图片路径错误：使用相对路径../images/$blog_image，社交平台爬虫无法解析本地相对路径，必须使用完整绝对URL
3. OG标签参数错误：og:site_name填入的是URL，该字段应该填写网站名称而非网址
4. 缺少必要标签：缺少og:type（需设置为article），以及Twitter专属的twitter:card、twitter:title等标签，LinkedIn也依赖完整的OG标签集合
5. URL未编码：分享链接中的$share_url和$blog_title未做URL编码，特殊字符会导致平台解析失败
6. 本地环境限制：localhost是本地地址，社交平台的爬虫无法访问，导致无法抓取内容（测试阶段可使用平台调试工具，正式环境需换成公网域名）

修复代码 #

修正后的Meta标签与变量 #

$bid = $_GET['blog_id'];

// 修正变量名，确保与后续调用一致
$blog_title = $row['blog_page_title'];
// 生成图片绝对URL
$share_image = "http://localhost/tui-new-website2/images/" . $blog_image;
$share_url = "http://localhost/tui-new-website2/mains/blog?blog_id=" . $bid;
// 截取简介内容（避免过长，平台通常限制描述长度）
$blog_description = mb_substr($row['blog_content'], 0, 200, 'UTF-8') . '...';
?>
<!-- 基础OG标签 -->
<meta property="og:type" content="article"/>
<meta property="og:title" content="<?php echo htmlspecialchars($blog_title); ?>"/>
<meta property="og:image" content="<?php echo htmlspecialchars($share_image); ?>"/>
<meta property="og:url" content="<?php echo htmlspecialchars($share_url); ?>"/>
<meta property="og:description" content="<?php echo htmlspecialchars($blog_description); ?>"/>
<meta property="og:site_name" content="The United Indian"/>

<!-- Twitter专属标签 -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="<?php echo htmlspecialchars($blog_title); ?>"/>
<meta name="twitter:description" content="<?php echo htmlspecialchars($blog_description); ?>"/>
<meta name="twitter:image" content="<?php echo htmlspecialchars($share_image); ?>"/>

修正后的分享按钮代码 #

<div class="social-links-details">
 <a href="https://www.facebook.com/share.php?u=<?php echo urlencode($share_url);?>" target="_blank"><img src="../images/fa.png" alt="Facebook logo"><i class="fab fa-facebook-f"></i></a>
 <a href="https://twitter.com/share?text=<?php echo urlencode($blog_title);?>&url=<?php echo urlencode($share_url);?>" target="_blank"><img src="../images/tw.png" alt="Twitter logo"><i class="fab fa-twitter"></i></a>
 <a href="" target="_blank"><img src="../images/yt.png" alt="Youtube logo"><i class="fab fa-youtube"></i></a>
 <a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo urlencode($share_url);?>&title=<?php echo urlencode($blog_title);?>&summary=<?php echo urlencode($blog_description);?>" target="_blank"><img src="../images/ln.png" alt="Linkedln logo"><i class="fab fa-linkedin-in"></i></a>
 <a href="https://www.instagram.com/theunitedindian/" target="_blank"><img src="../images/ig.png" alt="Instagram logo"><i class="fab fa-instagram"></i></a>
</div>

验证步骤 #

1. 使用对应平台的官方调试工具重新抓取页面内容，刷新平台缓存
2. 确保图片符合平台要求：尺寸建议至少1200x630像素，格式为JPG/PNG，文件大小不超过5MB
3. 正式上线时将localhost替换为公网可访问的域名，确保爬虫能正常访问页面

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