基于React.js、Node.js与Microsoft Azure实现链接预览元标签动态修改

因为前端部署在Azure静态Web应用（纯静态文件，无法服务器端修改预构建的index.html），后端在Azure应用服务，要解决不同页面的链接预览问题，核心是让爬虫请求特定页面时，服务器端返回已注入对应元标签的HTML，以下是两种可行方案：

方案一：Azure静态Web应用API函数处理元标签渲染 #

利用静态Web应用的内置API功能，通过Serverless函数动态生成带元标签的HTML：

1. 在静态Web应用中创建Node.js API函数（比如命名为render-meta）
2. 函数逻辑：
   • 解析请求路径（如/article/123）
   • 调用应用服务的后端接口获取该页面的元数据（标题、描述、OG图片等）
   • 读取预存的index.html模板（可将静态Web应用的index.html复制到函数目录作为模板，预留占位符如{{title}}）
   • 替换模板中的元标签占位符，返回修改后的HTML

函数代码示例：

const fs = require('fs');
const path = require('path');
const axios = require('axios');

module.exports = async function (context, req) {
  const requestPath = req.path;
  // 调用应用服务后端获取元数据
  const metaRes = await axios.get(`https://你的应用服务域名.azurewebsites.net/api/meta${requestPath}`);
  const meta = metaRes.data;

  // 读取本地模板文件
  const template = fs.readFileSync(path.join(__dirname, 'index-template.html'), 'utf8');
  // 替换元标签
  const finalHtml = template
    .replace('{{title}}', meta.title)
    .replace('{{description}}', meta.description)
    .replace('{{ogImage}}', meta.ogImage);

  context.res = {
    headers: { 'Content-Type': 'text/html' },
    body: finalHtml
  };
};

3. 配置静态Web应用路由规则（staticwebapp.config.json），把需要动态元标签的页面请求路由到该函数：

{
  "routes": [
    {
      "route": "/article/*",
      "serve": "/api/render-meta",
      "statusCode": 200
    }
  ]
}

方案二：应用服务后端作为代理注入元标签 #

让Node后端作为前端请求的入口，拉取静态Web应用的index.html后动态修改元标签再返回：

1. 在应用服务的Node项目中安装cheerio（用于解析HTML）和axios
2. 添加路由处理特定页面请求：

const express = require('express');
const axios = require('axios');
const cheerio = require('cheerio');
const app = express();

// 处理文章页面请求
app.get('/article/:id', async (req, res) => {
  const articleId = req.params.id;
  // 从业务接口获取元数据
  const metaRes = await axios.get(`http://localhost:3000/api/article/${articleId}/meta`);
  const meta = metaRes.data;

  // 拉取静态Web应用的原始index.html
  const staticHtmlRes = await axios.get('https://你的静态Web应用域名.azurestaticapps.net/index.html');
  const $ = cheerio.load(staticHtmlRes.data);

  // 修改元标签
  $('title').text(meta.title);
  $('meta[name="description"]').attr('content', meta.description);
  $('meta[property="og:title"]').attr('content', meta.title);
  $('meta[property="og:description"]').attr('content', meta.description);
  $('meta[property="og:image"]').attr('content', meta.ogImage);

  // 返回修改后的HTML
  res.send($.html());
});

// 保留原有API路由
app.use('/api', require('./routes/api'));

app.listen(process.env.PORT || 3000);

3. 配置前端域名指向应用服务，或者用Azure流量管理器将特定页面请求路由到应用服务，其他请求路由到静态Web应用

关键注意事项 #

• 社交爬虫不会执行JS，必须确保返回的HTML中直接包含正确的元标签，不能依赖React客户端渲染
• 给动态生成的HTML设置合理的缓存头，减少后端压力
• 用社交平台的调试工具验证链接预览效果

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