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

【问题标题】：How does Search Engine indexing work for JavaScript web applications like REACT?搜索引擎索引如何为像 REACT 这样的 JavaScript Web 应用程序工作？
【发布时间】：2017-02-21 03:33:16
【问题描述】：

我计划为我的应用程序实现 react.js。由于我是新来的反应，我有一个疑问，谷歌将如何索引反应组件？以及使应用程序在谷歌搜索中正确可见所需的最佳实践是什么。

任何人有任何想法请帮助我。

【问题讨论】：

@andy 当我们在客户端渲染反应时，我想知道索引将如何完成？因为 html 页面将只有一个 div 用于呈现 react 组件。您是否有任何链接说明客户端反应将进行正确的索引？感谢您的帮助。
@AndyRay，这并不总是正确的，它并不那么简单。
@AndyRay 我真的很想看看你对此的研究。它将帮助许多像我这样的新开发人员做出反应。谢谢
Andy Ray 没有对该主题进行研究。他只是因为沮丧而猛烈抨击，很可能是因为其他人对他做了同样的事情。请不要灰心，我希望你在对别人做同样的事情之前先咬住自己的舌头。我们是一个建设者和解决者的社区，蔑视只会让我们集体寻求解决方案的旅程更加困难。干杯。

标签： javascript reactjs seo react-redux babeljs

【解决方案1】：

所以我可以肯定地说，我已经获得了一个带有 API 调用的 react SPA，可以在 googlebot（获取和渲染）中完美呈现。所以这不是一项不可能完成的任务，但我会说没有多少文档可以帮助你。

因为听起来你有一个新应用程序，所以我将概述你可能会走的两条途径。

服务器端预渲染 (SSR)

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

但是，通过 SSR 路径，被 google 索引的机会要高得多，因为您根本不必依赖 googlebot 来处理您的 JS。

客户端渲染（一个普通的 JS 应用）

只需构建一个没有 SSR 的普通 React 应用程序。基本上一切照旧。好处是您不必处理任何增加的 SSR 复杂性，并且您不限于同构的库。基本上这是最简单的，但您必须希望您的 JS 编译并由 Googlebot 正确运行。

我的观察

我会说服务器端预渲染有时非常难以工作，因为很多库可能不支持它，这反过来又会引入很多您不想处理的复杂性。

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

尽早将“babel-polyfill”添加到我的导入列表中
内联我的 Javascript 以减少整体加载时间并最大限度地减少不必要的调用。我使用 Razor (C#) 完成了此操作，但您可以按照自己的方式进行操作。
添加了对金融时报 polyfill 的外部调用（不确定是否有必要）
NODE_ENV=production 在这里也会有所帮助。它会减少你的捆绑包的整体大小

对于任何使用 C# 的人来说，这可能是这样的：

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

import React from "react";
import ReactDOM from "react-dom";
import 'babel-polyfill';

import App from "./App/App.jsx";
import { Router, Route, indexRouter, hashHistory } from "react-router";

ReactDOM.render(
<App></App>,
document.getElementById('App'));

索引.cshtml

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

【讨论】：

【解决方案2】：

如果您查看at this article from 2015 on the Google Webmaster Central Blog，您会发现 google 建议不要在单个页面（或者他们称之为 AJAX）应用程序上为 SEO 做任何不同的事情 - 这将包括反应。

他们并没有详细说明他们是如何做到的，但只要您的应用程序在语义上构建并且渲染速度非常快 - 它就应该排名。

他们非常重视性能，更快的渲染时间会带来更高的排名。与服务器端渲染相比，这使所有单页应用程序处于主要劣势。

如果您需要更具体的指导 - this seems like a really good place to start。

【讨论】：

第二个链接失效了。