react添加标签_让我们向React应用添加动态元标签

react添加标签

Adding meta tags is easy right? yeah but not for React apps. Making your site SEO friendly is one of the major things that everyone cares about. One of the challenges of deploying an app built with create-react-app is that it is rendered entirely client-side. Although Google can render JavaScript content when crawling a site, it doesn’t always, and there is always the risk that your JavaScript bundle will fail anyway. So how to get over this? You’ll know the answer by the end of this.

设置 meta标签很容易，对吗？ 是的，但不适用于React应用程序。 使您的网站SEO友好是每个人都关心的主要事情之一。 部署使用create-react-app app构建的应用程序的挑战之一是完全在客户端呈现。 尽管Google可以在抓取网站时呈现JavaScript内容，但并非总是如此，并且始终存在JavaScript捆绑包仍然会失败的风险。 那么如何克服呢？ 到此为止，您将知道答案。

As always let me start with why had to do this. I recently started my internship at Rootcode Labs. So I got this awesome project to work on. It’s called Aphelia. Aphelia is an AI-based resume parser API that can seamlessly integrate with your recruitment application. This is the future of resume parsers. My task was to build a React website to showcase this awesome AI. So to make this React app SEO friendly I needed to add meta tags for each page.

一如既往，让我从为什么必须这样做开始。 我最近开始在Rootcode Labs实习。 所以我得到了这个很棒的项目。 叫做Aphelia 。 Aphelia是基于AI的简历解析器API，可以与您的招聘应用程序无缝集成。 这就是简历解析器的未来。 我的任务是建立一个React网站来展示这种出色的AI。 因此，要使此React应用程序SEO友好，我需要为每个页面添加meta标签。

I started my research and found these two libraries which will help me to achieve this.

我开始研究，发现了这两个库，它们将帮助我实现这一目标。

1.React快照 (1. React Snapshot)

This gives static pre-renderer for React apps. React snapshot takes a static site snapshot of all your publicly-accessible pages & leaving anything requiring authentication as a normal. These snapshots still have the normal JS bundle included, so once that downloads the site it will function exactly as before (i.e. instantaneous page transitions), but serve you real, functional HTML & CSS as soon as possible. All you have to do is add this to your index.js and update your package.json file with build”: “react-scripts build && react-snapshot” .

这为React应用程序提供了静态的预渲染器。 React快照会为您所有可公开访问的页面拍摄静态站点快照，并保留所有需要身份验证的内容。 这些快照仍然包含普通的JS捆绑包，因此一旦下载了站点，它将完全像以前一样运行(即，瞬时页面转换)，但是会尽快为您提供真正的功能HTML和CSS。 您所要做的就是将其添加到index.js并使用build”: “react-scripts build && react-snapshot”更新package.json文件build”: “react-scripts build && react-snapshot” 。

If you run npm run build you’ll see it will detect your react-routes and create a static HTML page for each route inside your build directory.

如果您运行npm run build ，则会看到它将检测您的react-routes并在build目录中为每个路由创建一个静态HTML页面。

2.React头盔 (2. React Helmet)

This reusable React component will manage all of your changes to the document head. Helmet takes plain HTML tags and outputs plain HTML tags. With React helmet we can embed meta tags, title, link, script to components.

这个可重用的React组件将管理您对文档头的所有更改。 头盔采用纯HTML标记并输出纯HTML标记。 使用React头盔，我们可以将meta标签，标题，链接，脚本嵌入组件。

Using React Helmet is super easy. Here’s an example code snippet,

使用React Helmet非常简单。 这是一个示例代码片段，

Once you used these two libraries it will do the rest of things for you. Snapshot will do the static Pretty cool right? No need to worry about anything else. If you use this Facebook sharing debugger tool you can easily test how your meta tags are doing.

一旦使用了这两个库，它将为您完成其余的工作。 快照会做静态的很酷吧？ 无需担心其他任何事情。 如果您使用此Facebook共享调试器工具 ，则可以轻松测试元标记的运行情况。

I hope this gives you a small idea on how to achieve this. Please make sure to go through the documentation for each library before doing this. Make sure to check out our Aphelia site also. Have a nice day! See you in the next one. PEACE!✌️

我希望这能使您对如何实现这一目标有所了解。 在执行此操作之前，请确保仔细阅读每个库的文档。 请务必同时查看我们的Aphelia网站。 祝你今天愉快！ 下一个见。 和平！✌️

翻译自: https://medium.com/@anjulashanaka/lets-add-dynamic-meta-tags-to-a-react-app-9bffd44f6990

react添加标签