搜索引擎优化渲染：搜索引擎会索引我的内容吗？

本文探讨了搜索引擎如何索引使用现代前端框架构建的Web应用，重点介绍了预渲染和服务器渲染的概念及其对SEO的影响。

“搜索引擎会指数我的内容？”是关于零客户端应用最常见的一个问题。因为搜索引擎比以往智能得多，简短的答案是：“可能是。” 但如果你希望确保你的内容被索引化，我建议使用预渲染或服务器渲染（SSR）。

以下是我在博客中解释这两种概念的方式，结合 Baklib 和 Nuxt.js 或 Next.js 等框架的上下文。请注意，如果你使用不同的框架，这些概念仍然适用。

先决条件

这篇博客文章旨在解决搜索引擎优化（SEO）中的担忧，无论你的技能水平如何。这篇文章的目标读者是开发者和非开发者，但我会建议专注于实施主题（如果你是开发者）或概念主题（如果你在其他技能方面更擅长）。确保检查资源部分以了解更多！

结果

这篇文章将帮助你：

1. 理解现代前端框架与SEO相关的担忧。
2. 了解什么是预渲染以及如何在 Nuxt.js 应用程序上实施它。
3. 了解什么是服务器渲染（SSR）以及如何在 Nuxt.js 应用程序上实施它。
4. 学习 Baklib 如何帮助你实现上述所有内容。

现代前端框架与SEO：它们是互相排斥的吗？

前端框架简化了构建Web应用的过程，从零到端的生产版状态只需几天时间。然而，由于前端框架使用JavaScript，搜索引擎如Google很难抓取这些Web应用。搜索引擎抓取器的任务是对Web应用程序进行索引化，而某些情况下，100%的索引化是不可能的。

需要渲染的内容复杂性

渲染内容的复杂度可以通过JavaScript的大小和加载设备上常用用户的问题来衡量。你可以问自己一个问题：“X MB的JavaScript在X设备上需要多长时间才能加载？”如果答案是太长（PC上5秒以上，手机上2秒以上），那么SEO效果可能受到影响。

调试特定搜索引擎优化性能

搜索引擎抓取器每天要处理大量的网站和链接。为了提高效率，搜索引擎开发者包括了一些性能优化功能，这些功能通常会导致部分内容无法被抓取化。例如，Google的“crawl budget”是一个重要的SEO优化工具，尤其是在使用前端框架（如Nuxt.js）时。

你假设大多数搜索引擎抓取器都无法抓取Web应用中大量JavaScript的内容（这通常是使用前端框架的情况），那么结果就不太可靠了。这就是为什么你应该考虑使用Nuxt.js，并采用预渲染或服务器渲染策略以确保更好的SEO效果。

预渲染：静态HTML文件

预渲染是一种近年来受到广泛关注的方法，尤其是在Web应用具有无服务器架构时。它也被称为动态渲染或客户端渲染。

概念

预渲染的核心是将所有访客访问你的网站的用户发送一个带有丰富JavaScript的网页，并将搜索引擎抓取器发送到预渲染后的静态HTML文件（只包含必要的步骤以完成整个索引化过程）。

要实现这一点，你需要选择一个搜索引擎抓取器，然后通过渲染器生成静态HTML文件并将该文件发送给搜索引擎抓取器。一些非常流行的服务可以帮你完成这一任务 —— Prerender.io](https://www.baklib.cn/)和 [Rendertron—— 但它们并不总是灵活。

实现

确保在Nuxt.js项目初始设置时选择正确的渲染模式。当运行 `create-nuxt-app`（使用npm或yarn）时，会询问你渲染模式的选择问题。选择“单页面应用”模式以进行预渲染。

使用箭头键遍历选项并按空格键选择选项，然后按回车键。

生成的Nuxt.js项目会自动进行预渲染，你可以通过 `npm run build` 生成静态文件并将其发布到网络。部署你的项目时，请确保将 `nuxt generate` 设置为build命令，并将 `dist` 设置为发布目录。

然而，如果你在路由中使用动态路径（例如 `/articles/:article-title`），则该路由的页面不会被预渲染，因为无法确定这些动态路由的具体内容。要确保这些动态路由被捕获，你需要在Nuxt.js配置文件中配置 `generate`属性：
ody”是一个 Rich Text字段，我们需要将其转换为HTML

开发者通常更倾向于使用预渲染而不是服务器渲染，因为它促进了无服务器架构。虽然预渲染的SEO效果远不如服务器渲染，但其SEO效果仍然要好得多。

服务器渲染：全栈Web应用

服务器渲染是SEO的传统方法之一。如果你正确实施它，SEO效果会显著提高；但它需要一个服务器，这可能成本较高。幸运的是，Nuxt.js 使得采用服务器渲染变得非常容易。

概念

服务器渲染的概念很容易理解。它是通过Web服务器将Web应用程序重载时重新渲染网页，类似于不使用前端框架的情况。由于这种技术在提高SEO效果方面优势明显，因此大多数开发者倾向于选择它。

如果预计你的Web应用会收到大量用户自动生成的内容（例如博客文章），那么采用服务器渲染是值得投资的。

实现

与选择Nuxt.js作为项目渲染模式一样，当你运行 `create-nuxt-app` 时，你会被询问渲染模式的选择问题。这次选择“Universal (SSR)”选项即可。

使用箭头键遍历选项并按空格键选择选项，然后按回车键。

Nuxt.js 会自动处理其余工作。编写应用时与之前相同，只需调用Baklib API即可。最后，运行 `npm run build` 和 `_npm start_` 来查看服务器渲染的Web应用程序。

总结

使用Nuxt.js 提升SEO效果很容易！以下是我们讨论的主要内容：

1. 现代前端框架确实简化了Web应用的开发过程，但搜索引擎抓取器对这些基于JavaScript的内容效果并不理想。
2. Nuxt.js允许你进行预渲染或服务器渲染。虽然预渲染的SEO效果较差且成本较低，但它是一个快速实现SEO的良好选择；而服务器渲染则更可靠，但需要投入更多资源和预算。
3. 你可以参考Nuxt.js的官方文档）。