基于Vite实现商品详情页WhatsApp分享OG图（SSR/SSG方案咨询）

由于WhatsApp的链接爬虫不会执行JavaScript，客户端通过react-helmet动态注入的og:image标签无法被识别，必须让初始HTML中就包含正确的meta标签。基于Vite，你可以通过以下两种方式实现：

方案1：静态预渲染（SSG）—— 适合商品数量有限的场景 #

如果商品总数不多，提前预渲染所有商品详情页的静态HTML，直接将商品图片URL写入og:image标签。

实现步骤： #

1. 安装预渲染插件：

   npm install vite-plugin-prerender --save-dev
   

2. 在vite.config.js中配置插件，先拉取所有商品ID生成路由，再针对每个路由预渲染并注入meta标签：

   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';
   import prerender from 'vite-plugin-prerender';
   import axios from 'axios';
   
   export default defineConfig({
     plugins: [
       react(),
       prerender({
         staticDir: 'dist',
         routes: async () => {
           // 调用API获取所有商品ID
           const { data: products } = await axios.get('https://your-api.com/products');
           return products.map(product => `/product/${product.id}`);
         },
         renderer: async (route) => {
           const productId = route.split('/')[2];
           const { data: product } = await axios.get(`https://your-api.com/products/${productId}`);
           
           // 渲染页面并替换head部分，注入Open Graph标签
           const html = await renderer.renderToString(route);
           return html.replace(
             '</head>',
             `<meta property="og:image" content="${product.imageUrl}">
              <meta property="og:title" content="${product.name}">
              <meta property="og:url" content="https://your-domain.com${route}">
              </head>`
           );
         }
       })
     ]
   });
   

3. 执行npm run build，预渲染后的静态HTML会生成在dist目录，部署后即可被WhatsApp爬虫正确识别。

方案2：服务端渲染（SSR）—— 适合商品数量多/动态更新的场景 #

如果商品数量庞大或需要实时更新，用Vite搭建SSR服务，在服务端处理请求时动态生成包含正确meta标签的HTML。

实现步骤： #

1. 安装依赖：

   npm install express
   

2. 创建服务端入口server.js：

   import express from 'express';
   import { createServer as createViteServer } from 'vite';
   import axios from 'axios';
   
   async function createServer() {
     const app = express();
     const vite = await createViteServer({
       server: { middlewareMode: 'ssr' },
       appType: 'react'
     });
     app.use(vite.middlewares);
   
     app.get('/product/:id', async (req, res) => {
       const productId = req.params.id;
       try {
         // 调用API获取商品数据
         const { data: product } = await axios.get(`https://your-api.com/products/${productId}`);
         // 获取Vite处理后的HTML模板
         const template = await vite.transformIndexHtml(req.originalUrl, '');
         // 注入meta标签
         const finalHtml = template.replace(
           '<head>',
           `<head>
             <meta property="og:image" content="${product.imageUrl}">
             <meta property="og:title" content="${product.name}">
             <meta property="og:url" content="${req.protocol}://${req.get('host')}${req.originalUrl}">
           `
         );
         res.send(finalHtml);
       } catch (err) {
         vite.ssrFixStacktrace(err);
         res.status(500).send(err.message);
       }
     });
   
     app.listen(3000, () => {
       console.log('SSR server running on http://localhost:3000');
     });
   }
   
   createServer();
   

3. 在package.json中添加启动脚本：

   "scripts": {
     "dev:ssr": "node server.js",
     "build:ssr": "vite build && vite build --ssr"
   }
   

4. 启动SSR服务，部署后所有商品详情页请求都会返回带正确meta标签的HTML。

必查注意事项 #

• 商品图片必须是绝对HTTPS URL，不能用相对路径，尺寸建议≥300x200px
• 确保图片服务器未设置防盗链，允许WhatsApp爬虫访问
• 测试预览效果可使用WhatsApp官方的链接预览调试工具验证meta标签是否被正确识别

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