如何在页面加载前执行JS函数，让搜索引擎爬虫获取API返回的标题？

你的核心问题在于：当前用客户端JavaScript动态修改<title>的方式，绝大多数网络爬虫不会执行JS代码，所以爬虫爬取到的始终是初始的Test title，无法获取到API返回的真实标题。

下面是几种可靠的解决方案：

1. 服务端渲染（最推荐） #

直接在服务器端请求API获取标题，把标题写入HTML的<title>标签后再返回给客户端。这样爬虫拿到的HTML里已经包含了正确的标题，完全不需要依赖JS执行。

举个Node.js Express的实现例子：

app.get('/', async (req, res) => {
  // 先设置兜底标题
  let pageTitle = 'Test title';
  try {
    // 服务器端请求API
    const apiRes = await fetch('https://endpoint.com');
    const data = await apiRes.json();
    // 替换为API返回的标题
    pageTitle = data.title;
  } catch (err) {
    console.error('获取标题失败:', err);
  }
  // 返回包含正确标题的HTML
  res.send(`
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta name="description" content="Test description" />
        <title>${pageTitle}</title>
      </head>
    <body></body>
    </html>
  `);
});

2. 预渲染 #

如果没法做服务端渲染，可以用预渲染工具，在构建阶段或者用户请求时提前渲染页面，把动态生成的标题固化到HTML中。爬虫访问时拿到的是已经渲染完成的页面，自然能抓取到正确标题。

3. 静态生成框架（SSG） #

使用Next.js、Gatsby这类支持静态生成的框架，在构建阶段或者增量静态再生时请求API获取标题，生成包含正确标题的静态HTML文件。爬虫直接抓取静态文件，就能拿到正确的标题。

可选：保留客户端JS作为补充 #

如果需要在浏览器里给用户更新最新标题，可以保留客户端JS逻辑，但必须确保初始HTML里的<title>已经是爬虫能抓取到的正确内容，客户端JS只是做二次更新：

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta name="description" content="Test description" />
      <!-- 这里是服务端/预渲染生成的正确标题，爬虫直接读取 -->
      <title>API返回的标题</title>

      <script>
        document.addEventListener('DOMContentLoaded', function () {
          const apiEndpoint = 'https://endpoint.com';
          fetch(apiEndpoint)
            .then(res => res.json())
            .then(data => {
              document.title = data.title; // 浏览器端更新标题给用户看
            })
            .catch(() => {
              document.title = '兜底标题';
            })
        })
      </script>
    </head>
<body></body>
</html>

核心原则就是：让标题在初始HTML响应中就存在，不要依赖客户端JS动态生成，这样所有爬虫都能正确抓取到你想要的标题。

内容的提问来源于stack exchange，提问作者Daniel Greatman Walter