简体繁体 English

如何在 React js 应用程序中为 seo 和社交共享动态添加元标记

[英]How to dynamically add meta tags for seo and social share in react js app

原文 2021-02-14 16:12:55 5 2 javascript/ node.js/ reactjs/ server-side-rendering

I am currently working on news website using react js (backend express js rest api).我目前正在使用 react js（后端快递 js rest api）在新闻网站上工作。 This site need social share functionality with image and title of the post.该站点需要具有帖子图像和标题的社交共享功能。 I add meta tags using helmet.我使用头盔添加元标记。 I tried pre-render-packages too, Even though this not showing images of the post when sharing.我也尝试了预渲染包，即使共享时没有显示帖子的图像。 Can I achieve this using api without server side rendering.我可以在没有服务器端渲染的情况下使用 api 来实现这一点吗？ help me to done this.帮我做到这一点。

2 个解决方案

As far as I know, while you can change meta tags with javascript (see the answers to this question most consumers of meta tags (Facebook, Twitter, etc) request the document from the server, but don't execute any javascript on that page. That way, the scraper consumes less resources, and reduces the number of attack vectors. That means you will need some way to return specific dynamic values in the <head> for different URLs from a server. SSR is probably the best way to do that – at this point, there should be enough different tools/options that it shouldn't be too hard, and you don't need to run two different systems to render markup, one server-side, the way you would if you did something like dynamically alter the contents of your index page.据我所知，虽然您可以使用 javascript 更改元标签（请参阅此问题的答案，大多数元标签消费者（Facebook、Twitter 等）从服务器请求文档，但不要在该页面上执行任何 ZDE9B9ED78D7E2E119DCEEFFEE780E2 . 这样，scraper 消耗更少的资源，并减少攻击向量的数量。这意味着您将需要一些方法来在<head>中为来自服务器的不同 URL 返回特定的动态值。SSR 可能是最好的方法那 - 在这一点上，应该有足够不同的工具/选项，它不应该太难，你不需要运行两个不同的系统来呈现标记，一个服务器端，如果你这样做的话诸如动态更改索引页面的内容之类的东西。

I done this using next.js (the react framework).我使用next.js （反应框架）完成了这项工作。 This can make API call and generate html in the server.这可以使 API 调用并在服务器中生成 html。 With this SEO and share with title and image is working properly.使用此 SEO 并与标题和图像共享正常工作。