我想将社交媒体分享添加到我的React SPA中，而不使用SSR。所以当你分享一个带有特定参数的链接到Facebook / Twitter等时，你会得到一个自定义的图像/描述/标题。我找到了这个解决问题的指南，但是在NodeJS应用程序中。是否可以在后端使用PHP？
njthzxwz1#
在阅读这篇文章之前，我得出了与链接文章作者相同的结论。社交媒体网站通过使用简单的HTTP GET请求直接阅读HTML来收集og：Meta标签。这个og：meta解析器非常非常不可能在您的网站上执行JavaScript（并等待它完成渲染），因此任何客户端方法（例如使用react-helmet）都注定会失败。如果没有服务器端的渲染，生成og：Meta标签是不可能的，你所链接的文章证实了这一点--他们使用Express，一个服务器框架，来渲染og：meta标签。然而，我认为你的帖子要求的是一种通过后端插入og：Meta标签的方法，同时仍然向用户提供React SPA。这是完全可能的，这篇文章展示了一个可以在PHP中复制的伟大框架。我假设你的PHP后端有一些代码为你的React SPA服务。最直接的解决方案是简单地修改代码，根据请求的路由在<head>中返回og：Meta标签。就是这么简单。你可以使用简单的字符串替换来插入标签，尽管PHP HTML模板引擎会更专业和更容易维护（链接的文章也使用模板引擎）。根据本文，您还可以通过修改路由器来清理此解决方案：
react-helmet
<head>
这样你的浏览器用户就不会在他们的<head>中得到无用的Meta标签，社交媒体爬虫也不会得到无用的<script>和<style>标签。（就我个人而言，因为我很懒，我会为机器人和用户提供相同的HTML。我认为这篇文章的解决方案很干净，但也有点矫枉过正。）
<script>
<style>
vbkedwbf2#
您可以使用react-helmet库将元素添加到head标记中。安装它：
npm i react-helmet // using NPM, or yarn add react-helmet // using Yarn, or pnpm i react-helmet // using PNpm
字符串要使用它，请在每个页面的JSX中添加以下内容：
<Helmet> <meta property="og:title" content="..." /> {/* more tags here */} </Helmet>
型希望这个解决方案就是你要找的。
2条答案
按热度按时间njthzxwz1#
在阅读这篇文章之前，我得出了与链接文章作者相同的结论。社交媒体网站通过使用简单的HTTP GET请求直接阅读HTML来收集og：Meta标签。这个og：meta解析器非常非常不可能在您的网站上执行JavaScript（并等待它完成渲染），因此任何客户端方法（例如使用
react-helmet）都注定会失败。如果没有服务器端的渲染，生成og：Meta标签是不可能的，你所链接的文章证实了这一点--他们使用Express，一个服务器框架，来渲染og：meta标签。
然而，我认为你的帖子要求的是一种通过后端插入og：Meta标签的方法，同时仍然向用户提供React SPA。这是完全可能的，这篇文章展示了一个可以在PHP中复制的伟大框架。
我假设你的PHP后端有一些代码为你的React SPA服务。最直接的解决方案是简单地修改代码，根据请求的路由在
<head>中返回og：Meta标签。就是这么简单。你可以使用简单的字符串替换来插入标签，尽管PHP HTML模板引擎会更专业和更容易维护（链接的文章也使用模板引擎）。根据本文，您还可以通过修改路由器来清理此解决方案：
这样你的浏览器用户就不会在他们的
<head>中得到无用的Meta标签，社交媒体爬虫也不会得到无用的<script>和<style>标签。（就我个人而言，因为我很懒，我会为机器人和用户提供相同的HTML。我认为这篇文章的解决方案很干净，但也有点矫枉过正。）
vbkedwbf2#
您可以使用
react-helmet库将元素添加到head标记中。安装它：
字符串
要使用它，请在每个页面的JSX中添加以下内容：
型
希望这个解决方案就是你要找的。