你的Vue.js应用无法被谷歌收录......除非你使用Nuxt.js

语言: CN / TW / HK

你是一个喜欢使用Vue.js的网络开发者吗?如果是这样,你并不孤单;Vue.js是周围最流行的前端JavaScript框架之一。然而,在你的网络开发项目中使用Vue.js有一个很大的缺点。谷歌不会索引Vue.js网页。

这是正确的;如果你想让你的网站在谷歌搜索结果中可见,你需要使用一个不同的框架。事实上,任何其他前端框架,如AngularReact,都是这种情况。

但是不要担心,有一种方法可以使用Vue.js,并且仍然可以使你的网站被谷歌索引。解决方案是使用Nuxt.js,一个基于Vue.js的服务器端渲染框架。

在这篇博文中,我们将讨论为什么单页应用程序不能被谷歌索引,以及你如何使用Nuxt.js来创建一个使用Vue.js的SEO友好型网站。

为什么SPA不能被谷歌索引?

你有没有检查过用任何现代前端框架构建的SPA的HTML标记?如果你有,你可能已经注意到,你无法真正看到组成应用程序的任何元素。相反,你将只看到一个单一的

元素。

这是为什么呢?原因是,SPA是用JavaScript创建的,你的应用程序的内容是由这种语言动态生成的。这给谷歌带来了一个问题,因为它的机器人在抓取你的网站时不能执行JavaScript。因此,他们不能看到(并因此索引)你的SPA的内容。

这意味着谷歌的爬虫无法访问单页应用程序的内容,这使得它们在搜索结果中不可见。

因此,如果你用Vue建立了一个网络应用,并希望它能够在任何搜索引擎上获得排名,你就需要找到一个解决方法。然而,有一个相当简单和优雅的解决方案:使用Nuxt.js。

如何用Nuxt.js使Vue.js SPA具有可索引性

Nuxt.js是一个基于Vue.js的框架,但它有一个关键的区别:它生成静态的Web应用程序。这起初听起来可能有悖常理,但它实际上有很大的意义。

原因是,由于Nuxt.js应用程序是静态的,它们不需要依靠JavaScript来生成它们的内容。相反,内容是在构建时生成的,然后作为HTML提供给用户。

这听起来像是一个很大的限制,但实际上并不是。绝大多数网络应用程序不需要动态生成它们的内容;它们可以在构建时同样轻松地做到这一点。

当然,这条规则也有一些例外,但在大多数情况下,你能够使用Nuxt.js而没有任何问题。

那么,还记得我们刚刚告诉你的关于Vue应用的内容是由JavaScript实时生成的吗?Nuxt.js解决了这个问题,它在服务器端为你的应用中的每条路线提前生成了你的HTML页面。

这意味着你的应用中的每一个页面都有一个独特的URL,并且所有的HTML标记都是可见的,然后可以被谷歌的爬虫索引。此外,Nuxt.js还具有一些功能,使其成为开发SEO友好型网站的理想选择,例如:

  • 自动拆分代码,这样你的应用中的每一个页面都只加载渲染该页面所需的JavaScript、CSS和HTML(这可以减少页面加载时间)。
  • 预先渲染页面(这意味着Nuxt会自动为你的应用程序中的每个页面生成静态HTML文件)
  • 为每个页面添加自定义元数据的能力(这使你能够控制你的页面如何出现在搜索结果中)。
  • 还有更多!

简而言之,如果你想用Vue创建一个SEO友好的网站,最好的方法就是使用Nuxt。有了这个框架,你可以得到使用Vue的所有好处(比如你可以快速建立你的应用程序),再加上创建可被谷歌索引的网站的能力。

那么,你如何创建一个Nuxt应用程序?

Nuxt的另一个很酷的特点是,你甚至不需要在你的电脑上安装一个新的软件包。你可以使用NPX,它允许你直接从命令行创建一个新的Nuxt项目。

要做到这一点,只需打开你的终端并输入以下内容:

powershell npx create-nuxt-app <app-name>

这将开始创建一个新的Nuxt应用程序的过程。你会被问到一些关于你的项目的问题,比如它的名字、作者等等。一旦这个过程结束,你就可以用下面的命令运行你的新应用:

powershell npm run dev

在这一点上,你可以简单地开始在你的应用程序上工作,就像你在使用普通的Vue一样。但是,你也可以使用Nuxt的其他功能,比如它的强大的路由器系统。

一旦你完成了,你可以使用下面的命令来生成你的静态资产:

powershell npm run generate

基本上就是这样了!当然,Nuxt还有很多东西比我们刚才介绍的更多,但这应该让你对它有一个很好的了解。

最后的想法

Nuxt已经迅速成为开发者创建Vue驱动的SSR应用的首选解决方案,这些应用也被Google收录。

这很容易看出原因;有了自动路由和预渲染等功能,Nuxt可以很容易地创建快速加载的应用程序,而且还能被世界上最流行的搜索引擎所收录。

所以,如果你想用Vue创建一个SEO友好的网站,我们希望这篇文章能对你有所帮助!