关于Vue项目的SEO问题

首先我们先来了解一下什么是SEO？

搜索引擎优化（Search engine optimization，简称 SEO ），指为了提升网页在搜索引擎自然搜索结果中（非商业性推广结果）的收录数量以及排序位置而做的优化行为，是为了从搜索引擎中获得更多的免费流量，以及更好的展现形象。

通俗点，就是百度、Google等这些搜索引擎会爬我们网站的内容，用户通过搜索某个关键字的时候，我们的网站对应的页面就有机会会显示出来。

为什么Vue做的项目不利于SEO呢？

Vue做的项目大部分是基于SPA（单页面模式），也就是很多数据都是通过JS输出出来的，如果是通过axios异步请求的话，我们数据更是动态的输出的，而这些数据的获取和显示都是基于浏览器来处理的；而搜索引擎的爬虫是无法运行JS代码，所以当爬虫访问你的页面的时候，就有点像你用浏览器右键“查看源代码”所看到的内容；
你会发现所有JS处理出来的内容，都是看不到的，这时候搜索引擎会觉得你的页面没有任何内容，自然就不会把你的页面收录起来了；

一般都哪几种解决方案呢？

• 服务器端渲染（SSR）
  使用服务器端渲染，这可以避免搜索引擎无法解析动态渲染的内容而无法被收录。服务器端渲染能够在后端生成 HTML、CSS和 JavaScript，并将其返回到客户端，使得搜索引擎可以抓取页面渲染后的内容。vue.js 官方提供了一个名为" vue-server-renderer "的服务器端渲染包，可以方便地实现服务器端渲染；

  也可以基于Nuxt.js来开发，采用SSR模式；

• 预渲染（Pre-rendering）
  如果无法使用服务器端渲染，那么就可以考虑预渲染。将Vue的动态内容静态生成为 HTML页面。这样，搜索引擎将会看到跟服务器端渲染类似的静态 HTML 页面，可以正确地解析。如果页面的数据变化较小，可以使用预渲染。可以使用 prerender-spa-plugin 这个插件；

  也可以用第三方的预渲染机制，这个我在下一篇会详细讲到；

其他几个SEO需要注意的问题：

友好的 URL

友好的 URL 是非常重要的。不仅可以方便用户理解，也可以帮助搜索引擎正确地理解页面内容。一些关于 URL 的最佳实践：

可以采用路由history的模式，这样跟用 # 的hash 模式比，更像是正常的文件夹访问模式

URL 应该简洁，不应包含过多无意义的参数和值

URL 中应包含关键的信息，以便搜索引擎和用户理解

URL 应该保证唯一性，防止重复导致搜索引擎排名下降

vue 的路由组件和过滤器可以帮助我们实现自定义 URL 的需求。

描述和标题
描述和标题对于搜索引擎优化来说也非常重要。它们能让搜索引擎了解页面的内容，从而正确地展示它们。在 vue 中，我们可以设置每个页面的标题和描述信息。这些信息将会被包含在 HTML 代码中，供搜索引擎获取。