如何在 React JS 应用程序中为 seo 和社交共享动态添加元标记
How to dynamically add meta tags for seo and social share in react js app
我目前正在使用 React js 开发新闻网站（后端 express js rest api）。此站点需要具有 post 图像和标题的社交共享功能。我使用头盔添加元标记。我也尝试了 pre-render-packages，即使这在共享时不显示 post 的图像。我可以在没有服务器端渲染的情况下使用 api 来实现吗？帮我完成这个。
据我所知，虽然您可以使用 javascript 更改元标记（请参阅 this question 的答案，但元标记的大多数消费者（Facebook、Twitter 等）从服务器，但不要在该页面上执行任何 javascript。这样，抓取程序会消耗更少的资源，并减少攻击向量的数量。这意味着您将需要一些方法来 return 特定的动态值在来自服务器的不同 URL 的 <head> 中。SSR 可能是最好的方法 - 在这一点上，应该有足够多的不同 tools/options，它不应该太难，而且你不不需要 运行 两个不同的系统来呈现标记，一个在服务器端，就像您执行动态更改索引页面内容的方式一样。
我使用 next.js（反应框架）完成了这项工作。这可以使API调用并在服务器中生成html。使用此 SEO 并与标题和图像共享工作正常。
我目前正在使用 React js 开发新闻网站（后端 express js rest api）。此站点需要具有 post 图像和标题的社交共享功能。我使用头盔添加元标记。我也尝试了 pre-render-packages，即使这在共享时不显示 post 的图像。我可以在没有服务器端渲染的情况下使用 api 来实现吗？帮我完成这个。
据我所知，虽然您可以使用 javascript 更改元标记（请参阅 this question 的答案，但元标记的大多数消费者（Facebook、Twitter 等）从服务器，但不要在该页面上执行任何 javascript。这样，抓取程序会消耗更少的资源，并减少攻击向量的数量。这意味着您将需要一些方法来 return 特定的动态值在来自服务器的不同 URL 的 <head> 中。SSR 可能是最好的方法 - 在这一点上，应该有足够多的不同 tools/options，它不应该太难，而且你不不需要 运行 两个不同的系统来呈现标记，一个在服务器端，就像您执行动态更改索引页面内容的方式一样。
我使用 next.js（反应框架）完成了这项工作。这可以使API调用并在服务器中生成html。使用此 SEO 并与标题和图像共享工作正常。