reactjs - 基于 React 的 SPA 中的 SEO

Question

我有一个使用 React 库构建的单页应用程序（使用了 Create React App）。而且我在应用程序中有不同的路由，例如，我正在使用 React Router 解决这些路由http://<domain-name>.com/faq。未使用服务器端渲染，现在我无法使用它。

我希望该应用程序的内页被 Google 搜索引擎索引。为了做到这一点，我做了接下来的事情：

• 使内页（例如/faq页面）可通过其路由访问
• sitemap.xml在文件夹内创建文件，public以便在构建应用程序时创建 React 应用程序将此文件放入文件/build夹中index.html

站点地图文件包含：

<?xml version="1.0" encoding="utf-8"?>
<urlset
  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9  
  http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd"
>
  <url>
    <loc>https://www.<domain-name>.com</loc>
    <priority>1</priority>
  </url>

  <url>
    <loc>https://www.<domain-name>.com/faq</loc>
  </url>
</urlset>

<domain-name>真正的域名在哪里。为了简单起见，我在这里省略了其余的页面。

但不幸的是，即使在我部署这个应用程序一周后，这些页面也没有被谷歌搜索引擎索引。所以我决定使用谷歌搜索控制台（https://search.google.com/search-console/welcome），发现我所有的内页都找不到。

所以我的问题是如何使站点地图文件中列出的页面被谷歌搜索引擎索引？

注意：我不确定它是否重要，但是当我在浏览器中打开常见问题解答页面并打开 Chrome 开发工具时，我看到有对文档的请求/faq和 404 响应

标签： reactjsreact-routerseosingle-page-application

Answer 1

谷歌应该能够索引 React 应用程序。如果它不能这样做并且看不到您的路线，则您的应用程序中可能有错误。如果它在浏览器中运行，某些东西仍然可能导致 Google 出错。例如，您至少可以使用Google Pagespeed来确保它可以正确呈现您的应用程序。

或者，您可以进行动态渲染——在服务器上为机器人生成纯 HTML。这是使用 Nginx 和 Apache 的方法https://trackabi.com/blog/single-page-application-seo但是，Google 可以再次抓取 React SPA，可能存在错误。