it-swarm.asia

搜索引擎索引如何用于JavaScript Web应用程序(例如REACT)?

我打算为我的应用程序实现react.js。由于我是新来的反应者,我对此感到怀疑,谷歌将如何索引反应成分?以及使应用程序在Google搜索中正确可见所需的最佳实践是什么?.

任何人有任何想法请对此提供帮助。

26
suyesh

因此,可以肯定地说,我已经获得了带有API调用的react SPA,可以在googlebot中完美呈现(提取和呈现)。因此,这不是一项不可能的任务,但是我会说没有太多的文档可以帮助您。

既然听起来您已经有了一个新的应用程序,那么我将概述两种可能会失败的途径。

服务器端预渲染(SSR)

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

但是,通过采用SSR路径,由于您根本不必依靠googlebot与JS配合使用,因此被Google索引的机会大大增加。

客户端渲染(普通的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")
17
WillHua

如果您看一下 在2015年发表在Google网站站长中央博客上的这篇文章中 ,您会发现Google建议不要在单个页面(或他们称为AJAX)应用程序上对SEO做任何不同的事情-将包括反应。

他们没有对它们的执行方式进行详细的介绍,但是只要您的应用程序是在语义上构建的并且呈现速度非常快-它就应该排名。

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

如果您需要更具体的指导- 这似乎是一个很好的起点

12
mikegeyser