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

2 回答

• 12

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

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

  服务器端预渲染（SSR）

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

  然而，通过沿着SSR路径下去，谷歌索引的可能性要高得多，因为你根本不需要依赖googlebot和你的JS一起工作 .

  客户端渲染（普通的JS应用程序）

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

  我的观察

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

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

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

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

  • 添加了对财务时间polyfill的外部调用（不确定是否有必要）

  • 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")
  

  回复于 2024-05-06T12:07:10+08:00
• 17

  如果您看一下at this article from 2015 on the Google Webmaster Central Blog，您可以看到谷歌建议不要在单个页面（或称为AJAX）应用程序上做任何不同的SEO - 这将包括反应 .

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

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

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

  回复于 2024-05-06T12:07:10+08:00