移动端Facebook sharer.php无法读取动态Open Graph标签求助

问题原因分析 #

• HTML语法错误（最可能）：代码中直接输出$search、$nom_photo等GET参数，未做HTML转义。若参数包含引号、尖括号或特殊字符，会破坏<meta>标签的content属性结构。PC端浏览器/分享工具容错性高，可忽略错误读取标签，但移动端爬虫对HTML格式要求更严格，会直接跳过无效标签。
• 服务器UA适配差异：部分网站针对移动端UA返回不同页面模板或头部内容，可能导致OG标签生成逻辑未在移动端页面中执行。
• 缓存机制影响：移动端CDN或服务器缓存了无参数的页面版本，爬虫抓取到的是缓存后的静态页面，没有动态生成的个性化OG标签。
• 分享时URL参数丢失：部分移动端浏览器或社交APP在分享过程中会自动截断URL参数，导致页面无法获取search、id_photo等参数，OG标签自然无法生成。

解决方法 #

1. 对输出变量强制转义（优先处理） #

修改所有echo输出逻辑，使用htmlspecialchars()转义变量，避免破坏HTML结构：

<?php
if (!empty($_GET['search'])) { $search = $_GET['search'];}
if (!empty($_GET['id_photo'])) { $id_photo = $_GET['id_photo'];}
if (!empty($_GET['nom_photo'])) { $nom_photo = $_GET['nom_photo'];}
if (!empty($search) && !empty($id_photo) && !empty($nom_photo)) {
    // 转义所有输出变量，指定编码和引号处理规则
    $search_esc = htmlspecialchars($search, ENT_QUOTES, 'UTF-8');
    $id_photo_esc = htmlspecialchars($id_photo, ENT_QUOTES, 'UTF-8');
    $nom_photo_esc = htmlspecialchars($nom_photo, ENT_QUOTES, 'UTF-8');
?>
    <meta property="og:url"             content="https://ville-la-machine.com/photos-de-classe/afficher-par-identite?search=<?php echo $search_esc;?>&id_photo=<?php echo $id_photo_esc;?>&nom_photo=<?php echo $nom_photo_esc;?>" />
    <meta property="og:type"            content="website" />
    <meta property="og:title"           content="Photos de classe de <?php echo $search_esc ;?>" />
    <meta property="og:description"     content="Des centaines de photos de classe couvrant plus de 60 ans d'école." />
    <meta property="og:image"           content="https://ville-la-machine.com/photos-de-classe/photos/<?php echo $nom_photo_esc;?>.jpg" />
    <meta property="og:image:alt"       content="Les écoles de La Machine. Une classe où était <?php echo $search_esc;?>" />
<?php
}
require_once( ROOT_PATH_LINK.'fin_entete.php' );
?>

2. 验证服务器UA响应一致性 #

用curl模拟移动端UA抓取页面，检查OG标签是否存在：

curl -A "Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1" https://ville-la-machine.com/photos-de-classe/afficher-par-identite?search=测试&id_photo=1&nom_photo=测试照片

若返回页面无OG标签，说明服务器针对移动端UA做了特殊处理，需调整模板逻辑，确保OG标签生成代码在所有UA环境下都执行。

3. 禁用动态页面缓存 #

在页面头部添加缓存控制头，避免爬虫抓取缓存页面：

<?php
header("Cache-Control: no-cache, no-store, must-revalidate"); // HTTP 1.1
header("Pragma: no-cache"); // HTTP 1.0
header("Expires: 0"); // 适配代理服务器
?>

同时检查CDN设置，确保带GET参数的URL不被缓存。

4. 确保分享时URL参数完整 #

• 页面内分享按钮直接使用当前完整URL（包含所有参数），避免手动拼接；
• 针对移动端分享，使用各平台官方分享SDK，防止参数被截断。

内容的提问来源于stack exchange，提问作者Daniel Taillon Equinoxe5