我想在分享我的 React 应用程序产品详细信息页面 URL 时显示缩略图

Question

问题声明：在 Google Chat 中共享 React 产品详细信息页面 URL 时显示缩略图

问题： 我正在开发一个 React 网站，我想在 Google Chat 中共享产品详细信息页面 URL 时显示缩略图。为了实现这一目标，我实现了开放图协议 (OGP) 元数据，包括

og:title

、

og:description

和

og:image

属性。尽管做出了这些努力，缩略图仍未按预期显示。

到目前为止我所做的：

1. 利用 React 组件中的

   Helmet

   组件动态设置产品详细信息页面的 OGP 元数据。

   <Helmet>        
      <meta property="og:title" content={pdpProduct?.title} />
      <meta property="og:description" content={pdpProduct?.description} />
      <meta property="og:image" content={pdpProduct?.images ? pdpProduct?.images[0]?.src : ""} />
   </Helmet>
   

2. 此外，我尝试直接在

   index.html

   文件中添加元标记，这适用于静态内容，但对动态显示大量产品的图像提出了挑战。

目标：

1. 确保根据正在查看的特定产品动态填充 OGP 元数据。
2. 解决了在 Google Chat 中共享产品详细信息页面 URL 时阻止显示缩略图的问题。

问题：

• 在为大量产品动态设置

  og:image

  属性时，您是否面临任何具体挑战？
• 是否存在在具有大量产品的 React 应用程序中动态更新 OGP 元数据的首选方法或最佳实践？

注：

• 该网站包含大量产品，因此有效处理每个产品的动态元数据至关重要。

Answer 1

使用React Helmet动态更新OGP元数据的基本代码结构：

import React from 'react';
import { Helmet } from 'react-helmet';

const ProductDetailPage = ({ pdpProduct }) => {
  return (
    <>
      <Helmet>        
        <meta property="og:title" content={pdpProduct?.title || 'Default Title'} />
        <meta property="og:description" content={pdpProduct?.description || 'Default Description'} />
        <meta property="og:image" content={pdpProduct?.images ? pdpProduct.images[0].src : 'Default_Image_URL'} />
      </Helmet>
      {/* Rest of your product detail page */}
    </>
  );
};

export default ProductDetailPage;

更改可能不会立即可见，因为 Google Chat 可能会缓存链接预览。另外，如果数据在 React 中动态加载，请确保您的服务器配置为处理 SSR。

Answer 2

使用 Express.js 为 React 应用程序实现服务器端渲染 (SSR) 涉及几个步骤。下面是一个帮助您入门的基本示例。此设置假设您有一个 React 应用程序并希望使用 Express.js 添加 SSR 功能。

第 1 步：设置 Express 服务器

首先，创建一个 Express 服务器来处理 React 组件的渲染。

const express = require('express');
const fs = require('fs');
const path = require('path');
const ReactDOMServer = require('react-dom/server');
const App = require('./src/App'); // Import your main App component

const PORT = process.env.PORT || 3000;
const app = express();

app.use('^/$', (req, res, next) => {
  fs.readFile(path.resolve('./build/index.html'), 'utf-8', (err, data) => {
    if (err) {
      console.log(err);
      return res.status(500).send("Some error happened");
    }
    return res.send(
      data.replace(
        '<div id="root"></div>',
        `<div id="root">${ReactDOMServer.renderToString(<App />)}</div>`
      )
    );
  });
});

app.use(express.static(path.resolve(__dirname, '..', 'build')));

app.listen(PORT, () => {
  console.log(`App launched on ${PORT}`);
});

第 2 步：更新您的构建脚本

修改您的

package.json

以包含用于构建客户端和服务器端的脚本：

"scripts": {
  "start": "node server.js",
  "build": "react-scripts build",
  "build:ssr": "npm run build && babel src -d server -s --copy-files"
}

第 3 步：错误处理

在 Express 服务器中，添加用于错误处理的中间件：

app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send('Something broke!');
});

Answer 3

在 Helmet 组件内，您可以设置动态元标记。对于图像，您可以使用类似以下内容：

<Helmet>
  <meta property="og:image" content={`https://${siteUrl}/B41934D2-76B2-4845-B2E2-C554CC16FFFF.jpg`} />
</Helmet>