javascript - 如何使用 `react-share` 包在 Twitter 和 Facebook 上分享图片和描述？

Question

这是我的头盔代码。

<Helmet>
  <meta property="og:image" content={shareImg} />
  <meta property="og:image:secure_url" content={shareImg} />
</Helmet>

此代码片段适用于 Twitter 和 Facebook 共享按钮。

<li>
  <TwitterShareButton
    url={shareURL}
    title={shareTitle}
    className="social-icons"
  >
    <TwitterIcon size={24} />
  </TwitterShareButton>
</li>
<li>
  <FacebookShareButton
    url={shareURL}
    quote={shareTitle}
    className="social-icons"
>
    <FacebookIcon size={24} />
  </FacebookShareButton>
</li>

但它不起作用。如果有人可以帮助解决这个问题，那就太好了。

标签： javascripthtmlreactjsnpm

Answer 1

为了让 Facebook 和 Twitter 显示您的页面的预览，包括。图像、标题等，您需要进行服务器端渲染。

您可以通过利用诸如 NextJS 之类的库来实现这一点，使用 NodeJS 服务器自己构建它，或者您可以使用 www.prerender.io 使其超级简单和快速。它将抓取您的页面并将服务器端呈现的页面提供给所有爬虫和社交媒体平台。