搜索引擎索引如何为REACT等JavaScript Web应用程序工作？

Question

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

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

Answer 1

所以我可以肯定地说,我已经通过API调用获得了一个反应SPA,以便在googlebot(Fetch和Render)中完美呈现.所以这不是一个不可能的任务,但我会说没有太多的文档可以帮助你.

既然听起来你有一个新的应用程序,我会概述你可能会失败的两个途径.

服务器端预渲染(SSR)

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

然而,通过沿着SSR路径下去,被谷歌索引的机会显着更高,因为你根本不必依赖googlebot与你的JS合作.

客户端渲染(一个普通的JS应用程序)

只需构建一个没有SSR的正常React应用程序..基本上像往常一样.好处是您不必处理任何增加的SSR复杂性,并且您不仅限于同构的库.基本上这是最简单的,但你必须希望你的JS编译并由Googlebot正确运行.

我的观察

我会说服务器端预渲染有时很难开始工作,因为许多库可能不支持它,这反过来又引入了许多你不想处理的复杂性.

客户端渲染路线真的像往常一样,我可以确认它实际上与Googlebot一起工作.继承人我做了什么让客户端渲染工作:

1. 尽早将"babel-polyfill"添加到我的导入列表中

2. 内联我的Javascript以减少总体加载时间并最大限度地减少不必要的调用.我用Razor(C#)做了这个,但你可以用你想要的任何方式做到这一点.

3. 添加了对财务时间polyfill的外部调用(不确定是否有必要)

4. NODE_ENV =生产也会有所帮助.它会减少你的捆绑的总体大小

对于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'));

Index.cshtml

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

Answer 2

如果您从2015年的Google网站站长中心博客上看一下这篇文章,您可以看到谷歌建议不要在单个页面(或称为AJAX)应用程序上做任何不同的SEO - 这将包括反应.

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

他们非常注重性能,更快的渲染时间导致更高的排名.这使得所有单页应用程序在服务器端呈现方面处于主要劣势.

如果你想要一些更具体的指导 - 这似乎是一个非常好的起点.