reactjs - 基于 React 的 SPA 中的 SEO

Question

我有一个使用 React 库构建的单页应用程序(使用了 Create React App)。我在使用 React Router 解析的应用程序内部有不同的路由，例如 http://<domain-name>.com/faq .未使用服务器端渲染，现在我不可能使用它。

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

• 使内部页面(例如 /faq 页面)可通过其路由访问
• 创建 sitemap.xml里面的文件public文件夹，以便在构建应用程序时 Create 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>是一个真实的域名。为了简单起见，我省略了此处的其余页面。

但不幸的是，在我部署此应用程序一周后，这些页面仍未被 Google 搜索引擎编入索引。所以我决定使用谷歌搜索控制台(https://search.google.com/search-console/welcome)，发现我所有的内页都找不到。

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

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

Answer 1

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

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