React Helmet SEO

Question

I am using React Helmet in my React Application (CRA) to boost up my SEO. The App does not use SSR! I want to keep the client side rendering.

\n

My current set up is as follows:

\n

\n
• removed <title> </title> from index.html
\n
• removed <noscript> </noscript> from index.html
\n

\n

Added to my App.js (here my React Router is set up):

\n

<Helmet> <title>VOYD Fabrics | Streetwear Online | Keine Versandkosten</title> <meta name="description" content="Willkommen bei VOYD Fabrics. Wir bieten dir durchdachte Streetwear aus einer Hand. Unser Label steht f\xc3\xbcr klassische Designs, nachhaltige Produktion und ein nutzerfreundliches Shopping-Erlebnis." /> </Helmet>

\n

Also I added to every single Route in my App:

\n

<Helmet> <title>Page Title</title> <meta name="description" content="Page Description"/> </Helmet>

\n

Unfortunatley the Google Result Page does not show any title or description, just the plain link to the website:

\n

\n

How do I set up React Helmet in a proper way in a CRA?

\n

I also checked the URL via Google Search Console and it says <title/>.\nActually I thought that react helmet is overriding this value?

\n

Answer 1

React Helmet 实际上对 Google、FB、Twitter SEO 没有任何作用，因为爬虫机器人会在 React Helmet 更改元数据标头之前获取元数据。这意味着 Helmet 对于客户端渲染来说毫无用处。我进行了更多研究，发现了一些其他方法可以使 React 与 SEO 变得友好：

• 更改为 NextJS，一个 React 的 ssr 框架。这意味着您必须更改大量代码。
• 使用预渲染技术，例如：react-snap、prerender.io。但它们只支持静态页面，每天都在变化的动态页面需要花费很大的精力。最后我得到了 prerender.io 的想法并创建了我自己的解决方案。

我的项目使用 React 作为前端，Nest 作为后端（实际上它可以是任何框架，在我们的例子中并不重要），nginx 作为代理。全部部署在EC2中。我更改了 nginx.conf 的配置。因此它可以检测请求是否来自 Google 或 FB 机器人，我们使用元数据标记渲染 html 站点。Google bot 实际上看到了这个 html 页面，但没有看到 React 页面。

  set $prerender 0;
if ($http_user_agent ~* "googlebot|bingbot|yandex|baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest\/0\.|pinterestbot|slackbot|vkShare|W3C_Validator|whatsapp") {
            set $prerender 1;
}
        if ($prerender = 1) {
                rewrite ^/srv/(.*) /srvs/$1;
        }

如上所示，如果 Google bot 来抓取博客页面http://ourpage.com/srv/:id，nginx 会覆盖它，因此显示的页面是 srvs/:id 。下一步，srvs/:id中发生了什么？

location /srvs {            
   proxy_pass http://xx.xxx.xx.xxx:3001;
                            
}

srvs/:id现在实际上是由我们的缓存服务器创建的（它可以是我们的后端服务器）。后端将查询数据库，获取数据并返回标题中包含元数据的 html 文件。现在 Google、FB 机器人都可以获取它并像其他服务器端渲染网站一样显示预览、描述。

我在这里发布我的实现：https://gist.github.com/phongnt57/70a5c1c34e5a294120b46487599937b0/revisions

prerender.io 的原始解决方案： https ://gist.github.com/thoop/8165802