VUE.js SPA站点的SEO优化指南

vue(发音 /vjuː /,就像view发音)是用于构建用户界面的JavaScript框架。它建立在标准HTML,CSS和JavaScript之上,并提供基于声明性和组件的编程模型,可帮助有效地开发用户界面,无论是简单的还是复杂的。Vue.js是一个开源的前端JavaScript框架,用于构建用户界面和单页面应用程序。它由Evan You创建,并由他和其他活跃的核心团队成员维护。

vue SPA是什么

Single Page Application,单页应用程序,是构建加载速度更快的网站的最著名方法,而不会在每次用户与应用程序交互时影响服务器。多页应用程序和单页应用程序之间的显著区别是,单页应用程序在执行页面后只下载一次。只要用户与应用程序交互,就只会修改指定的组件,而不是完整的应用程序,这使得单页面应用程序在交互性方面更加迅速。Vue.js是一个渐进的声明式JavaScript框架,用于构建快速的单页应用程序。Vue.js最重要的优点之一是它的大小很小(18-21kb)。用户可以轻松地下载并开始使用它。

vue站点的SEO

关于普遍性的站点SEO排名因素在此不赘述,本站已经多次提到过。今天仅就VUE搭建的站点如何做SEO展开叙述。

单页应用程序(spa)在一个页面加载中发送站点的所有代码,并根据用户导航的方式动态更改和异步加载内容。默认情况下,它依赖于客户端渲染,一开始只提供一个空的应用程序外壳或容器。逛一个SPA会让人感觉又快又爽。建造它们也很有趣。但是请记住:内容对搜索引擎来说非常重要,所以在你的页面上没有任何内容,然后再获取它听起来不像是一个好主意。对吧?这使得您的页面更难以被爬虫读取。

搜索引擎如何看待单页应用程序

当爬虫第一次访问您的SPA时,它通常只会索引它所看到的内容,而不运行JavaScript。

这并不意味着谷歌和其他一些搜索引擎不执行JavaScript。他们大约从2015年开始执行了。谷歌索引Vue生成的内容。但是爬虫通常只在他们的“第二波索引”中这样做:当它们最初抓取您的网站时,它们希望尽可能有效地索引它(每天都有这么多新页面要索引)。它们通常只会在第二次访问您的页面时使用更多的时间和资源来执行JavaScript。

这在很大程度上是对实际情况的过度简化,但它有助于理解问题。爬虫程序对您的页面有一定的资源预算,称为“爬行预算”,它是根据它认为您的页面有多重要来计算的。由于执行JS会占用更多的资源,可能没有足够的预算来抓取所有的内容。这可能会导致某些内容不可见。

好用又炫酷的Windows效率工具—Quicker—现在注册送90天

好用又炫酷的Windows效率工具—Quicker—现在注册送90天

除此之外,谷歌当然不是唯一的搜索引擎,许多其他搜索引擎也不会抓取客户端呈现的内容。

与已经呈现的标记相比,使用客户端呈现使您的站点更容易受到爬行错误的影响。如果JavaScript出现问题,爬行程序将看不到任何东西。不能保证无错误渲染。谷歌的爬虫程序并不都运行在同一版本的Chrome上。

但是:一旦正确地建立了索引,您的页面在排名方面应该没有任何缺点。结论是这样的:是的,搜索引擎呈现JavaScript,但不要过度依赖于异步内容的爬行,特别是当:

  • 经常更改或添加内容
  • 希望新页面被快速和彻底地索引
  • 大型网站

更多的技术指南可以参考Google文档——关于javascript SEO.

对于SPA SEO应该关注什么

首先,每个页面都要有一个可读性强的且比较干净清晰的URL。正确的路由是很重要的,一个干净的URL架构是必须的。

其次,使用服务器端渲染(SSR)或预渲染。关键内容最好包含在源标记中,以避免索引问题。为了实现这一点,同时仍然使用SPA架构,你可以使用服务器端渲染或预渲染。使用服务器端渲染的SPA,渲染是直接在Web服务器上完成的。(通常使用Node.js,因为官方的vue-server-renderer包使用它,但它也可以用例如PHP来完成)。然后,生成的HTML视图被提供给客户端。每条路由都将是一个单独的HTML文件。通过使用SSR,爬虫不需要再执行你的JS,而是预先拥有他们需要的一切。

有一些服务和插件提供预渲染你的SPA(或者只是特定的路线)。如果您想让您的SPA的某些部分更容易被索引,这是非常有用的,并且对于真正的SSR会被过度使用的项目来说是完美的。预渲染的工作原理是启动一个无头浏览器,在构建时生成SPA的渲染版本并将其交付给爬虫程序。

如果你对如何正确处理这个问题感到担忧,并且还没有建立你想要的SPA来优化搜索。也许SPA终究不是最佳的解决方案?

免责声明:以上的内容是个人的方法,也许是一个不受欢迎的观点。我通常只推荐SPA用于在搜索排名不重要的应用程序。

我正式觉得自己像个老头子在说这句话,所以继续说那个关于使用PHP的人的笑话吧 🙃但是。不要仅仅因为你觉得SPA是 "现代的web开发方法 "而创建一个SPA。选择它是为了所有的优势,同时了解SEO的注意事项。并对它进行彻底的优化。

总结vue.js单页应用的SEO

对于一个SPA来说,你将不得不在SEO方面多多下功夫。让SPA有好的排名当然不是不可能,但你必须决定这种方法是否真的适合你的项目要求。无论如何,这并不意味着Vue.js和SEO不相配。首先,SPA肯定不是唯一的Vue.js用例。其次,Googlebot和其他搜索引擎能够渲染JavaScript。第三,一旦设置正确,预渲染和SSR工作得很好。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注