如何在HTML的og:image元标签中实现随机图片预览？

首先修正你原JS代码的错误：var num = Math.round(Math.random() * 2))多了一个右括号，而且没有把随机选中的图片链接应用到meta标签上。下面给你两种可行的实现方案：

一、前端JavaScript修改meta标签（仅对支持JS的环境有效） #

这种方法能在浏览器里动态修改og:image，但注意：多数社交平台的分享爬虫不会执行JS，只会读取页面初始HTML，所以分享预览可能不会生效，适合测试场景。

修正后的代码：

function setRandomOgImage() {
  // 用数组字面量更简洁
  const imageLinks = [
    "https://raw.githubusercontent.com/vonkoln/clubenoturno/clubenoturno/pr.jpeg",
    "https://raw.githubusercontent.com/vonkoln/clubenoturno/clubenoturno/pr0.jpeg",
    "https://raw.githubusercontent.com/vonkoln/clubenoturno/clubenoturno/pr1.jpeg"
  ];
  // 用floor避免随机到3（Math.random()返回0-1的数，乘3后0-3，floor取0、1、2）
  const randomIndex = Math.floor(Math.random() * imageLinks.length);
  const targetImage = imageLinks[randomIndex];

  // 查找或创建og:image元标签
  let ogMeta = document.querySelector('meta[property="og:image"]');
  if (!ogMeta) {
    ogMeta = document.createElement('meta');
    ogMeta.setAttribute('property', 'og:image');
    document.head.appendChild(ogMeta);
  }
  // 设置图片链接
  ogMeta.setAttribute('content', targetImage);
}

// 页面加载完成后执行
window.onload = setRandomOgImage;

二、服务端生成随机meta标签（推荐生产环境用） #

要让社交平台分享预览正常显示随机图，必须让爬虫在读取初始HTML时就拿到随机图片链接，这就需要服务端渲染页面时动态生成og:image的content值。

举几个常见后端的示例：

PHP示例 #

<?php
$imageLinks = [
  "https://raw.githubusercontent.com/vonkoln/clubenoturno/clubenoturno/pr.jpeg",
  "https://raw.githubusercontent.com/vonkoln/clubenoturno/clubenoturno/pr0.jpeg",
  "https://raw.githubusercontent.com/vonkoln/clubenoturno/clubenoturno/pr1.jpeg"
];
// 随机选一个链接
$randomImage = $imageLinks[array_rand($imageLinks)];
?>

<!-- 在HTML头部插入meta标签 -->
<meta property="og:image" content="<?= $randomImage ?>">

Node.js/Express示例 #

app.get('/', (req, res) => {
  const imageLinks = [
    "https://raw.githubusercontent.com/vonkoln/clubenoturno/clubenoturno/pr.jpeg",
    "https://raw.githubusercontent.com/vonkoln/clubenoturno/clubenoturno/pr0.jpeg",
    "https://raw.githubusercontent.com/vonkoln/clubenoturno/clubenoturno/pr1.jpeg"
  ];
  const randomImage = imageLinks[Math.floor(Math.random() * imageLinks.length)];
  
  // 渲染模板时传入随机图片链接
  res.render('index', { randomOgImage: randomImage });
});

然后在模板（比如EJS）里：

<meta property="og:image" content="<%= randomOgImage %>">

三、动态图片重定向（替代方案） #

如果不想修改页面渲染逻辑，可以做一个服务端接口，让它随机重定向到一张图片，然后把og:image指向这个接口：

<meta property="og:image" content="/random-og-image">

以Node.js/Express为例实现接口：

app.get('/random-og-image', (req, res) => {
  const imageLinks = [
    "https://raw.githubusercontent.com/vonkoln/clubenoturno/clubenoturno/pr.jpeg",
    "https://raw.githubusercontent.com/vonkoln/clubenoturno/clubenoturno/pr0.jpeg",
    "https://raw.githubusercontent.com/vonkoln/clubenoturno/clubenoturno/pr1.jpeg"
  ];
  const targetImage = imageLinks[Math.floor(Math.random() * imageLinks.length)];
  // 重定向到选中的图片
  res.redirect(302, targetImage);
});

爬虫请求这个接口时，会自动跳转到随机图片，从而显示随机预览图。

内容的提问来源于stack exchange，提问作者Bruno Chapecó