如何在React应用中集成prerender.io解决OG标签分享问题

核心原因 #

社交平台爬虫（如Facebook Crawler、Twitterbot）不会执行JavaScript，而react-helmet是在客户端渲染时动态注入标签，导致爬虫抓取页面时看不到这些动态生成的内容，最终分享时OG标签失效。

方案1：后端UA检测+直接注入Meta标签 #

因为你的React应用和Node后端分属不同域名，可通过Node后端拦截爬虫请求，直接生成带Meta/OG标签的HTML返回：

• 识别爬虫UA：在Node后端（以Express为例）添加UA检测逻辑，匹配常见社交爬虫的标识；
• 动态生成Meta：当检测到爬虫请求时，根据URL中的slug从数据库拉取博客内容，直接在HTML模板中注入Meta和OG标签；
• 返回对应内容：普通用户请求返回React入口HTML，爬虫请求返回预注入标签的HTML。

代码示例（Express）：

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

// 常见社交爬虫UA列表
const crawlerUAs = [
  'facebookexternalhit',
  'Twitterbot',
  'LinkedInBot',
  'Slackbot',
  'WhatsApp'
];

app.get('/blog/:slug', async (req, res) => {
  const userAgent = req.headers['user-agent']?.toLowerCase() || '';
  const isCrawler = crawlerUAs.some(ua => userAgent.includes(ua));

  if (isCrawler) {
    // 从数据库获取博客内容
    const post = await yourDbQuery(`SELECT * FROM posts WHERE slug = ?`, [req.params.slug]);
    if (!post) return res.status(404).send('Post not found');

    // 生成带Meta标签的HTML
    const html = `
      <!DOCTYPE html>
      <html>
        <head>
          <title>${post.title}</title>
          <meta name="description" content="${post.excerpt}">
          <meta property="og:title" content="${post.title}">
          <meta property="og:description" content="${post.excerpt}">
          <meta property="og:image" content="${post.coverImage}">
          <meta property="og:url" content="https://your-frontend-domain.com/blog/${post.slug}">
          <meta property="og:type" content="article">
        </head>
        <body>
          <h1>${post.title}</h1>
          <p>${post.excerpt}</p>
        </body>
      </html>
    `;
    return res.send(html);
  }

  // 普通用户请求，返回React入口页面（或代理到前端域名）
  res.redirect(`https://your-frontend-domain.com/blog/${req.params.slug}`);
});

方案2：正确集成prerender.io到Node后端 #

prerender.io的Node中间件适用于所有前端框架，无需专门的React集成指南，步骤如下：

1. 安装依赖：

npm install prerender-node --save

2. 后端配置：在Express中添加prerender中间件，配置你的prerender token（若使用付费服务），确保prerender能访问到你的前端页面；

const prerender = require('prerender-node').set('prerenderToken', 'YOUR_PRERENDER_TOKEN');
// 仅对爬虫请求启用预渲染
app.use(prerender);

3. 确保react-helmet配置正确：在博客组件中动态设置OG标签时，必须使用绝对路径的og:url：

import { Helmet } from 'react-helmet';

const BlogPost = ({ post }) => {
  return (
    <>
      <Helmet>
        <title>{post.title}</title>
        <meta name="description" content={post.excerpt} />
        <meta property="og:title" content={post.title} />
        <meta property="og:description" content={post.excerpt} />
        <meta property="og:image" content={post.coverImageUrl} />
        {/* 必须是完整的绝对URL */}
        <meta property="og:url" content={`https://your-frontend-domain.com/blog/${post.slug}`} />
        <meta property="og:type" content="article" />
      </Helmet>
      {/* 博客内容渲染 */}
    </>
  );
};

方案3：静态生成（SSG）（适合内容更新不频繁的场景） #

如果博客内容更新频率低，可使用Next.js/Gatsby等框架做静态生成：

• 使用Next.js的getStaticPaths预先生成所有博客页面的路由，getStaticProps从数据库拉取对应slug的内容；
• 构建时每个博客页面都会生成带有静态Meta/OG标签的HTML，爬虫直接抓取静态内容，分享完全正常。

关键测试步骤 #

用对应平台的官方调试工具（如Facebook分享调试工具、Twitter卡片验证工具）检查爬虫实际抓取的内容，不要仅依赖浏览器DOM查看——浏览器会执行JS，而爬虫不会。

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