react标记组件_React应用中的动态元标记

react标记组件

Single page applications and progressive web apps are fastly becoming the global standard for website and app development, they’re fast, reliable, extensible and have an incredible community of developers behind it.

单页应用程序和渐进式Web应用程序正Swift成为网站和应用程序开发的全球标准，它们快速，可靠，可扩展，并且背后拥有令人难以置信的开发人员社区。

React and the Create react app project are the prefered framework choice for millions of developers all over the world.

React和Create react应用程序项目是全球数百万开发人员的首选框架选择。

One of the biggest drawbacks of single page applications is SEO, if you have only one page you wont be able to render different metatags for your internal routes, there are many solutions like react-helmet that can help you change the metatags dynamically while the user is navigating your app, but this solution wont work for crawlers like googlebot, facebook bot etc.

单页应用程序的最大缺点之一是SEO，如果只有一页您将无法为内部路由呈现不同的元标记，那么有许多解决方案(例如react-helmet)可以帮助您在用户使用时动态更改元标记正在浏览您的应用，但是此解决方案不适用于googlebot，facebook bot等爬虫。

So, how to add dynamic SEO metatags to your create-react-app?

那么，如何在您的create-react-app中添加动态SEO元标记？

You could solve this issue by rendering static pages for each route you have or developing your app from the beginning with a framework that can handle this problem like next.js.

您可以通过为每条路线呈现静态页面来解决此问题，或者从一开始就使用可处理此问题的框架(例如next.js)开发应用程序。

But what if you don’t want to configure prerendering for your app and just want the crawlers to read custom metadata depending on the url.

但是，如果您不想为应用程序配置预渲染，而只希望爬网程序根据URL读取自定义元数据该怎么办。

Express.js抢救 (Express.js to the rescue)

Express.js is a minimal back end framework for node.js, to install it just run

Express.js是node.js的最小后端框架，只需运行即可安装

npm install express — save

npm install express —保存

For this solution you will use express to serve your react build, create a server folder in the root of your project and add the index.js file inside it. Then create a simple express server.

对于此解决方案，您将使用express服务您的react build，在项目的根目录中创建一个服务器文件夹，并在其中添加index.js文件。 然后创建一个简单的快递服务器。

This solution would help you to add custom metadata to your react app, however it would do the same for Vue or Angular apps, or for other single page application frameworks

该解决方案将帮助您将自定义元数据添加到您的react应用程序中，但是对于Vue或Angular应用程序或其他单页应用程序框架也是如此

Now lets make sure that express returns your build for all routes:

现在，请确保Express返回所有路径的构建：

Great, we are serving our create-react-app with express.js.

太好了，我们正在通过express.js服务我们的create-react-app。

We still need to add custom metadata for the crawlers, for this we need to install a crawler detection tool like es6-crawler-detect

我们仍然需要为搜寻器添加自定义元数据，为此，我们需要安装像es6-crawler-detect这样的搜寻器检测工具

npm install es6-crawler-detect

npm install es6-crawler-detect

Now in every call to a route we can detect if that call is coming from a crawler, the es6-crawler-detect tool uses the user agent header for that

现在，在对路由的每次调用中，我们都可以检测到该调用是否来自搜寻器，es6-crawler-detect工具将用户代理标头用于

Now the fun part, if a crawler is detected we will read the index.html file and make a simple text replacement, for this we need to add placeholders in our index.html metatags:

现在有趣的部分是，如果检测到搜寻器，我们将读取index.html文件并进行简单的文本替换，为此，我们需要在index.html元标记中添加占位符：

You’ll be wondering, why not just do the replacement everytime and avoid the crawler detection? the main answer is that usually you will get the metadata from an external API, and such calls can sometimes be slow and impact the loading speed of your app.

您会想知道，为什么不每次都进行更换并避免搜寻器被发现？ 主要的答案是，通常您会从外部API获取元数据，这样的调用有时可能很慢，并且会影响应用程序的加载速度。

The fs package is needed for reading the index.html contents

需要fs包才能读取index.html内容

We’re replacing metatags for all routes, now we need to add custom data to each route of the project, or at least the routes that need an special SEO treatment, we could do this in many ways:

我们正在替换所有路线的元标记，现在我们需要向项目的每个路线或至少需要特殊SEO处理的路线添加自定义数据，我们可以通过多种方式实现此目的：

1. Create a custom server route for each react route
   为每个React路线创建一个自定义服务器路线

2. Create a SEO dictionary and replace the metatags depending on the route

2.创建一个SEO词典，并根据路线替换元标记

3. Most common, get the data from your API server

3.最常见的是，从您的API服务器获取数据

Modern web application are usually connected to an external API you can get the metadata from the API and replace the react metatags with it

现代Web应用程序通常连接到外部API，您可以从API获取元数据并用它替换react metatags

That’s it! you could tweak the code to fit your app, there are many ways to solve this problem but I’ve found this solution to be the fastest and easiest to implement, I really hope it could help you save hours of research.

而已！ 您可以调整代码以适合您的应用程序，有很多方法可以解决此问题，但我发现该解决方案是最快，最容易实现的解决方案，我真的希望它可以帮助您节省大量的研究时间。

I crafted the googlebot for this article with polymer clay, you can see the process here

我使用高分子粘土为本文制作了googlebot，您可以在此处查看流程

Thanks for reading! 🙏

谢谢阅读！ 🙏

Originally published at https://codeandclay.io on August 1, 2020.

最初于 2020年8月1日 发布在 https://codeandclay.io 。

翻译自: https://medium.com/@jspolancor/dynamic-metatags-in-your-react-app-cd1c2a5f7917

react标记组件