在社交平台或其他應用程序中共享時如何呈現共享帖子的標題和標簽？

Question

這個賞金已經結束了。 此問題的答案有資格獲得+50聲望賞金。 賞金寬限期在10 小時后結束。 everestial007正在尋找規范的答案：

尋找一種解決多個社交媒體共享問題的方法。

當通過 Facebook 或在其他應用程序或消息中共享帖子時，我需要呈現帖子的標題。

我想要這樣的東西：

但是，我的帖子顯示了應用程序的實際標題，這不是我想要的。 共享時，我希望根據帖子的元標記動態顯示帖子的確切標題，而不是我的應用程序的主要描述

不要像下圖這樣的東西

使用反應頭盔

為了呈現帖子的標題，我使用React-helmet async在運行時將標題和元標記更改為客戶端呈現。 這些更改在后期檢查期間可見，但不會顯示在頁面源代碼（在帖子中按 Ctrl + U）和社交媒體共享。

我的index.html

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

我的代碼在其中一個頁面上

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

然后我用 react-helmet 包裝 app.js 作為

  <HelmetProvider>
    <App/>
  </HelmetProvider>

您可以從此鏈接復制問題（基於 react-helmet）：

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

這個問題可以用 React-helmet 解決嗎？

反應快
這是最近四年沒有更新的另一個package。

要更改源文件，它必須從服務器呈現。 我使用 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或輪回上的任何其他帖子。社會 web 應用程序。

Answer 1

您必須實施類型過多的開放圖標簽。

<Helmet>
     // dynamically creating title and helmet will inject it
    <title>{title}</title>
     // og stands for open graph
    <meta property="og:title" content="Users app" />
  </Helmet>

Answer 2

對於每個文章頁面，您的元標題和描述都需要根據您的文章標題和描述進行更改，以便在您共享文章鏈接時呈現它。 從您的頁面正確傳遞元標記內容。