在社交平台或其他应用程序中共享时，如何呈现共享帖子的倾斜度和标签？

问：

我需要在通过 Facebook 或其他应用或消息分享帖子时呈现帖子的标题。

我想要这样的东西：

但是，我的帖子显示了应用程序的实际标题，这不是我想要的。共享时，我希望根据帖子的元标记动态显示帖子的确切标题，而不是我的应用程序的主要描述

不要像下图这样的东西

使用 React-helmet

为了渲染帖子的标题，我使用 React-helmet 异步将标题和 meta 标记更改为运行时的客户端渲染。这些更改在检查后可见，但在页面源（帖子上的 Ctrl + U）和社交媒体共享上不可见。

我index.html

<title>my title</title>
  <meta
  name="description"
  content="test description"
/>

我在其中一个页面上的代码

    <Helmet>
    <title>{title}</title>
    <meta name='description' content={description} />
    </Helmet>

然后，我将 app.js 与 react-helmet 包装为

  <HelmetProvider>
    <App/>
  </HelmetProvider>

您可以从以下链接复制问题（基于 react-helmet）：

https://preview-react-helmet-meta-ta.samsara-web.pages.dev/discussions/discussions-details/419

这个问题可以用 React-helmet 解决吗？

React-snap
这是另一个在过去四年中没有更新的软件包。

若要更改源文件，必须从服务器呈现源文件。我使用 react-snap 预渲染 HTML 文件，但是遇到了以下问题。

The build folder is ready to be deployed.
19:36:10.984    You may serve it with a static server:
19:36:10.984    
19:36:10.984      yarn global add serve
19:36:10.984      serve -s build
19:36:10.984    
19:36:10.984    Find out more about deployment here:
19:36:10.985    
19:36:10.985      https://cra.link/deployment
19:36:10.985    
19:36:11.124    $ react-snap
19:36:13.427    🔥  pageerror at /: SyntaxError: Unexpected token '<'
19:36:13.427    
19:36:13.528    ️️️💬  console.log at /: Buffered flag does not support the 'longtask' entry type.
19:36:13.634    ️️️💬  console.log at /: ServiceWorker registration successful with scope: http://localhost:45678/
19:36:13.723    ️️️⚠️  warning at /: got 403 HTTP code for https://accounts.google.com/gsi/client
19:36:13.724    ️️️💬  console.log at /: Failed to load resource: the server responded with a status of 403 ()
19:36:13.733    ️️️💬  console.log at /: An <img> element was lazyloaded with loading=lazy, but had no dimensions specified. Specifying dimensions improves performance. See https://crbug.com/954323
19:36:14.638    ️️️💬  console.log at /: Access to XMLHttpRequest at 'https://cloudflareinsights.com/cdn-cgi/rum' from origin 'http://localhost:45678' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://localhost' that is not equal to the supplied origin.
19:36:14.639    ️️️💬  console.log at /: Failed to load resource: net::ERR_FAILED
19:36:19.024    ✅  crawled 52 out of 52 (/)
19:36:19.083    
19:36:19.107    error Command failed with exit code 1.
19:36:19.107    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
19:36:19.127    Failed: build command exited with code: 1
19:36:20.854    Failed: an internal error occurred

我package.json

"scripts": {
  "postbuild": "react-snap"
}

我index.js

const MyApp = () => (
  <Provider store={store}>
    <SWRConfig
      value={{
        fetcher,
        dedupingInterval: 10000,
        onError: (error, key) => {
          if (error.status !== 403 && error.status !== 404) {
            // TODO Implement sentry integration
          }
        },
        onErrorRetry: (error, key, config, revalidate, { retryCount }) => {
          if (error.status === 404) return
          if (retryCount >= 7) return
          setTimeout(() => revalidate({ retryCount }), 5000)
        }
      }}
    >
      <ErrorBoundary>
        <App />
      </ErrorBoundary>
    </SWRConfig>
  </Provider>
)

const rootElement = document.getElementById('root')
if (rootElement.hasChildNodes()) {
  ReactDOM.hydrate(<MyApp />, rootElement)
} else {
  ReactDOM.render(<MyApp />, rootElement)
}

在进一步的研究中，我发现服务器端渲染可以解决这个问题。然而，在服务器端渲染 React 应用程序组件是具有挑战性的。有一种潜在的解决方案是使用具有复杂配置的 Express Server，这里讨论过 https://blog.logrocket.com/adding-dynamic-meta-tags-react-app-without-ssr/ 。

目前，我正在使用 React 和 React-dom 版本 17.0.2。

可用于检查的示例帖子之一是 https://samsara.social/discussions/discussions-details/215/the-dark-triad-in-primates-mind-machiavellian-inte 或 samsara.social 网络应用程序上的任何其他帖子。