如何动态设置OG图片？酒店项目多页面共用header.php实现方案

你的JS方案之所以无效，是因为Facebook这类社交平台的分享爬虫不会执行页面中的JavaScript，它们只会读取页面加载时的原始HTML内容。所以必须用后端PHP来动态生成og:image标签，具体步骤如下：

1. 在每个页面的开头定义专属的主图变量
   比如首页（index.php）：

   <?php
   // 定义首页的分享主图路径
   $og_image = '/assets/images/home-banner.jpg';
   include 'header.php';
   ?>
   

   关于我们页面（about.php）：

   <?php
   // 定义关于页面的分享主图路径
   $og_image = '/assets/images/about-banner.jpg';
   include 'header.php';
   ?>
   

2. 修改共用的header.php文件
   在header的<head>区域里，替换原来的og:image标签为动态输出的PHP代码：

   <!-- 动态生成og:image标签 -->
   <meta property="og:image" content="<?php echo isset($og_image) ? $og_image : '/assets/images/default-banner.jpg'; ?>">
   

   这里的default-banner.jpg是备用图，当某个页面忘记定义$og_image变量时会自动使用它。

如果你的页面主图是从数据库动态获取的（比如酒店房型页），也可以在页面里先从数据库取出图片URL，再赋值给$og_image变量，同样适用这个方案。

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