基于React的SPA中的SEO

如何解决基于React的SPA中的SEO

我有一个使用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搜索引擎也没有为这些页面建立索引。因此，我决定使用Google搜索控制台（https://search.google.com/search-console/welcome），发现没有找到我的所有内页。

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

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

解决方法

Google应该能够索引React应用程序。如果它做不到并且看不到您的路线，则可能是您的应用程序有错误。如果它在浏览器中有效，则仍然会导致Google错误。例如，您至少可以使用Google Pagespeed来确保它可以正确呈现您的应用。

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