搜索引擎索引如何为像REACT这样的JavaScript web应用程序工作？

我计划为我的应用程序实现react.js。由于我是react新手，我怀疑google将如何索引react组件？ 要使应用程序在谷歌搜索中正确可见，需要什么样的最佳实践

任何人都有任何想法，请帮我解决这个问题。

如果你看一看，你会发现谷歌建议不要在单个页面（或他们称之为AJAX）应用程序上对SEO做任何不同的事情，其中包括react

他们并没有详细介绍他们是如何做到这一点的，但只要你的应用程序是在语义上构建的，并且呈现得非常快，它就应该排名

它们非常注重性能，渲染时间越快，排名越高。与服务器端呈现相比，这使所有单页应用程序处于主要劣势

---

如果您需要一些更具体的指导-。

，那么我可以放心地说，我已经获得了一个带有API调用的react SPA，可以在googlebot中完美呈现（Fetch and render）。因此，这不是一项不可能完成的任务，但我要说的是，在此过程中没有多少文档可以帮助您

因为听起来你已经有了一个新的应用程序，我将概述两种你可能使用的方法

服务器端预渲染（SSR） 从服务器端预渲染（SSR）开始，并坚持下去。在react中有很多方法可以做到这一点，这最终意味着您需要坚持使用支持SSR的同构库

然而，通过SSR路径，被google索引的几率要高得多，因为你根本不必依赖googlebot与你的JS一起工作

客户端渲染（普通JS应用程序） 只需构建一个没有SSR的普通React应用程序。。基本上一切照旧。好处是，您不必处理任何附加的SSR复杂性，也不局限于同构的库。基本上，这是最简单的，但是你必须希望你的JS能够被Googlebot编译并正确运行

我的观察 我要说的是，服务器端预渲染有时很难工作，因为很多库可能不支持它，这反过来又会带来很多您不想处理的复杂性

客户端渲染路线与往常一样，我可以确认它确实可以与Googlebot一起工作。以下是我为使客户端渲染正常工作所做的工作：

尽早将“babel polyfill”添加到我的导入列表中

内联我的Javascript，以减少总的加载时间并减少不必要的调用。我和你一起做的，但是你可以用任何你想要的方式来做

向英国《金融时报》polyfill添加了一个外部电话（不确定是否需要此电话）

NODE_ENV=生产在这里也会有所帮助。这会减少你包裹的总尺寸

对于C#上的任何人来说，这就是它看起来的样子这可能看起来像：

clientWithRender.jsx（我的jsx的入口点）

从“React”导入React；
从“react dom”导入react dom；
进口“babel polyfill”；
从“/App/App.jsx”导入应用程序；
从“react Router”导入{Router，Route，indexRouter，hashHistory}；
ReactDOM.render(
,
document.getElementById（'App'）；

Index.cshtml

<script src="https://ft-polyfill-service.herokuapp.com/v2/polyfill.min.js"></script>
@Html.InlineScriptBlock("~/Scripts/react/react.clientWithRender.bundle.js")

@InlineScriptBlock（“~/Scripts/react/react.clientWithRender.bundle.js”）

@andy当我们在客户端渲染react时，我想知道如何进行索引？因为html页面只有一个div，react组件将在其中呈现。您是否有任何链接说明客户端将执行适当的索引？谢谢你的帮助。@AndyRay，这并不总是正确的，它不是那么简单。@AndyRay我真的很想看看你在这方面的研究。这将帮助许多像我这样的新开发者做出反应。桑迪·雷没有做这方面的研究。他只是出于沮丧而大发雷霆，很可能是因为其他人也对他这样做了。请不要惊慌失措，我希望你在对别人做同样的事之前先咬紧牙关。我们是一个社区的建设者和解决者，蔑视只会让我们的集体解决之旅变得更加困难。干杯，第二个环节没了。

<script src="https://ft-polyfill-service.herokuapp.com/v2/polyfill.min.js"></script>
@Html.InlineScriptBlock("~/Scripts/react/react.clientWithRender.bundle.js")